angularjs 1 开发简单案例(包含common.js,service.js,controller.js,page)

common.js

  1 var app = angular.module('app', ['ngFileUpload'])
  2     .factory('SV_Common', function ($http) {
  3         var data = {
  4             WebService: '',
  5         };
  6         var vm = {
  7             log: function (par, par1) {
  8                 return;
  9                 if (par1) {
 10                     console.log('********** common: ' + par + ' |', par1);
 11                 } else {
 12                     console.log('********** common: ' + par);
 13                 }
 14             },
 15             getData: function () {
 16                 return data;
 17             },
 18             getWebService: function () {
 19                 if (!data.WebService || data.WebService == '') {
 20                     throw { error: 'Request setWebService' };
 21                 }
 22                 return data.WebService;
 23             },
 24             setWebService: function (par) {
 25                 data.WebService = par;
 26                 vm.log('set websercie to [' + data.WebService + ']');
 27             },
 28             getRequest: function (func, pars) {
 29                 return {
 30                     method: 'POST',
 31                     url: vm.getWebService() + func,
 32                     headers: {
 33                         //'Content-Type': 'json',
 34                         'Content-Type': 'application/x-www-form-urlencoded',
 35                     },
 36                     data: pars,
 37                     dataType: 'json',
 38                 }
 39             },
 40             http: function (func, pars, cb) {
 41                 var re = { status: "0", context: "Internet Error" };
 42                 var req = vm.getRequest(func, pars);
 43                 vm.log('http ' + req.url, req.data);
 44                 $http(req).then(function (res) {
 45                     if (res.statusText == "OK") {
 46                         re = res.data;
 47                     }
 48                     if (cb) {
 49                         cb(re);
 50                     }
 51                 }, function (e) {
 52                     console.log('================ error:', e);
 53                     if (cb) {
 54                         cb(re);
 55                     }
 56                 });
 57             },
 58             http_post: function (func, pars, cb) {
 59                 var re = { status: "0", context: "Internet Error" };
 60                 var req = vm.getRequest(func, pars);
 61                 vm.log('post ' + req.url, req.data);
 62                 
 63                 $http.post(req.url, req.data).then(function (res) {
 64                     if (res.statusText == "OK") {
 65                         re.status = "1";
 66                         re.context = res.data;
 67                     }
 68                     cb(re);
 69                 }, function (e) {
 70                     console.log('================ error:', e);
 71                     if (cb) {
 72                         cb(re);
 73                     }
 74                 });
 75             },
 76             ajax_post: function (func, pars, cb) {
 77                 var re = { status: "0", context: "Internet Error" };
 78                 $.ajax({
 79                     type: "POST",
 80                     contentType: "application/json",
 81                     url: vm.getWebService() + func,
 82                     data: pars,
 83                     dataType: 'json',
 84                     success: function (result) {
 85                         console.log(result);
 86                     },
 87                     error: function (e) {
 88                         console.log(e);
 89                     }
 90                 });
 91             },
 92             FormatDate: function (strTime) {
 93                 var date = new Date(strTime);
 94                 if (date.getFullYear() > '2000') {
 95                     var day = date.getDate();
 96                     var month = date.getMonth();
 97                     if (day < 10 || day < 10) {
 98                         day = '0' + day;
 99                     }
100                     if (month < 10 || month < 10) {
101                         month = '0' + (month + 1);
102                     }
103                     date = day + '/' + month + "/" + date.getFullYear();
104                 }
105                 else {
106                     date = null;
107                 }
108                 return date;
109             },
110             FormatDate1: function (strTime) {
111                 var date = new Date(strTime);
112                 console.log(date);
113                 if (date.getFullYear() < '2000') {
114                     date = '';
115                 }
116                 return date;
117             },
118         };
119         return vm;
120     })
121     .factory('SV_Popup', function ($timeout) {
122         var data = {};
123         var vm = {
124             getSide: function (side) {
125                 var res = 'r0';
126                 if (side) {
127                     switch (side) {
128                         case 'center':
129                             res = 'c0';
130                             break;
131                         case 'centerLarger':
132                             res = 'cl0';
133                             break;
134                         case 'right':
135                             res = 'r0';
136                             break;
137                         case 'rightLarge':
138                             res = 'rl0';
139                             break;
140                     }
141                 }
142                 return res;
143             },
144             SetPopup: function (source, side) {
145                 if (!source) {
146                     console.log('============== request source');
147                     return;
148                 }
149                 //console.log(source);
150                 source.popup = {
151                     curCss: vm.getSide(side),
152                     cssList: {
153                         'c0': 'float_window_popup float_window_popup_init',
154                         'c1': 'float_window_popup float_window_popup_show',
155                         'c2': 'float_window_popup float_window_popup_hide',
156                         'cl0': 'float_window_centerl float_window_centrel_init',
157                         'cl1': 'float_window_centerl float_window_centrel_show',
158                         'cl2': 'float_window_centerl float_window_centrel_hide',
159 
160 
161                         'r0': 'float_window_right float_window_right_init',
162                         'r1': 'float_window_right float_window_right_show',
163                         'r2': 'float_window_right float_window_right_hide',
164                         'rl0': 'float_window_right float_window_right_init',
165                         'rl1': 'float_window_right float_window_rightl_show',
166                         'rl2': 'float_window_right float_window_rightl_hide',
167                     },
168                     toggle: function (sc, par) {
169                         if (sc && sc.popup) {
170                             var t = '';
171                             if (!par) {
172                                 switch (sc.popup.curCss) {
173                                     case '':
174                                     case 'c0':
175                                         t = 'c1';
176                                         break;
177                                     case 'c1':
178                                         t = 'c2';
179                                         break;
180                                     case 'c2':
181                                         t = 'c0';
182                                         break;
183                                     case 'cl0':
184                                         t = 'cl1';
185                                         break;
186                                     case 'cl1':
187                                         t = 'cl2';
188                                         break;
189                                     case 'cl2':
190                                         t = 'cl0';
191                                         break;
192 
193                                     case 'r0':
194                                         t = 'r1';
195                                         break;
196                                     case 'r1':
197                                         t = 'r2';
198                                         break;
199                                     case 'r2':
200                                         t = 'r0';
201                                         break;
202                                     case 'rl0':
203                                         t = 'rl1';
204                                         break;
205                                     case 'rl1':
206                                         t = 'rl2';
207                                         break;
208                                     case 'rl2':
209                                         t = 'rl0';
210                                         break;
211                                 }
212                             } else {
213                                 t = par;
214                             }
215                             //console.log('============== ' + sc.popup.curCss + '->' + t);
216                             if (t == 'c2' || t == 'cl2' || t == 'r2' || t == 'rl2') {
217                                 $timeout(function () {
218                                     sc.popup.toggle(sc);
219                                 }, 200);
220                             }
221                             sc.popup.curCss = t;
222                         } else {
223                             console.log('============== request source');
224                         }
225                     },
226                     show: function (sc) {
227                         if (sc && sc.popup) {
228                             var tt = sc.popup.curCss;
229                             if (tt && tt.length > 0) {
230                                 tt = tt.substring(0, tt.length - 1) + '1';
231                                 sc.popup.toggle(sc, tt);
232                             } else {
233                                 sc.popup.toggle(sc);
234                             }
235                         } else {
236                             console.log('============== request source');
237                         }
238                     },
239                     hide: function (sc) {
240                         if (sc && sc.popup) {
241                             var tt = sc.popup.curCss;
242                             if (tt && tt.length > 0) {
243                                 tt = tt.substring(0, tt.length - 1) + '2';
244                                 sc.popup.toggle(sc, tt);
245                             } else {
246                                 sc.popup.toggle(sc);
247                             }
248                         } else {
249                             console.log('============== request source');
250                         }
251                     },
252 
253                 }
254             }
255         }
256         return vm;
257     })
258     .directive('bxPager', function () {
259         return {
260             restrict: 'E',
261             replace: true,
262             scope: {
263                 fData: '=',
264             },
265             template: function (el, at) {
266                 var re = "";
267                 re += '<div class="pager">
268                         Total  <strong>{{fData.data.totalItems}}</strong>  items, 
269                         <input type="text" class="pager_input" ng-model="fData.data.pageSize" ng-change="f_pager.pageSize_Change();" />
270                         Page Size.
271                         <a class="pager_button" ng-click="f_pager.curPage_AddValue(-fData.data.totalPages);" style="margin-left: 30px;">|<</a>
272                         <a class="pager_button" ng-click="f_pager.curPage_AddValue(-1);" ng-disabled="fData.data.curPage<=1"><</a>
273                         <input type="text" class="pager_input" ng-model="fData.data.curPage" ng-change="f_pager.curPage_Change();" />/{{fData.data.totalPages}} Pages&nbsp;
274                         <a class="pager_button" ng-click="f_pager.curPage_AddValue(1);" ng-disabled="fData.data.curPage>=fData.data.totalPages">></a>
275                         <a class="pager_button" ng-click="f_pager.curPage_AddValue(fData.data.totalPages);">>|</a>
276                     </div>';
277                 return re;
278             },
279             controller: function ($scope, $element, $attrs, $transclude) {
280 
281                 $scope.f_pager = {
282                     pageSize_Change: function () {
283                         var i = parseInt($scope.fData.data.pageSize);
284                         if (i && i >= 0) {
285                             $scope.fData.data.pageSize = '' + i;
286                         } else {
287                             if ($scope.fData.data.pageSize == 'AL') {
288                                 $scope.fData.data.pageSize = '0';
289                             } else {
290                                 $scope.fData.data.pageSize = 'ALL';
291                             }
292                         }
293                         $scope.fData.data.curPage = 1;
294                         if ($scope.fData.refresh && typeof ($scope.fData.refresh) == 'function') {
295                             $scope.fData.refresh();
296                         }
297                     },
298                     curPage_Change: function () {
299                         var i = parseInt($scope.fData.data.curPage);
300                         if (i && i > 0) {
301                             if (i > $scope.fData.data.totalPages) {
302                                 $scope.fData.data.curPage = $scope.fData.data.totalPages;
303                             } else {
304                                 $scope.fData.data.curPage = i;
305                             }
306                         } else {
307                             $scope.fData.data.curPage = 0;
308                         }
309                         if ($scope.fData.refresh && typeof ($scope.fData.refresh) == 'function') {
310                             $scope.fData.refresh();
311                         }
312                     },
313                     curPage_AddValue: function (v) {
314                         var i = parseInt(v);
315                         //console.log($scope.fData.data.curPage,i);
316                         if (i) {
317                             var temp = $scope.fData.data.curPage + i;
318                             if (temp < 1) {
319                                 temp = 1;
320                             }
321                             if (temp > $scope.fData.data.totalPages) {
322                                 temp = $scope.fData.data.totalPages;
323                             }
324                             if (temp != $scope.fData.data.curPage) {
325                                 $scope.fData.data.curPage = temp;
326                                 //SV_List.refresh(null, function (res) { });
327                                 //console.log($scope.fRefresh);
328                                 if ($scope.fData.refresh && typeof ($scope.fData.refresh) == 'function') {
329                                     $scope.fData.refresh();
330                                 }
331                             }
332                         }
333                     }
334                 }
335             }
336         }
337     });

View Code

service.js

 1 app.factory('SV_AssignExport', function ($http, SV_Common) {
 2     var data = {
 3         pager: {
 4             totalItems: 0,
 5             totalPages: 10,
 6             curPage: 0,
 7             pageSize: '100',
 8         },
 9         search: {},
10         client: {
11             title: '客户/Client',
12             list:[]
13         },
14         list: [],
15         refnos: {},
16         row: {},
17         show:false,
18     }
19     var vm = {
20         init: function () {
21             SV_Common.setWebService('JobService.asmx');
22             data.search = {
23                 From: new Date(),
24                 To: new Date(),
25                 DateBy: 'Job',
26                 Type: 'WGR',
27                 JobNo: '',
28                 BookingNo: '',
29                 HblNo: '',
30                 Vessel: '',
31                 Product: '',
32                 Client: '',
33                 ClientName: '',
34             };
35             vm.refresh_client();
36         },
37         GetData: function () {
38             return data;
39         },
40         refresh: function (pars, cb) {
41             var pars = angular.copy(data.search);
42             pars.From = moment(pars.From).format('YYYYMMDD');
43             pars.To = moment(pars.To).add(1, 'days').format('YYYYMMDD');
44             pars.curPage = data.pager.curPage;
45             pars.pageSize = data.pager.pageSize;
46             console.log(pars);
47             var func = "/List_AssignCargo_GetData";
48             SV_Common.http(func, pars, function (res) {
49                 if (res.status == true) {
50                     data.pager.curPage = res.context.curPage;
51                     data.pager.totalPages = res.context.totalPages;
52                     data.pager.totalItems = res.context.totalItems;
53                     var temp = res.context.list;
54                     data.list = res.context.list;
55                 }
56                 if (cb) {
57                     cb(res);
58                 }
59             })
60         },
61         save: function (par, cb) {
62             var pars = angular.copy(par);
63             var func = "/Save_AssignExport_Data";
64             SV_Common.http(func, pars, function (res) {
65                 if (res.status == true) {
66                     vm.refresh();
67                 }
68                 if (cb) {
69                     cb(res);
70                 }
71             })
72         },
73        refresh_client: function (par, cb) {
74             var pars = {};
75             var func = "/MasterData_Client";
76             SV_Common.http(func, pars, function (res) {
77                 if (res.status == '1') {
78                     data.client.list = res.context;
79                 }
80                 if (cb) {
81                     cb(res);
82                 }
83             });
84         },
85 
86     }
87     vm.init();
88     return vm;
89 
90 })

View Code

controller.js

  1 app.controller('Ctrl_AssignExport', function ($scope, SV_AssignExport, $timeout, SV_Popup, $http) {
  2     $scope.log = '';
  3     $scope.vm = SV_AssignExport.GetData();
  4     $scope.newStock = {};
  5     $scope.OrderId = '';
  6     $scope.action = {
  7         data: ['master', 'job','cargo'],
  8         save: function () {
  9             SV_AssignExport.save($scope.vm, function (res) {
 10                 //console.log('=============', $scope.vm);
 11                 if (res.status == true) {
 12                     parent.notice('Save Successful');
 13                 } else {
 14                     parent.notice('Save False', '', 'error');
 15                 }
 16             });
 17         },
 18         createExport: function () {
 19             var pol = document.getElementById('pol');
 20             SV_AssignExport.creatExport($scope.vm, function (res) {
 21                 //console.log('=============', $scope.vm);
 22                 console.log(res);
 23                 if (res.status == true) {
 24                     parent.notice('Create Successful!', 'Job No is ' + res.context, '');
 25                 } else {
 26                     parent.notice('Save False', '', 'error');
 27                 }
 28             });
 29         },
 30         search: function () {
 31             SV_AssignExport.refresh(null, function (res) {
 32                 //console.log('=============', $scope.vm);
 33                 if (res.status == true) {
 34                     parent.notice('Refresh Successful');
 35                 } else {
 36                     parent.notice('Refresh False', '', 'error');
 37                 }
 38             });
 39         },
 40         openTabJob: function (row) {
 41             parent.navTab.openTab(row.JobNo, "/PagesContTrucking/Job/JobEdit.aspx?no=" + row.JobNo, { title: row.JobNo, fresh: false, external: true });
 42         },
 43         search_callback: function () {
 44             
 45         },
 46         selectClient: function () {
 47             $scope.action.is_show('master');
 48             $scope.masterData.show($scope.vm.client, $scope.action.selectClient_callback);
 49         },
 50         selectClient_callback: function (res) {
 51             //console.log(res);
 52             $scope.vm.search.Client = res.c;
 53             $scope.vm.search.ClientName = res.n;
 54         },
 55         selectPol: function () {
 56             $scope.action.is_show('master');
 57             $scope.masterData.show($scope.vm.pol, $scope.action.selectPol_callback);
 58            
 59         },
 60         selectPol_callback: function (res) {
 61             //console.log(res);
 62             $scope.vm.newJob.Pol = res.c;
 63         },
 64         selectExportJob: function () {
 65             $scope.action.is_show('job');
 66             $scope.masterData.show($scope.vm.job, $scope.action.selectJob_callback);
 67         },
 68         selectJob_callback: function (res) {
 69             //console.log(res);
 70             $scope.vm.newJob.JobNo = res.c;
 71         },
 72         is_show: function (type) {
 73             for (var i = 0; i < $scope.action.data.length; i++) {
 74                 var obj = $scope.action.data[i];
 75                 var n = document.getElementById(obj);
 76                 var add = document.getElementById('add');
 77                 var save = document.getElementById('save');
 78                 if (type == obj) {
 79                    // $('#' + type).removeClass('hide');
 80                     n.style.display = "block";
 81                 }
 82                 else {
 83                     //$('#' + obj).addClass('hide');
 84                     n.style.display = "none";
 85                 }
 86                 if (type == "cargo") {
 87                     add.style.display = "table-cell";
 88                     save.style.display = "table-cell";
 89                 }
 90                 else {
 91                     add.style.display = "none";
 92                     save.style.display = "none";
 93                 }
 94             }
 95         },
 96         selectAll: function () {
 97             var btnSelect = document.getElementById('btnSelect');
 98             if (btnSelect.innerHTML == "Select All")
 99                 btnSelect.innerHTML="UnSelect All";
100             else
101                 btnSelect.innerHTML="Select All";
102             jQuery("input.checkbox").each(function () {
103                 this.click();
104             });
105         },
106         assignDate: function () {
107            
108             var refnos = "";
109             jQuery("input.checkbox").each(function () {
110                 if (this.checked)
111                     refnos += this.id + ',';
112             });
113             var pos = refnos;
114             if (refnos.length > 0) {
115                 SV_AssignExport.assign($scope.vm, pos, function (res) {
116                     //console.log('=============', $scope.vm);
117                     if (res.status == true) {
118                         parent.notice('Assign Successful');
119                     } else {
120                         parent.notice('Assign False', '', 'error');
121                     }
122                 });
123             }
124             else {
125                 parent.notice('Assign False,Pls select at least one', '', 'error');
126             }
127         },
128         assginToExport: function () {
129             var refnos = "";
130             jQuery("input.checkbox").each(function () {
131                 if (this.checked)
132                     refnos += this.id + ',';
133             });
134             var pos = refnos;
135             var newJobNo = document.getElementById('newJobNo');
136             if (newJobNo.value=="") {
137                 parent.notice('Assign False! ', 'Pls select at least one Export Job', 'error');
138             }
139             else if (refnos=="") {
140                 parent.notice('Assign False!', ' Pls select at least one', 'error');
141             }
142             else {
143                 SV_AssignExport.assignToExport($scope.vm, pos, function (res) {
144                     //console.log('=============', $scope.vm);
145                     if (res.status == true) {
146                         parent.notice('Assign Successful');
147                     } else {
148                         parent.notice('Assign False', '', 'error');
149                     }
150                 });
151                 
152             }
153         },
154         pick: function (row) {
155             SV_AssignExport.pickToExport($scope.vm,row, function (res) {
156                 //console.log('=============', $scope.vm);
157                 if (res.status == true) {
158                     parent.notice('Assign Successful');
159                 } else {
160                     parent.notice('Assign False', '', 'error');
161                 }
162             });
163         },
164         openStockList: function (row) {
165             $scope.action.is_show('cargo');
166             $scope.OrderId = row.Id;
167             SV_AssignExport.refresh_stock(row, $scope.action.openStockList_callback);
168         },
169         openStockList_callback: function (res) {
170             $scope.masterData.show($scope.vm.sku,null);
171         },
172         addStock: function (par) {
173             var add = document.getElementById('newStock');
174             var save = document.getElementById('save');
175             if (par == "New") {
176                 $scope.newStock = {};
177                 add.style.display = "table-row";
178                 save.style.display = "none";
179             }
180             else if (par == "Save") {
181                 $scope.newStock.OrderId = $scope.OrderId;
182                 SV_AssignExport.saveStock($scope.newStock, 'ONE', function (res) {
183                     //console.log('=============', $scope.vm);
184                     if (res.status == true) {
185                         parent.notice('Save Successful');
186                         add.style.display = "none";
187                     } else {
188                         parent.notice('Save False', '', 'error');
189                     }
190                 });
191             }
192         },
193         cancelStock: function () {
194             var save = document.getElementById('save');
195             var add = document.getElementById('newStock');
196             save.style.display = "table-cell";
197             add.style.display = "none";
198         },
199         saveStock: function () {
200             var add = document.getElementById('newStock');
201             SV_AssignExport.saveStock($scope.vm.sku,'ALL', function (res) {
202                 //console.log('=============', $scope.vm);
203                 if (res.status == true) {
204                     parent.notice('Save Successful');
205                     add.style.display = "none";
206                 } else {
207                     parent.notice('Save False', '', 'error');
208                 }
209             });
210         },
211     }
212     $scope.masterData = {
213         data: {
214             list: [],
215             no: '',
216             title: '',
217             selectCallback: null,
218 
219         },
220         show: function (dd, cb) {
221             $scope.masterData.data = dd;
222             $scope.masterData.selectCallback = cb;
223             $scope.masterData.popup.show($scope.masterData);
224         },
225         hide: function () {
226             $scope.masterData.data = {};
227             $scope.masterData.popup.hide($scope.masterData);
228         },
229         select: function (row) {
230             if ($scope.masterData.selectCallback && typeof ($scope.masterData.selectCallback) == 'function') {
231                 //$scope.action.selectClient_callback(row);
232                 $scope.masterData.selectCallback(row);
233             }
234             $scope.masterData.hide();
235         },
236     }
237     $scope.pager = {
238         //===========data.totalItems: 0,
239         //===========data.totalPages: 10,
240         //===========data.curPage: 0,
241         //===========data.pageSize: '15',
242         data: SV_AssignExport.GetData().pager,
243         refresh: function () {
244             $scope.action.search();
245             //console.log('============ refresh');
246         }
247     }
248 
249     SV_Popup.SetPopup($scope.masterData, 'center');
250     //$scope.action.get_booking(clientRefNo.value);files
251 })

View Code

显示的页面分别引用上面的文件

在<html xmlns="http://www.w3.org/1999/xhtml" >添加属性ng-app="app"

在body 添加属性ng-controller="Ctrl_AssignExport"