Angular学习笔记-双向绑定

2022-11-03 本文已影响0人赵客缦胡缨v吴钩霜雪明

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) { }

Angular学习笔记-双向绑定

双向绑定 - [(ngModel)]

angular 特性

ng模块化编程

猜你喜欢

热点阅读