AngularJs数据绑定以及数据绑定的API

一、AngularJs入门

       官方说法：AngularJs库扩展了html的词汇库.

        细节1：ng 代表 angular，是angular的缩写。ng-model和ng-click就是被AngularJs扩展出来的属性。

             细节2：在angular中，用到回调函数时，是一种特殊的回调函数，他们的传参：只认参数名，不认传参顺序。

二、数据绑定

       1.什么是数据绑定？

          数据仓库中的数据和HTML标签进行绑定，绑定的方式和使用的指令（ng-×××的属性或者是{{}}插值语法，简单来说就是AngularJs扩展HTML词库后，用来在网页上打标记的各种方式）有关，绑定好的数据和标签之间就有一种双向或者单向的同步关系，其中一方数据发生改变，另一方也会跟随者有所变化。

       AngularJs内部有个“数据仓库”($rootScope),可以用AngularJs提供的属性“ng-model”将数据仓库里面的属性（其实就是$rootScope对象里面的内容）和HTML文档上的input标签做“绑定”。

       input标签的value值<-->数据仓库中的属性的值

       发生了绑定的一组input标签和数据，就有一个“同步”的机制。当修改了数据仓库中的属性的值后，input标签的value会跟着改变，相反的，用户在input标签中做了输入，数据仓库中的属性也会跟着改变。只要哪边发生了改变，另外一边也跟着发生改变。

       2.为什么要有数据绑定/数据绑定的机制带来的好处是什么？

          对于复杂的web应用来说，界面上的数据和结构可能会经常根据新数据的获得而更新。（比如，访问互联网上的服务器，获得了数据之后）而这个根据新数据来更新界面的过程中，可能就会涉及大量的、繁琐的、容易出错的DOM操作。而有了数据绑定之后，就可以把数据和DOM紧紧地关联在一起，实现操作数据来更新界面的一种新的界面开发方式，这样就能够绕过DOM操作，把DOM操作交给框架来完成，然后就能避免程序员手写DOM操作时遇到的各种问题，减少bug的发生，提高开发效率。

        3.数据绑定的两个核心要素：数据和指令。

           一个是想要把什么东西绑上去，另一个就是想绑到什么东西上去。前者就是“数据”，后者就是“指令”（打好标记的模板）。写AngularJs应用时，书写的HTML代码并不是最终显示给用户的网页，而是AngularJs读取之后，拿到数据，然后进行相应的数据绑定和处理，再把处理后的页面提供给用户。实际上，写的HTML代码就是“模板”。

           实际上AngularJs的开发，关注的就是这两个：①模板如何书写②数据从何而来。

三、数据绑定的API

       1.属性：ng-model

            1.作用：双向数据绑定，把可以有输入的标签和数据仓库中的属性做绑定，两边有任意一方数据发生改变，另一方都会同步发生更新。

            2. 生效标签：类似于input、textarea、select这些标签的，有用户输入的标签。

       2.属性：ng-bind

              1.作用：单向数据绑定，数据仓库里的属性 --->  前面的标签

              2.生效范围：所有的有标签体的标签。div、span、p、td......

        3.插值语法：{{......}}

               1.作用：单向数据绑定，数据仓库里的属性 --->  插值语法所占位的地方

                2.生效范围：标签体的内部 / 标签属性的值

         4.属性：ng-class

                1.作用：样式绑定，数据仓库里的属性 ---> 标签的class属性。（传递一个对象，对象是键值对的形式，key是css的类名，value是布尔值，用于决定这个css类是否启用）

                 2.生效范围：标签的class属性

                 3.示例（注意：其实不一定非得用数据仓库里的属性，直接写个对象也是允许的，其他地方也是一样）

                           <div ng-class = "{ 'bgc-blue':true,'bgc-yellow':false}"></div>

          5.属性：ng-style

               1.作用：样式绑定，数据仓库里的属性 ---> 标签的style属性。（传递一个对象，对象是键是样式的属性名，值就是样式的属性值，实际上就是原来用style=‘...’的写法，现在改成对象的写法）

                2.生效范围：标签的style属性

          6.属性：ng-if

                1.作用：绑定标签的“存在性”，ng-if属性的值是true的时候，标签存在，为false的时候标签不存在，不是隐藏了。

                 2.生效范围：标签

           7.属性：ng-show（ng-hide）

                 1.作用：绑定标签的“显示性”，ng-show属性为true的时候，显示，ng-show属性为false的时候，给标签加了个ng-hide的css类，让标签的display样式为none，以此来达到隐藏的效果。（ng-hide是相反的）

                 2.生效范围：标签。

           8.属性：ng-click

                  1.作用：绑定点击事件。执行一段javascript代码，通常来说，我们会执行放在数据仓库里面的一个函数。

                   2.生效范围：标签。

                   3.除了ng-click还有ng-dblclick、ng-foucs、ng-blur......

                   4.不能用onclick只能用ng-click。因为只有事件发生时才会可能发生数据改变，事件发生包括①Ajax与后台数据交互，做网络访问时，服务器返回数据，有事件发生；②用户在界面上点击、输入等等的操作会发生事件；③定时器，回调函数。这三类都会发生事件，此时就有可能发生事件，发生事件就有可能发生数据改变，AngularJs是包裹版本，里面有自己的判断事件是否发生的标志性语法（方法）。AngularJs的$http的功能用于做网络访问。不能用jQuery或者原生的js去访问网络，必须使用$http；AngularJs有各种ng-×××的事件监听，不能用onclick、dblclick等之类的属性给按钮绑定事件，只能用ng-click等语法；AngularJs有$timeout等定时器，不能用setTimeout来定时。因为只有使用AngularJs包裹起来的方法的时候，AngularJs才知道事件可能发生了，此时AngularJs就可以及时检查自己的数据仓库是不是发生了改变，如果有改变就去更改绑定在一起的标签，从而更新页面，如果使用js或者jQuery的方法AngularJs就不能识别是否发生了事件，不能及时的检查数据仓库是否发生改变，此时就不能更新页面，实现相应的效果。

                      浏览器里面的javascript代码实在页面加载读到script标签时，标签内的内容开始执行。但是，通常会有事件发生，当有事件发生时，此时触发事件的监听代码才会执行。然而，javascript大部分的代码都是基于“有事件发生->如何处理这个事件”的思想来写的，如果正确操作，就不用通过DOM操作，而是通过AngularJs就能够“托管”所有的事件，当AngularJs监听所有的事件时就能知道所有可能导致数据变更的事情的发生，在事情发生之后，AngularJs就能再次检查是不是有数据发生变化。