发布者-订阅者模式: 一般通过sub, pub的方式实现数据和视图的绑定监听，更新数据方式通常做法是 vm.set('property', value)

这种方式现在毕竟太low了，我们更希望通过 vm.property = value
这种方式更新数据，同时自动更新视图，于是有了下面两种方式

脏值检查: angular.js 是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，最简单的方式就是通过 setInterval()

定时轮询检测数据变动，当然Google不会这么low，angular只有在指定的事件触发时进入脏值检测，大致如下：

DOM事件，譬如用户输入文本，点击按钮等。( ng-click )
XHR响应事件 ( $http )
浏览器Location变更事件 ( $location )
Timer事件( $timeout , $interval )
执行 $digest() 或 $apply()

数据劫持:

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

angular

ng-app 挂载主模块,
- 有ng-app的标签内才接受angular的规则(即使ng-app=''亦可)
- ng-app 指令定义了 AngularJS 应用程序的根元素。
- ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。
ng-controller 挂载控制器
ng-init 初始化变量(不常用),格式为ng-init="hello=123;name='你好'",优先度高于js中的设置
ng-model 等价于 v-model
ng-bind和 {{}} 等价于 v-text 和 {{}} 其中可以为表达式
ng-click ='btnClick()'
ng-repeat 等价于 v-for
ng-src 等价于 :src
ng-include 引入另一html作为模板例如:

ng-disable='' 为true时输入框变为不可用
ng-hide=''/ng-show='' 类似于v-show
ng-if='' 类似于v-if




    
    Document


    
        
            {{number}}
            

            {{ctrl.name}}
            

            
        
        

        
            {{2+ 3}}
            
                click me
            
            {{person.name}}
        
        
            
                {{index}}
                name:{{book.name}}
                price:{{book.price}}

Angular.js的脏检查(触发界面的更新机制)

不同于vue的$watch监听(监听data中含有的所有元素变化),angular的数据变化时,不会自动更新,而是封装了例如:点击事件,延时,ajax请求等造成数据变化的触发条件,每当以上条件触发时,检查所有数据是否变化,并进行更新,因此Angular绑定很多数据时非常占用内存
$timeout,$http,事件监听,ng-model的变化

AngularJs的编译过程

当浏览器渲染一个页面时,本质上是读html标识,然后建立dom节点,当dom树创建完毕之后广播一个事件给我们.

compile (绑定DOM)
当你在页面中使用script标签加载ng应用程序代码时,ng监听上面的dom完成事件,查找带有ng-app属性的元素.
当找到这样的元素之后,ng开始处理dom以这个元素的起点,所以假如ng-app被添加到html元素上,则ng就会从html元素开始处理dom.
link（数据绑定）

AngularJs分模块加载

模块采用闭包避免混乱
angular.module("myApp",[])注入子模块时为异步加载,即使子模块写在该代码后面也没事

.directive 函数(类似于vue的component)

使用 .directive 函数来添加自定义的指令。
要调用自定义指令，HTML 元素上需要添加自定义指令名。
html中指令名用 ' - ' 分隔时,js中应采用驼峰法命名,而html中为驼峰命名时,js中应采用小写 :




    hello

restrict默认为EA,transclude和replace默认均为false

Angular.js综述