AngularJS四大核心特性：MVC、模塊化驰后、指令系統(tǒng)肆资、雙向數(shù)據(jù)綁定。
- MVC
好處：職責(zé)清晰灶芝，代碼模塊化郑原，可復(fù)用（特別是Model和View）唉韭。
- 模塊
一切都是從模塊開(kāi)始。
一個(gè)應(yīng)用可包含多個(gè)模塊犯犁，每一個(gè)模塊都包含了定義具體功能的代碼属愤。
使用模塊的好處：
- 保持全局命名空間的清潔
- 編寫(xiě)測(cè)試代碼更容易，并能保持其清潔酸役，以便更容易找到相互隔離的功能
- 易于在不同應(yīng)用間復(fù)用代碼
- 使應(yīng)用能夠以任意順序加載代碼的各個(gè)部分
使用angular.module()的方法來(lái)聲明模塊：
//接受兩個(gè)參數(shù)住诸，第一個(gè)是模塊的名稱(chēng)，第二個(gè)是依賴(lài)列表涣澡，即可以被注入到模塊中的對(duì)象列表贱呐。
angular.module('myApp',[]);
如果調(diào)用這個(gè)方法時(shí)只傳遞一個(gè)參數(shù)，那么該方法只用來(lái)引用該模塊：
//引用名為myApp的模塊
angular.module('myApp');
- 作用域
作用域是什么入桂？
- 是表達(dá)式執(zhí)行的上下文
- 是定義應(yīng)用業(yè)務(wù)邏輯奄薇、控制器方法和視圖屬性的地方
- 是視圖和控制器之間的膠水，在應(yīng)用將視圖渲染并呈現(xiàn)給用戶(hù)之前事格，視圖中的模板和作用域進(jìn)行連接，然后應(yīng)用會(huì)對(duì)DOM進(jìn)行設(shè)置以便將屬性變化通知給AngularJS
- 作用域提供了監(jiān)視數(shù)據(jù)模型變化的能力
- 將應(yīng)用的業(yè)務(wù)邏輯都放在控制器中搞隐，將相關(guān)的數(shù)據(jù)都放在控制器的作用域中驹愚，是比較完美的架構(gòu)
- $scope對(duì)象在AngularJS中充當(dāng)數(shù)據(jù)模型，但與傳統(tǒng)的數(shù)據(jù)模型不一
樣劣纲，$scope并不負(fù)責(zé)處理和操作數(shù)據(jù)逢捺，它只是視圖和HTML之間的橋梁，它的所有屬性都可以自動(dòng)被視圖訪問(wèn)到
關(guān)于作用域的簡(jiǎn)單代碼：
<body>
<div ng-app="myApp">
<h1>Hello {{name}}</h1>
</div>
</body>
<script>
angular.module('myApp',[]).run(function($rootScope){//$rootScope是所有$scope對(duì)象的最上層癞季，AngularJS啟動(dòng)并生成視圖時(shí)劫瞳，會(huì)將根ng-app元素同$rootScope進(jìn)行綁定
$rootScope.name = "World"
})
</script>
運(yùn)行結(jié)果：
但在實(shí)際情況中，我們一般不會(huì)在$rootScope上附加業(yè)務(wù)邏輯绷柒，以免污染全局作用域志于。我們可以用控制器創(chuàng)建一個(gè)隔離的子$scope對(duì)象：
<body>
<div ng-app="myApp">
<div ng-controller="MyController">
<h1>Hello {{name}}</h1>
</div>
</div>
</body>
<script>
angular.module('myApp',[]).controller('MyController',
function($scope){
$scope.name = "World";
}
)
</script>
運(yùn)行結(jié)果同上。
作用域的基本功能有：
- 提供觀察者以監(jiān)視數(shù)據(jù)模型的變化
- 可以將數(shù)據(jù)模型的變化通知給整個(gè)應(yīng)用废睦，甚至是系統(tǒng)外的組件
- 可以進(jìn)行嵌套伺绽，隔離業(yè)務(wù)功能和數(shù)據(jù)
- 給表達(dá)式提供運(yùn)算時(shí)所需的執(zhí)行環(huán)境
$scope對(duì)象的生命周期處理有四個(gè)不同階段：
- 創(chuàng)建
創(chuàng)建新控制器或指令時(shí)，AngularJS會(huì)創(chuàng)建一個(gè)新的作用域嗜湃。 - 鏈接
當(dāng)AngularJS開(kāi)始運(yùn)行時(shí)奈应，所有的$scope對(duì)象都會(huì)附加或者鏈接到視圖中。 - 更新
當(dāng)事件循環(huán)運(yùn)行時(shí)购披，它通常執(zhí)行在$rootScope對(duì)象上杖挣，每個(gè)子作用域都執(zhí)行自己的臟值檢測(cè)。 - 銷(xiāo)毀
當(dāng)一個(gè)$scope在視圖中不再需要時(shí)刚陡，這個(gè)作用域會(huì)清理和銷(xiāo)毀自己惩妇。
- 雙向數(shù)據(jù)綁定
簡(jiǎn)單來(lái)說(shuō)雙向數(shù)據(jù)綁定可以總結(jié)為下圖：
數(shù)據(jù)綁定使我們可以將視圖理解為模型狀態(tài)的映射株汉，當(dāng)客戶(hù)端的數(shù)據(jù)模型發(fā)生變化時(shí)，視圖就能反映出這些變化屿附。AngularJS會(huì)記錄數(shù)據(jù)模型所包含的數(shù)據(jù)在任何特定時(shí)間的值郎逃，而非初始值。當(dāng)AngularJS認(rèn)為某個(gè)值可能發(fā)生變化的時(shí)候挺份，它會(huì)運(yùn)行自己的事件循環(huán)來(lái)檢查這個(gè)值是否變“臟”褒翰，如果該值從上次事件循環(huán)運(yùn)行之后發(fā)生了變化，則該值會(huì)被認(rèn)為是“臟”值匀泊，這個(gè)過(guò)程被稱(chēng)作臟檢查优训。AngularJS會(huì)在事件循環(huán)時(shí)執(zhí)行臟檢查來(lái)保證數(shù)據(jù)的一致性。
簡(jiǎn)單的雙向數(shù)據(jù)綁定小例子：
<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
- 效果：
