angular的作用域

前端时间因为有比较重要的事情，所以一直没有静下心来写点东西，今天结束之后也了解到了自己很多的不足，接下来继续努力吧。
今天遇到了点MVC和MVVM之前的关系，其实之前也写过总结，但是也忘了，以前的东西还是要经常去回顾一下，晚上遇到angular的问题，所以总结一点。
Angular应用是分层的，主要有三个层面：视图，模型，视图模型。其中，视图很好理解，就是直接可见的界面，模型就是数据，视图模型是一种把数据包装给视图调用的东西。

根作用域

<input ng-model="DATA"/>
<div>{{DATA}}</div>

这个例子能够运行的的原因是，它的rootA变量被创建在根作用域上。每个Angular应用默认有一个根作用域，也就是说，如果用户未指定自己的控制器，变量就是直接挂在这个层级上的。

作用域在一个Angular应用中是以树的形状体现的，根作用域位于最顶层，从它往下挂着各级作用域。每一级作用域上面挂着变量和方法，供所属的视图调用。

如果想要在代码中显式使用根作用域，可以注入$rootScope。

function RootService($rootScope) {
    $rootScope.$watch("DATA", function(newVal) {
        alert(newVal);
    });
}

这时候我们可以看到，这段代码并未跟界面产生任何关系，但里面的监控表达式确实生效了，也就是说，观测到了根作用域上DATA的变更.
作用域的继承

<div ng-controller="Outer">
    <span>{{a}}</span>
    <div ng-controller="Inner">
        <span>{{a}}</span>
    </div>
</div>

JS
function OuterCtrl($scope) {
    $scope.a = 123;
}
function InnerCtrl($scope) {
}

我们可以看到界面显示了两个123，而我们只在OuterCtrl的作用域里定义了a变量，但界面给我们的结果是，两个a都有值。这里内层的a值显然来自外层，因为当我们对界面作出这样的调整之后，就只有一个了:

<div ng-controller="OuterCtrl">
    <span>{{a}}</span>
</div>
<div ng-controller="InnerCtrl">
    <span>{{a}}</span>
</div>

可以看出如果两个控制器所对应的视图存在上下级关系，它们的作用域就自动产生继承关系。
类似的在JS中：

function Outer() {
    this.a = 123;
}
function Inner() {
}
var outer = new Outer();
//利用原型就可以实现让inner.a == 123，这就是继承
Inner.prototype = outer;
var inner = new Inner();

Angular的实现机制其实也就是把这两个控制器中的$scope作了关联，外层的作用域实例成为了内层作用域的原型。
以此类推，整个Angular应用的作用域，都存在自顶向下的继承关系，最顶层的是$rootScope，然后一级一级，沿着不同的控制器往下，形成了一棵作用域的树。