Angularjs在工做中的使用

Angularjs校驗插件ngMessages使用方法

1.       引入angular-messages.js插件

2.       在模塊中引入ngMessages

Var homePageApp = angular.module('homePageApp', ['ui.router','pager','ngDialog','daterangepicker','ngMessages']);

3.       在模板文件中使用它進行驗證

<div class="form-inline form-group"                                           ng-class="{'has-error':keywordForm.host.$touched && keywordForm.host.$invalid}">                                           <label><font style="color: red">*</font>&nbsp;域名:</label>                                           <input class="form-control" type="text" id="host"                                                      name="host"                                                      ng-model="host"                                                      ng-maxlength="255"                                                      ng-pattern="/^(?=^.{3,255}$)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/"                                                      required                                                      />                                           <div class="help-block" ng-messages="keywordForm.host.$error" ng-if="keywordForm.host.$touched">                                        <p ng-message="maxlength">域名最大長度255</p>                                        <p ng-message="required">域名必填</p>                                        <p ng-message="pattern">域名輸入不正確</p>                               </div>                                 </div>

 

Angularjs開源彈框插件ngDialog使用方法

1.       引入ngDialog.js插件以及相關的樣式；

2.       在模塊中引入ngDialog

Var homePageApp = angular.module('homePageApp', ['ui.router','pager','ngDialog','daterangepicker','ngMessages']);

3.       在Controller相關方法中操做ngDialog

homePageApp.controller('KeywordsController',['$scope','keywordsService','ngDialog',function($scope,keywordsService,ngDialog){            $scope.clickToDelete = function(host,chooseType){               var del_flag = false;               ngDialog.open({              template: '../../templates/keywords_deleteOne_popup.html',              className:'ngdialog-theme-default',              width:350,              height:200,              preCloseCallback:function(){                     //此方法用來在關閉對話框的時候觸發相關操做 $scope.getKeywordListByCondition();              },              controller:function($scope){                 $scope.deleteOne = function(delflag){                         del_flag = delflag;                         if(del_flag){                       if(chooseType == '1'){                                              keywordsService.deleteUrlKeyword({                                                        params : {                                                                   "host":host                                                        },                                                        callback : function(result) {                                                        }                                              });                       }else{                                              keywordsService.deleteUrlKeywordNoPrefix({                                                        params : {                                                                   "host":host                                                        },                                                        callback : function(result) {                                                        }                                              });                                    }                     }                      $scope.closeThisDialog(); //關閉對話框                 }             }         });   } }]);

Angulajs使用$scope中的變量賦值賦值問題

//var chooseArr = $scope.chooseArr; //這種方式會改變$scope.chooseArr的值（angularjs數據雙向綁定機制） //var removeArr = $scope.removeArr;                      var chooseArr = angular.copy($scope.chooseArr); //正確的操做方式，只是對值進行拷貝                      var removeArr = angular.copy($scope.removeArr);                      for(var i = 0; i <chooseArr.length ; i++){                                 for(var j = 0; j < removeArr.length ; j++){                                           if(chooseArr[i].host == removeArr[j].host){                                                      chooseArr.splice(i,1);                                                      removeArr.splice(j,1);                                                      i--;                                                      break;                                           }                                 }                      }

Angulajs動態修改模板中樣式（即class）

1.在模板class中設置變量

<div class="form-inline form-group">                                           <button class="btn {{kBtn}}" ng-click="changeContent(false)">關鍵字型</button>                                           <button class="btn {{nPBtn}}" ng-click="changeContent(true)">截取型</button>                                 </div>

2.controller中的代碼

$scope.flag = false;                 $scope.chooseType = "1";                 $scope.changeContent = function(flag){                         $scope.flag = flag;                         if($scope.flag){                                   $scope.chooseType = "2";                                         //動態設置按鈕樣式。。。。                                      $scope.kBtn = "search-btn1";                                      $scope.nPBtn = "search-btn";                         }else{                                   $scope.chooseType = "1";                                   //動態設置按鈕樣式。。。。                                      $scope.kBtn = "search-btn";                                      $scope.nPBtn = "search-btn1";                         }                 }

Angulajs路由插件ui-router使用

1.       引入angularjs-ui-router.js文件

<script type="text/javascript" src="${ctx}/plugins/angular/angular-ui-router.js"></script>

2.       模塊中引入ui.router

var homePageApp = angular.module('homePageApp', ['ui.router','pager','ngDialog','daterangepicker','ngMessages']);

3.       在homePageApp中配置路由

homePageApp.config(function($stateProvider, $urlRouterProvider) {     $urlRouterProvider.otherwise('/index/keywords'); //默認執行的URL         $stateProvider         .state('index', {  //主頁用於顯示左側的導航欄，加載/index/keywords以前會先展現它             url: '/index',             views: {                 '': {                     templateUrl:'../../templates/index.html'                 }             }         })         .state('index.keywords', {             url: '/keywords',             templateUrl: '../../templates/keywords.html'         })        .state('index.entrance', {             url: '/entrance',             templateUrl: '../../templates/entrance.html'         })； }); Angularjs中factory使用 //定義baseService homePageApp.factory('baseService',['$http','$q',function($http,$q){                       var BaseService = {};                      //通用ajax提交&查詢                      BaseService.saveOrQueryParameter=function(option){                                 var defaults={                                                      url:"",                                                      params:{}                                 };                                 var options = angular.extend(defaults, option);                                 var defered = $q.defer();                                 $http.post(options.url, options.params).success(function(data, status, headers, config) {                                           defered.resolve(data);                                 }).error(function(data, status, headers, config) {                                           defered.reject(data);                                 });                                 return  defered.promise;                      };            return BaseService; }]); //將baseService注入到servicesService中 homePageApp.service('servicesService',['baseService','$http','$q',function(baseService,$http,$q){            this.getServiceListByCondition = function(option){                      var defaults={                                           params:{},                                           callback:function(){}                      };                      var options = angular.extend(defaults, option);                      baseService.saveOrQueryParameter({                                 url:$.ctx+'/services/getServiceListByCondition',                                 params:options.params                      }).then(function(data) {                                 options.callback(data);                      }, function(reason) {                                 console.log('Failed: ' + reason);                      });            } }]);