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