Angular和Vue一样都是MVVM的框架，MVVM的核心机制就是双向绑定。
双向绑定将属性绑定与事件绑定结合在一起：
数据绑定+事件绑定，模板语法是[()] ngModule
变化检测原理 --脏检查
- 属性绑定：设置特定的元素属性。
- 事件绑定：侦听元素更改事件。
Angular 的双向绑定语法是方括号和圆括号的组合[()]。
[] 进行属性绑定，()进行事件绑定
<app-sizer [(size)]="fontSizePx"></app-sizer>
@Input() 输入
@Output() 输出 。属性的名字必须遵循 inputChange模式,input 是相应@Input() 属性的名字
例如，如果 @Input)() 属性为 size ，则 @Output() 属性必须为 sizeChange 。
//src/app/sizer.component.ts
export class SizerComponent {
@Input() size: number | string;
@Output() sizeChange = new EventEmitter<number>();
//dec() 用于减小字体大小， inc() 用于增大字体大小。
dec() { this.resize(-1); }
inc() { this.resize(+1); }
// resize() 在最小/最大值的约束内更改 size 属性的值，并发出带有新 size 值的事件。
resize(delta: number) {
this.size = Math.min(40, Math.max(8, +this.size + delta));
this.sizeChange.emit(this.size);
}
}
//src/app/sizer.component.html
inc() 和 dec() 这两个方法分别使用 +1 或 -1 调用 resize() 方法，它使用新的 size 值引发 sizeChange 事件。
<div>
<button (click)="dec()" title="smaller">-</button>
<button (click)="inc()" title="bigger">+</button>
<label [style.font-size.px]="size">FontSize: {{size}}px</label>
</div>
官网：https://angular.cn/guide/two-way-binding
通过$scope对象把数据模型或函数行为暴露给视图
使用$watch方法监视模型的变化，做出相应的动作
脏值检查:对比数据是否有变更，来决定是否更新视图
angular只有在指定事件被触发时进入脏值检测，大体如下：
- 1.
DOM事件，比如用户输入文本，点击按钮等。(ng-click) - 2.
XHR响应事件($http) - 3.浏览器
Location变更($location) - 4.
Time事件($timeout,$interval) - 5.执行
$digest()或者$apply()
双向绑定 - [(ngModel)]
data=>view：数据绑定，模板语法是 []
view=>data：事件绑定，模板语法是()
Angular其实并没有一个双向绑定的实现，他的双向绑定就是数据绑定+事件绑定，模板语法是 [()]。
<!--value是数据绑定，input是事件绑定-->
<input [value]="currentHero.name" (input)="currentHero.name=$event.target.value">
<!--等价-->
<input [(ngModel)]="currentHero.name">
主要入下集中情况可能改变数据：
用户输入操作，比如点击，提交等。
请求服务端数据。
定时事件，比如setTimeout，setInterval。
变化检测原理 --脏检查
所谓脏检查就是存储所有变量的值，每当可能有变量发生变化需要检查时，就将所有变量的旧值跟新值进行比较，不相等就说明检测到变化，需要更新对应的视图。
angular 特性
MVC
模块化
自动化双向数据绑定
语义化标签、依赖注入等等
angularjs的双向数据绑定采用脏检查（dirty-checking）机制。
ng只有在指定事件触发后，才进入 $digest cycle ：
- DOM事件，譬如用户输入文本，点击按钮等。( ng-click )
- XHR响应事件 ( $http )
- 浏览器Location变更事件 ( $location )
- Timer事件( $timeout , $interval )
- 执行 $digest() 或 $apply()
Angular 在 scope 模型上设置了一个监听队列，用来监听数据变化并更新 view 。
每次绑定一个东西到 view上时AngularJS就会往 $watch 队列里插入一条 $watch，用来检测它监视的 model里是否有变化的东西。
当浏览器接收到可以被 angular context处理的事件时，$digest 循环就会触发，遍历所有的 $watch ，最后更新dom。
ng模块化编程
Module.controller()控制器
为应用中的模型设置初始状态，初始化$scope对象
通过$scope对象把数据模型或函数行为暴露给视图
使用$watch方法监视模型的变化，做出相应的动作
$scope（上下文模型）作用域
视图和控制器之间的桥梁
用于在视图和控制器之间传递数据
利用$scope暴露数据模型（数据，行为）
单向绑定：
模型变化过后，自动同步到界面上；
一般纯展示型的数据会用到单项数据绑定；使用表达式的方式都是单向的
双向绑定：
两个方向的数据自动同步：
模型发生变化自动同步到视图上；
视图上的数据发生变化过后自动同步到模型上；
ng-app 指令用于告诉 AngularJS 应用，当前这个元素是根元素。
ng-controller 指令用于为你的应用添加控制器。
ng-model指令用于建立数据模型
Scope(作用域)是应用在HTML (视图)和 JavaScript (控制器)之间的纽带。
用{{}}双重大括号来获取变量的值。当在控制器中添加$scope对象时，视图 (HTML)可以获取了这些属性。
angular.module()方法来声明模块。
Angular与Angularjs都采用变化检测机制，前者优于后者主要体现在：
单项数据流动
以组件为单位维度独立进行检测
生产环境只进行一次检查
可自定义的变化检测策略：Default和onPush
可自定义的变化检测操作：markForcheck()、detectChanges()、detach()、reattach()、checkNoChanges()
代码实现上的优化，据说采用了VM friendly的代码。
Angular 2 应用程序应用主要由以下8 个部分组成：
1、模块 (Modules)
``NgModules``
`Angular 模块是一个带有 @NgModule 装饰器的类，它接收一个用来描述模块属性的元数据对象。`
2、组件 (Components)
从 @angular/core 中引入 Component 修饰器
建立一个普通的类，并用 @Component 修饰它
在 @Component 中，设置 selector 自定义标签，以及 template 模板
3、模板 (Templates)
Angular模板的默认语言就是HTML
4、元数据 (Metadata)
//元数据告诉 Angular 如何处理一个类。
//selector - 一个 css 选择器，它告诉 Angular 在 父级 HTML 中寻找一个 <mylist> 标签，然后创建该组件，并插入此标签中。
//templateUrl - 组件 HTML 模板的地址。
//directives - 一个数组，包含 此 模板需要依赖的组件或指令。
//providers - 一个数组，包含组件所依赖的服务所需要的依赖注入提供者。
@Component({
selector : 'mylist',
template : '<h2>angular</h2>'
directives : [ComponentDetails]
})
export class ListComponent{...}
5、数据绑定 (Data Binding)
插值 : 在 HTML 标签中显示组件值。
<h3>
{{title}}
<img src="{{ImageUrl}}">
</h3>
属性绑定: 把元素的属性设置为组件中属性的值。
<img [src]="userImageUrl">
事件绑定: 在组件方法名被点击时触发。
<button (click)="onSave()">保存</button>
双向绑: 使用Angular里的NgModel指令可以更便捷的进行双向绑定。
<input [value]="currentUser.firstName" (input)="currentUser.firstName=$event.target.value" >
6、指令 (Directives)
//Angular模板是动态的 。当 Angular 渲染它们时，它会根据指令对 DOM 进行修改。
//*ngFor 告诉 Angular 为 sites 列表中的每个项生成一个 <li> 标签。
//*ngIf 表示只有在选择的项存在时，才会包含 SiteDetail 组件。
<li *ngFor="let site of sites"></li>
<site-detail *ngIf="selectedSite"></site-detail>
7、服务 (Services)
//封装了某一特定功能，并且可以通过注入的方式供他人使用的独立模块
//把重复代码提取到服务中实现代码复用
export class Logger {
log(msg: any) { console.log(msg); }
error(msg: any) { console.error(msg); }
warn(msg: any) { console.warn(msg); }
}
8、依赖注入 (Dependency Injection)
//查看构造函数的参数类型，来得知组件需要哪些服务
constructor(private service: SiteService) { }
网友评论