Angular 学习笔记（一）

什么是 Angular：

Angular 是一个 JavaScript 框架，可通过 <script> 标签添加到 HTML 页面，然后通过指令扩展 HTML，且通过表达式绑定数据到 HTML 中

Angular 是为了扩展 HTML 在构建应用时本应具备的能力而设计的。对于静态文档，HTML 是一门很好的声明式的语言，

但对于构建动态 WEB 应用，它无能为力。所以，构建动态WEB应用往往需要一些技巧才能让浏览器配合我们的工作

注：粗浅地理解指令就是一些附加在 HTML 元素上的自定义标记（例如：ng-controller、ng-repeat 等这些原生的 HTML 所无法识别的语句），

表达式是一种类似 JavaScript 的代码片段，通常在视图中以''的形式使用

Angular 与其他一些模板比较：

One-Way Data Binding：绝大多数模板引擎系统采用的是把字符串模板和数据拼接，然后输出一个新的字符串，

接着在前端将这个新的字符串作为元素的 innerHTML 属性的值

==》数据中的改变需重新和模板合并，然后再赋值给 DOM 元素的 innerHTML 属性

Two-Way Data Binding：Angular 编译器直接使用 DOM 为模板，它的视图和作用域数据模型的绑定是透明的

==》生成了稳定的 DOM 模板

注：DOM 元素实例和数据模型实例的绑定在绑定期间是不发生变化的，这意味着可以在代码中获取这些 DOM 模板元素并注册相应的

事件处理函数，而不用担心这个对 DOM 元素的引用会因为数据合并而产生变化

HTML 编译的三个阶段：

1、$compile 遍历 DOM 节点，匹配指令：

　　　　发现某元素匹配一个指令，那么指令就被添加到指令列表中（该列表与 DOM 元素对应），一个元素可能匹配到多个指令

注：当一个页面加载时，浏览器自动将 HTML 解析为 DOM 树！Angular 的编译是在 DOM 节点上发生而非字符串，当手动调用 $compile 时，

若给它传递一个字符串则会报错，需用 angular.element 将字符串转化为 DOM

2、当所有指令都匹配到相应的元素时，编译器按指令的 priority 属性来排列指令编译顺序：

　　　　根据顺序依次执行每个指令的 compile 函数，每个 compile 函数有一次更改该指令所对应的 DOM 模板的机会，接着，每个 compile 函数

　　　　返回一个 link 函数，这些函数又构成一个“合并的”连接函数，它会调用每个指令返回的 link 函数

3、$compile 调用第 2 步返回的连接函数，将模板和对应的作用域连接：

　　　　依次调用连接函数中包含的每个指令对应的 link 函数，进而在各个 DOM 元素上注册监听器以及在相应的 scope（作用域）中设置 $watch

==》形成一个作用域和 DOM 绑定的实时视图，任一发生在已经过编译的作用域上的数据模型的变化都反映在 DOM 中

注：priority 设置指令的优先级，大的先执行（默认为 0，而 ng-repeat 默认为 1000），$watch 实现页面随 model（模型）变化而及时更新

　　DOM 即 Document Object Model（文档对象模型）

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<!--设置应用名称为 myApp，控制器为 myCtrl-->
<div ng-app="myApp" ng-controller="myCtrl">
<!--ng-model 即为模型，与 scope 中的数据绑定在一起-->
    单价：<input type="number" ng-model="price">
    <br/>数量：<input type="number" ng-model="nums">
    <!--{{expression}} 这个就是表达式，它会计算 expression 的值-->
    <br/>应付：<label>{{price * nums}}</label>
</div>
<script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope){
        $scope.price = 1;
        $scope.nums = 1;
    });
</script>
</body>
</html>

View Code

初始化：

　　Angular 会找 ng-app 这个指明应用开始的指令，若找到，则：

　　　　1、加载 ng-app 指令所指定的模块（module）

　　　　2、创建应用所需的 injector

　　　　3、以 ng-app 所在的节点为根节点，开始遍历并编译 DOM 树

编译器：

　　Angular 提供的一项服务，用来遍历 DOM 节点，查找特定的属性

　　编译过程 2 阶段：

　　　　1、编译：遍历 DOM 节点，收集所有的指令，返回一个连接函数（link func）

　　　　2、连接：将上一步收集的每个指令与其所在的作用域（scope）连接生成一个实时视图

为什么需要这 2 个阶段：

　　像 ng-repeat 会为集合中的每个项目克隆一个 DOM 元素，我们仅需要编译一次，再对每个克隆元素进行连接，减小开销

任何作用域中的模型改变都会实时地在视图中反映出来，同时任何用户与视图的交互则会映射到作用域的模型中

　　==》作用域中的数据模型成为了唯一的数据源

posted @ 2019-07-15 02:19 贵志阅读(322) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

贵志

Angular 学习笔记（一）

公告