首页 > 代码库 > angularjs 1 开发简单案例(包含common.js,service.js,controller.js,page)

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

2024-08-19 16:26:47   221人阅读

common.js
技术分享
  1 var app = angular.module(‘app‘, [‘ngFileUpload‘])  2     .factory(‘SV_Common‘, function ($http) {  3         var data =http://www.mamicode.com/ {  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 =http://www.mamicode.com/ {};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 =http://www.mamicode.com/ { 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             else101                 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.valuehttp://www.mamicode.com/=="") {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 =http://www.mamicode.com/ {213         data: {214             list: [],215             no: ‘‘,216             title: ‘‘,217             selectCallback: null,218 219         },220         show: function (dd, cb) {221             $scope.masterData.data =http://www.mamicode.com/ dd;222             $scope.masterData.selectCallback = cb;223             $scope.masterData.popup.show($scope.masterData);224         },225         hide: function () {226             $scope.masterData.data =http://www.mamicode.com/ {};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);files251 })
View Code

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

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

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

 

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


联系
我们