1. 程式人生 > >AngularJS系列——物件詳解

AngularJS系列——物件詳解

1. angular物件

   * 由angular.js提供的全域性變數
   * 方法:
     * module(name, []) : 建立模型物件
    * bootstrap(document, [name]) : 編碼啟動angular, 代替ng-app
    * element(dom元素物件) : 將dom物件/html標籤包裝為jQuery物件
    * forEach() : 遍歷陣列和元素集合偽陣列
   * toJson()和fromJson() : js物件與Json字串相互轉換
    * isArray(),isObject(),isFunction() :型別判斷
    * lowercase()和uppercase() : 大小寫轉換

//手動啟動angular應用
  angular.bootstrap(document, ['myApp'])

2. module物件

   * 由angular.module()建立
   * 方法
     * controller() : 定義控制器
    * factory() : 定義服務物件
    * service() : 定義服務物件
    * filter() : 定義過濾器
    * directive() : 定義指令
    * config() : 指定做一些配置的回撥函式

angular.module('myApp',[])
        .factory('fService', function () {
            console.log('factory()');
            return function () {
                console.log('fService()...');
            }
        })
        .service('sService', function () {
            console.log('service()');
            this.test = function () {
                console.log('sService test()');
            }
        })
        .filter('leftTrim', function () {
            return function (str) {
                return str.replace(/^\s+/, '');
            }//檢查字串前邊是夠有空格,有的話去掉
        })
        .config(function () {
            console.log('config()');
            //配置路由(後面講)
        })
        .controller('MyCtrl', function ($scope, fService, sService) {
          console.log('MyCtrl()');

          fService();//factory創造的就是函式,傳過來的也是函式
          sService.test();//建構函式傳過來的是物件

          $scope.msg = '  atguigu  ';
        });

3. $scope物件

   * $apply(): 強制髒資料檢查
     * 當scope中的資料發生了改變, angular會將資料同步顯示到頁面, 這一操作稱為"髒資料檢查"
    * angular在它的方法執行完後, 都會進行髒資料檢查,
    * 在原生JS函式中改變作用域資料, angular是不會進行髒資料檢查的
    * 使用$scope的$apply函式可以解決此問題
       $scope.$apply(function(){
          //在這裡更新scope資料, angular會同步更新其頁面資料
       });
    * $apply()的本質是呼叫$digest()去進行髒資料檢查更新頁面的
          $scope.$digest()
    * $digest()雖然也能實現頁面更新, 但建議使用$apply()
   * $watch(): 監視scope中某個屬性的變化


     * angular是雙向資料繫結的, Scope中的屬性資料發生了改變, 會自動更新頁面中對應的資料
    * 但有時, 我們想監視資料的變化情況, 來實現特定的功能
    * Angular提供了$watch()來實現
          * var unWatch =$scope.$watch('propertyName', function(newValue, oldValue){}, deepWatch)
          * 引數一: 指定監視屬性的屬性名
          * 引數二: 發現數據發生改變時的回撥函式
          * 引數三: 是否深度監視, 預設是false, 代表只是監視屬性本身, 而不監視其內部資料
          * 返回值: 用於取消監視的函式, 呼叫unWatch()取消監視

var unWatch = $scope.$watch('msg',function (newMsg,oldMsg) {
              if(newMsg!==oldMsg){
                  $scope.count++;
                  if($scope.count === 10){
                      //取消監視
                      unWatch();
                      $scope.count = '已達到最大值(10)'
                  }
              }
          });