AngularJs采用了註重時效的MVC方式，是基於MVW模式。

1.$scope和作用域的概念。

AngularJs中的$scope對象是模板的域模型，也稱作作用域實例，通過為其屬性賦值，可以傳遞給函數進行渲染，$scope對象可以精準地控制域模型的數據和操作。

2.Controller控制器

其本質就是一個JavaScript函數，不需要擴展任何AngularJs的類或者API。其主要職責是初始化作用域實例，包括提供模型的初始值和增加UI相關的行為來擴展$scope對象。在設定模型初始值的時候，這與ng-init指令做同樣的工作，不過控制器不會汙染HTML模板。

進階——DOM樹驅動作用域樹結構的創建

　　AngularJs擁有$rootScope，它是其他所有作用域的父作用，會將根ng-app元素進行綁定，$rootScope是所有$scope對象的最上層，在新應用啟動的時候自動創建。$scope的概念與JavaScript分層的概念類似，在為子DOM元素創建新的作用域的時候，實際上是為子DOM元素創建了一個新的執行上下文，其$parent屬性指向父作用域。$Scope都是Scope類的實例，其有很多方法來控制作用域的生命周期和提供事件傳播的功能，以及支持模板渲染等。AngularJs中的ng-controller指令會調用Scope對象的$new()方法創建新的作用域。

註意：盡量避免使用$parent屬性，因為它在AngularJs表達式和模板創建的DOM結構間建立了強關聯，另一種解決方案就是講變量綁定為某一對象的屬性。

測試代碼：

 1 <div ng-app="MyApp">
 2 
 3     <script>
 4         var app=angular.module(‘MyApp‘,[]).run(function($rootScope) {
 5             $rootScope.name=‘MyApp‘;
 6         })
 7         app.controller(‘myControl_1‘,function ($scope) {
 8             $scope.name=‘myControl‘;
 9
 
 
10         })
11         app.controller(‘myControl_2‘,function ($scope) {
12            $scope.name=‘myControl_2‘;
13 
14         })
15         app.controller(‘myControl_3‘,function ($scope) {
16            $scope.name=‘myControl_3‘
17 
18         })
19         app.controller(‘myControl_4‘,function ($scope) {
20            $scope.name=‘myControl_4‘
21 
22         })
23 
24     </script>
25         {{ name }}
26     <div ng-controller="myControl_1">
27         {{ name }}
28     </div>
29     <div ng-controller="myControl_2">
30             {{ name }}
31         <div ng-controller="myControl_3">
32                 {{ name }}
33         </div>
34     </div>
35     <div ng-controller="myControl_4">
36             {{ name }}
37     </div>
38 </div>

運行結果：

作用域的層級關系如下：

AngularJs 學習筆記（一）作用域