angular入门学习文档之一

一、数据双向绑定

angular（下面统一简称ng）强大的地方莫过于它内置的数据双向绑定功能，下面我们通过一个简单的例子来演示ng强大的双向绑定数据的能力。

代码如下：

1、dom结构：

1.<!DOCTYPE html>
2.<html lang="en" ng-app="myApp">
3.<head>
4.    <meta charset="UTF-8">
5.    <title>Document</title>
6.    <script src="js/angular.js"></script>
7.</head>
8.<body>
9.    <form ng-controller="userInfoCtrl">
10.        <input type="text" ng-model="userInfo.name">
11.        {{userInfo.name}}
12.        <p ng-bind="userInfo.age"></p>
13.    </form>
14.
15.</body>
16.</html>

2、js代码：

1.var app = angular.module('myApp',[]);
2.    app.controller('userInfoCtrl',function($scope){
3.        $scope.userInfo = {
4.            name: '张三',
5.            age: '18' 
6.        }
7.    })
8.    app.controller('userInfoCtrl',['$scope',function($scope){
9.        $scope.userInfo = {
10.            name: '张三',
11.            age: '19' 
12.        }
13.    }])

上面的例子简单的实现了ng的双向绑定功能，那么到底是怎么实现的呢？

1、先加载angular.js文件；

2、在根节点html上（也可以是其他任何一个节点，在哪里添加，ng的边界就在哪里产生）添加ng-app指令，它会告诉浏览器，从这个地方开始，里面的内容都用ng去解析渲染；

3、给form添加ng-controller，这是添加控制器（也可以叫作用域）的指令，它的作用是创建一个隔离的$scope对象,什么是$scope?

提到$scope，还得先从$rootscope说起，$rootScope是ng中最接近全局作用域的对象。在$rootScope上附加太多业务逻并不是好主意，这与污染JavaScript的全局作用域是一样的。$scope对象就是一个普通的JavaScript对象，我们可以在其上随意修改或添加属性。

4、给input添加ng-model指令，值等于变量userInfo.name。ng-model就是实现ng数据双向绑定的指令。ng-model指令用来将input、 select、 textarea或自定义表单控件同包含它们的作用域中的属性进行绑定。（这是第一种绑定方法）；

5、{{ }}语法是AngularJS内置的模板语法，它会在内部$scope和视图之间创建绑定。基于这个绑定，只要$scope发生变化，视图就会随之自动更新。（这是第二种绑定方法）；

6、尽管可以在视图中使用{{ }}模板语法（ng内置的方式），我们也可以通过ng-bind
指令实现同样的行为。

接下来是Js代码部分的实现

7、ng允许我们使用angular.module()方法来声明模块，这个方法能够接受两个参数，第一个是模块的名称，第二个是依赖列表，也就是可以被注入到模块中的对象列表。接下来，就可以在angular.module(‘myApp’)返回的对象上创建我们的应用了。

8、通过ng-controller创建一个作用域，并对作用域中的$scope对象进行操作；

9、在userInfoCtrl这个作用域中，添加控制器逻辑处理的代码。

10、总结：在ng中，通过controller控制器连接了视图与逻辑层，任何一方发生变化都会引起另一方的变化，而实现这个功能的方法则可以通过：ng-model、{{ }}或者ng-bind。

二、常见的几种页面判断

1.ng-switch

ng-switch用来判断输入框的值和预定义的值是否匹配，如果匹配，则显示预定义的视图，反之则显示默认的视图。这个指令和ng-switch-when及on=”propertyName”一起使用，可以在propertyName发生变化时渲染不同指令到视图中。在下面的例子中，当person.name是Ari时，文本域下面的div会显示出来，并且这个人会获得胜利：

1.<input type="text" ng-model="person.name"/>
2.<div ng-switch on="person.name">
3.  <p ng-switch-default>And the winner is</p>
4.  <h1 ng-switch-when="Ari">{{ person.name }}</h1>
5.</div>

2.ng-if

使用ng-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果赋值给ng-if的表达式的值是false，那对应的元素将会从DOM中移除，否则对应元素的一个克隆将被重新插入DOM中。

1.<div ng-if="2+2===5">
2.  Won't see this DOM node, not even in the source code
3.</div>

因为2+2并不等于5，所以表达式为false，最后这个div会被移除。

3.ng-show、ng-hide

ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。当赋值给ng-show指令的
值为false时元素会被隐藏。类似地，当赋值给ng-hide指令的值为true时元素也会被隐藏。

1.<div ng-show="2 + 2 == 4">
2.  2 + 2 is 4, do show
3.</div>
4.<div ng-hide="2 + 2 == 5">
5.  2 + 2 isn't 5, don't hide
6.</div>

从结果上来看，ng-if和ng-show/ng-hide似乎效果差不多，但两者的最大区别在于，前者会移除dom结构，而后者不会移除dom结构，只是通过样式的display:none和display:block来控制。