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)'
}
}
});