• 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"

  • 相关阅读:
    Hadoop常用命令
    常用MySQL语句整合
    如何把mysql的列修改成行显示数据简单实现
    如何在Linuxt系统下运行maven项目
    常用的SSH注解标签
    SSH整合框架+mysql简单的实现
    实现会话跟踪的技术有哪些
    Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
    REST WebService与SOAP WebService的比较
    如何用java生成随机验证码
  • 原文地址:https://www.cnblogs.com/huangjing/p/6043357.html
Copyright © 2020-2023  润新知