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 贵志 阅读(...) 评论(...) 编辑 收藏