Angular.js的数据绑定以及模块作用域

1.数据绑定：

数据模型对象（model object）是指$scope对象。$scope对象是一个简单的JavaScript对象，其中的属性可以被视图访问，也可以同控制器进行交互。双向数据绑定（bi-directional）意味着如果视图改变了某个值，数据模型会通过脏检查观察到这个变化，而如果数据模型改变了某个值，视图也会依据变化重新渲染。

<input ng-model="person.name" type="text" placeholder="Yourname">
<h1>Hello{{ person.name }}</h1>

2.模块：

在AngularJS中，模块是定义应用的最主要方式。模块包含了主要的应用代码。一个应用可以包含多个模块，每一个模块都包含了定义具体功能的代码。AngularJS允许我们使用angular.module()方法来声明模块，这个方法能够接受两个参数，第一个是模块的名称，第二个是依赖列表，也就是可以被注入到模块中的对象列表。angular.module('myApp', []);

name（字符串）是模块的名称，字符串变量。requires（字符串数组）requires包含了一个字符串变量组成的列表，每个元素都是一个模块名称，本模块依赖于这些模块，依赖需要在本模块加载之前由注入器进行预加载。

3.作用域：

作用域（scope）①是构成AngularJS应用的核心基础，在整个框架中都被广泛使用,作用域是视图和控制器之间的胶水,作用域是应用状态的基础。基于动态绑定，我们可以依赖视图在修改数据时立刻更新$scope，也可以依赖$scope在其发生变化时立刻重新渲染视图。AngularJS将$scope设计成和DOM类似的结构，因此$scope可以进行嵌套，也就是说我们可以引用父级$scope中的属性。

4.视图和$scope的世界

AngularJS启动并生成视图时， 会将根ng-app元素同$rootScope进行绑定。 $rootScope是所有$scope对象的最上层。$rootScope是AngularJS中最接近全局作用域的对象,在$rootScope上附加太多业务逻并不是好主意，这与污染JavaScript的全局作用域是一样的。我们可以不将变量设置在$rootScope上，而是用控制器显式创建一个隔离的子$scope对象.

<div ng-app="myApp">
<div ng-controller="MyController">
<h1>Hello {{ name }}</h1>
</div>
</div>

angular.module("myApp", [])
.controller('MyController',
function($scope) {
$scope.name = "Ari";
});

$scope:

$scope对象就是一个普通的JavaScript对象，我们可以在其上随意修改或添加属性。$scope对象在AngularJS中充当数据模型，但与传统的数据模型不一样，$scope并不负责处理和操作数据，它是视图和控制器之间的胶水。

 提供观察者以监视数据模型的变化；
 可以将数据模型的变化通知给整个应用，甚至是系统外的组件；
 可以进行嵌套，隔离业务功能和数据；
 给表达式提供运算时所需的执行环境。
开发AngularJS应用的大部分工作内容，就是构建作用域及其相关的功能。

$scope对象的生命周期处理有四个不同阶段。 

（1）创建：

        在创建控制器或指令时，AngularJS会用$injector创建一个新的作用域，并在这个新建的控制器或指令运行时将作用域传递进去。

（2）链接：

当Angular开始运行时，所有的$scope对象都会附加或者链接到视图中。所有创建$scope对象的函数也会将自身附加到视图中。这些作用域将会注册当Angular应用上下文中发生变化时需
要运行的函数。（$wacth）  

（3）更新：

当事件循环运行时，它通常执行在顶层$scope对象上（被称作$rootScope），每个子作用域，都执行自己的脏值检测。每个监控函数都会检查变化。如果检测到任意变化，$scope对象就会触发指定的回调函数。

（4）销毁：

当一个$scope在视图中不再需要时，这个作用域将会清理和销毁自己。

总结：Angular作用域继承机制直接建立在Javascript原型继承基础上，并在其根部加入了一些内容。这意味着当你理解了Javascript原型链后，将对Angular作用域继承有深入了解。

<div ng-controller="ParentController">
<div ng-controller="ChildController">
<a ng-click="sayhello()">sayhello</a>
</div>
{{person}}
</div>

<script type="text/javascript">
var app=angular.module("myApp",[]);
app.controller("ParentController",function($scope){
$scope.person={gred:false};
})
app.controller("ChildController",function($scope){
$scope.sayhello=function(){
$scope.person.name="jdj";
}
})
</script>