一、理解angular双向数据绑定
双向绑定是新的前端框架中频繁出现的一个新词汇，也是mvvm的核心原理。angularjs五条核心信念中的数据驱动，便是由双向绑定进行完成。
那么什么是双向绑定，下面简单进行讲解。
首先我们要理解数据绑定。我们看到的网站页面中，是由数据和设计两部分组合而成。将设计转换成浏览器能理解的语言，便是html和css主要做的工作。而将数据显示在页面上，并且有一定的交互效果（比如点击等用户操作及对应的页面反应）则是js主要完成的工作。很多时候我们不可能每次更新数据便刷新页面（get请求），而是通过向后端请求相关数据，并通过无刷新加载的方式进行更新页面（post请求）。那么数据进行更新后，页面上相应的位置也能自动做出对应的修改，便是数据绑定。
在以前的开发模式中，这一步一般通过jq操作DOM结构，从而进行更新页面。但这样带来的是大量的代码和大量的操作。如果能在开始的时候，便已经确定好从后端获取的数据到页面上需要进行的操作，当数据发生改变，页面的相关内容也自动发生变化，这样便能极大地方便前端工程师的开发。在新的框架中（angualr，react，vue等）,通过对数据的监视，发现变化便根据已经写好的规则进行修改页面，便实现了数据绑定。可以看出，数据绑定是M(model，数据）通过VM（model-view，数据与页面之间的变换规则）向V（view）的一个修改。
而双向绑定则是增加了一条反向的路。在用户操作页面（比如在Input中输入值）的时候，数据能及时发生变化，并且根据数据的变化，页面的另一处也做出对应的修改。有一个常见的例子就是淘宝中的购物车，在商品数量发生变化的时候，商品价格也能及时变化。这样便实现了V——M——VM——V的一个双向绑定。
具体的代码实现通常用到以下几个ng指令：
ng-model:将一个DOM节点的值与一个angular中的变量进行绑定，当DOM节点值发生修改的时候变量也会随之修改。
ng-bind:将angular中的变量显示到页面中。
{{}}:与ng-bind功能相同，区别在于页面未完全渲染完之前模板语言会直接显示在页面中，可通过在html标签中加上ng-cloak解决这一问题。
二、模块化
1、AngularJS很重要的一个特性就是实现模块化编程，我们可以通过以下方式创建一个模块，对页面进行功能业务上的划分
1 // 创建一个名字叫MyApp的模块，第二个参数指的是该模块依赖那些模块 2 var app = angular.module(“MyApp”, []);//app是MyApp模块的实例
也可以将重复使用的指令或过滤器之类的做成模块便于复用
注意必须指定第二个参数，[]是个空数组，表示不需要其他模块
2、Module.controller() 控制器
1 var app = angular.module(“myApp”, []); //myApp模块名 app是模块实例 2 app.controller(“userCtrl” ,function($scope){ 3 //userCtrl是控制器的名字 4 $scope.name= “赵敏”; //$scope用来保存数据，定义方法 5 });
第二行代码创建了一个名为userCtrl的控制器，以及一个控制器函数
控制器函数接受一个名为$scope的参数
3、Controller 控制器 控制器的三种主要职责：
- 为应用中的模型设置初始状态，初始化$scope对象
- 通过$scope对象把数据模型或函数行为暴露给视图
- 使用$watch方法监视模型的变化，做出相应的动作
1 // 监视购物车内容变化，计算最新结果 2 $scope.$watch(‘totalCart’, calculateDiscount);
4、$scope（上下文模型）
- 视图和控制器之间的桥梁
- 用于在视图和控制器之间传递数据
- 利用$scope暴露数据模型（数据，行为）
5、单向绑定和双向绑定
单向绑定：
-
- 模型变化过后，自动同步到界面上；
- 一般纯展示型的数据会用到单项数据绑定；使用表达式的方式都是单向的
双向绑定：
-
- 两个方向的数据自动同步：
- 模型发生变化自动同步到视图上；
- 视图上的数据发生变化过后自动同步到模型上；
三、开始编写一个简单的AngularJS demo
在写代码之前我们先来认识以下这几条指令：
1.ng-app = “modulename ”
申明：ng-app 指令用于告诉 AngularJS 应用，当前这个元素是根元素。
必要性：所有 AngularJS 应用 都必须要有一个根元素。
唯一性：HTML 文档中只允许有一个 ng-app 指令，如果有多个ng-app指令，则只有第一个会被使用。
总之：这条指令定义了AngularJS的应用程序及使用范围。
其中modulename：模块的名称，编码者自定义。
2.ng-controller = “控制器名”
ng-controller 指令用于为你的应用添加控制器。
在控制器中，你可以编写代码，制作函数和变量，并使用 scope 对象来访问。
3.ng-model = “eparator”
ng-model指令用于建立数据模型，在模型中对应有一个变量username用来存放input元素的value值从而绑定了输入框的值到 scope (应用程序)变量中。
eparator：你想要绑定到表单域的属性名。
<input>, <select>, <textarea> 元素支持该指令。
4.$scope
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上。
5.双大括号{{变量}}
用双重大括号来获取变量的值。当在控制器中添加 $scope对象时，视图 (HTML)可以获取了这些属性。
HTML中，你不需要添加$scope前缀，只需要添加属性名即可，如：{{username}}。
6.angular.module('name', requires);
使用angular.module()方法来声明模块。
参数说明：
第一个name是模块的名称，字符串变量。
第二个requires是依赖列表，也就是可以被注入到模块中的对象列表。
了解了以上指令，下面进行demo演示：
代码块如下：
然后用浏览器打开这个文件
结果如图：
尝试改变一下input中的值你会发现 “姓名”中的值也自动发生了变化，是不是很神奇？比jquery来操作dom是不是简单很多？
代码详解：
当网页加载完毕，AngularJS 自动开启。
ng-app指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序的"所有者"。ng-controller ="myCtrl"，为应用添加控制器，接下来 ng-model 指令建立数据模型，将input元素的value值绑定到 scope (应用程序)变量中。最后用双重花括号{{firstName + " " + lastName}}来获取$scope对象中变量firstName和lastName的值，并且{{ firstName }}{{ lastName }} 通过 ng-model="firstName"和ng-model="lastName"进行同步。
概括地说，AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。input元素的value发生变化，自动同步到model的 firstName 变量中，{{ firstName }}}是从模型中读 firstName 的值，因此下面姓名中元素的内容跟着变了。
通过以上实例，我们很容易就得到了用户输入的动态值，这是原生及其他框架难以实现的功能，当然，AngularJS除了数据的双向绑定以外，还有其他很多优秀的功能，希望读者通过这个简单的例子能敲开AngularJS学习的大门，去领悟AngularJS的强大与魅力。
附：代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script> 7 </head> 8 <body> 9 <div ng-app="myApp" ng-controller="myCtrl"> 10 名: <input type="text" ng-model="firstName"><br> 11 姓: <input type="text" ng-model="lastName"><br> 12 <br> 13 姓名: {{firstName + " " + lastName}} 14 </div> 15 </body> 16 <script> 17 var app = angular.module('myApp', []); 18 app.controller('myCtrl', function($scope) { 19 $scope.firstName = "王"; 20 $scope.lastName = "二狗"; 21 }); 22 </script> 23 </html>
