angular双向绑定

Posted 2023-03-29

参考技术A MVVM 的核心机制就是 双向绑定 。 React、Vue、Angular 的双向绑定，都是基于 MVVM的设计模式 。

双向绑定将 属性绑定 与 事件绑定 结合在一起：
数据绑定 + 事件绑定 ，模板语法是 [()] 。 ngModule
变化检测 原理 -- 脏检查

@Input() 输入
@Output() 输出 。属性的名字必须遵循 inputChange 模式, input 是相应 @Input() 属性的名字
例如，如果 @Input)() 属性为 size ，则 @Output() 属性必须为 sizeChange 。

官网： 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()

data=>view ：数据绑定，模板语法是 []
view=>data ：事件绑定，模板语法是 ()
Angular 其实并没有一个双向绑定的实现，他的双向绑定就是 数据绑定+事件绑定 ，模板语法是 [()] 。

主要入下集中情况可能改变数据：

变化检测原理 -- 脏检查
所谓脏检查就是 存储所有变量的值 ，每当可能有 变量发生变化 需要 检查 时，就将 所有变量的旧值 跟 新值 进行 比较 ， 不相等 就说明检测到 变化 ，需要 更新对应的视图 。

angularjs 的 双向数据绑定 采用 脏检查（dirty-checking）机制 。ng只有在指定事件触发后，才进入 $digest cycle ：

Angular 在 scope 模型 上设置了一个 监听队列 ，用来 监听数据变化 并更新 view 。
每次绑定一个东西到 view 上时 AngularJS 就会往 $watch 队列 里插入一条 $watch ，用来检测它监视的 model 里 是否有变化 的东西。
当 浏览器 接收到可以被 angular context 处理的 事件 时， $digest 循环就会 触发 ， 遍历 所有的 $watch ，最后更新 dom 。

Module.controller() 控制器

$scope （上下文模型）作用域

单向绑定：

双向绑定：

ng-app 指令用于告诉 AngularJS 应用，当前这个元素是 根元素 。
ng-controller 指令用于为你的应用添加 控制器 。
ng-model 指令用于建立 数据模型
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器) 之间的 纽带 。
用 双重大括号 来获取变量的值。当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。
angular.module() 方法来 声明模块 。

Angular与Angularjs都采用 变化检测机制 ，前者优于后者主要体现在：

Angular 2 应用程序应用主要由以下 8 个部分 组成：
1、模块 ( Modules )

2、组件 ( Components )

3、模板 ( Templates )
Angular模板的默认语言就是HTML
4、元数据 ( Metadata )

5、数据绑定 ( Data Binding )

6、指令 ( Directives )

7、服务 ( Services )

8、依赖注入 ( Dependency Injection )