发布者-订阅者模式: 一般通过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作为模板例如:

<div ng-app="myApp" ng-controller="sitesCtrl"> 
  <div ng-include="'sites.htm'"></div>
</div>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <div ng-app="myApp">
        <div  ng-controller="loginController as ctrl">
            {{number}}
            <br>
            {{ctrl.name}}
            <br>
            <input type="text" ng-model="name">
        </div>
        <br>
        <div ng-controller="myController">
            {{2+ 3}}
            <div ng-click='btnClick()'>
                click me
            </div>
            {{person.name}}
        </div>
        <div ng-controller='ajax'>
            <div ng-repeat="(index,book) in books">
                <p>{{index}}</p>
                <p>name:{{book.name}}</p>
                <p>price:{{book.price}}</p>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="lib/angular.js"></script>
<script type="text/javascript">
    angular.module("myApp",[])//[]中为需先注入的子组件名称
     .controller("loginController",function($scope,$timeout){
        $timeout(()=>{
            $scope.name = "david";
            this.name='hello';//指向as后的别名ctrl
        },1000)
        setTimeout(()=>{
            $scope.$apply(()=>{//手动触发数据更新
                $scope.name = "tom";
                this.name='hahaha';
            })
        },2000)
     })
     .controller("myController",["$scope",function(cc){//别名,形参注入,压缩代码
        cc.btnClick = function(){
            alert("btnClick");
        };
        //$scope.number = 200;
        cc.person = {
            name:"tom"
        }
        //同vue,若未定义 $scope.person而直接定义 $scope.person.name,则页面中{{person.name}}无法获取到值
     }])
     .controller('ajax',function($scope,$http){
            $http({
              method: 'GET',
              url: 'data/product.json'
            }).then(function successCallback(response) {
                console.log("success:",response);
                if(response.data.code==0){
                    $scope.books = response.data.data;
                }else {
                    console.log("数据请求错误");
                }
            }, function errorCallback(response) {
                console.log("error:",response);
            });
     })
     .run(function($rootScope){//run是运行的第一个方法,类似document.ready
        //当前控制器$scope未定义变量时,会向上寻找直到根对象$rootScope
        $rootScope.number = 100;
     })

</script>
</html>

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中应采用小写 :

<body ng-app="myApp">

<runoob-directive>
    <div>hello</div>  
</runoob-directive>

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict: 'E',
        template : "<h1>自定义指令!</h1>",
        transclude: true,//保留该标签内原有内容
        replace: true//删除原有的<runoob-directive>标签
    };
});
</script>

</body>

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

Angular.js综述