什么是 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>

初始化：

　　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 元素，我们仅需要编译一次，再对每个克隆元素进行连接，减小开销

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

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

Angular 学习笔记（一）的更多相关文章

  1. angular学习笔记(三十一)-$location(2)

    之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...

  2. angular学习笔记(三十一)-$location(1)

    本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...

  3. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  4. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

  5. angular学习笔记(三十)-指令(7)-compile和link(1)

    这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...

  6. angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

  7. angular学习笔记(三十)-指令(5)-link

    这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...

  8. angular学习笔记(三十)-指令(2)-restrice,replace,template

    本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...

  9. angular学习笔记(三十)-指令(1)-概述

    之前在 angular学习笔记(十九)-指令修改dom 里面已经简单的提到了angular中的指令,现在来详细的介绍 '指令' 一.指令的创建: dirAppModule.directive('dir ...

  10. angular 学习笔记

    每天进步一点点,学习笔记 笔记来自  angular权威指南 如果想要屏蔽浏览器对表单的默认验证行为,可以在表单元素上添加 novalidate 标记. 而按钮标签则完全忽略 hr e f 属性,并不 ...

随机推荐

  1. 利用 Docker Compose 搭建 SpringBoot 运行环境(超详细步骤和分析)

    0.前言 相信点进来看这篇文章的同学们已经对 Docker Dompose 有一定的了解了,下面,我们拿最简单的例子来介绍如何使用 Docker Compose 来管理项目. 本文例子: 一个应用服务 ...

  2. Vue组件通信的几种方法

    上一节说到,vue.js是允许子组件通过props接受父组件的信息,但是不允许父组件通过props接受子组件的信息 1. $emit()和on 当子组件需要向父组件传递数据时,就要用到自定义事件. 使 ...

  3. iOS11自定义tabBar重影问题

    转载自:(主链接)https://www.jianshu.com/p/1be90349fdb4 https://www.cnblogs.com/coderYu/p/5859638.html 很实用,有 ...

  4. smobiler自适应不同手机分辨率

    在smobiler中可以通过相对布局或者绝对布局实现自适应不同手机分辨率. 例如实现下图中的布局,图中的布局实际可以分成3个部分,部分1可以使用Title控件,部分2可以使用Panel(在Panel中 ...

  5. 更改 undo_retention 时，Lob retention 不更改 (Doc ID 563470.1)

    Lob retention not changing when undo_retention is changed (Doc ID 563470.1) APPLIES TO: Oracle Datab ...

  6. Octave计算数据

    设A=[1 2;3 4;5 6] B=[11 12;13 14;15 16] A.*B =     :对A以及B中的对应的元素进行相乘 11 24 39 56 75 96 A.^2 :对A中的每一个元 ...

  7. java8-13-默认方法 静态方法 重复注解 类型注解

    java8增加默认方法 静态方法   重复注解 类型注解   1.默认方法 default修饰   为什么要有这个特性? 当修改接口时候,需要修改全部实现该接口的类.为了解决这个问题,所以引进默认方法 ...

  8. cookie和session及token的区别联系

    1 发展史 1.很久很久以前,Web 基本上就是文档的浏览而已, 既然是浏览,作为服务器, 不需要记录谁在某一段时间里都浏览了什么文档,每次请求都是一个新的HTTP协议, 就是请求加响应,  尤其是我 ...

  9. MySQL常用数据类型 length 专题

    MySQL-data_type数据类型 1.查看数据类型 mysql> help data type    //通过help对数据进行查看,以及使用的方法 2.MySQL常见的数据类型 整数in ...

  10. 【ECNU71】一个游戏（水题）

    点此看题面 大致题意: \(n\)种元素,有若干组将\(x\)元素转化为\(y\)元素的操作.问对于所有可能的元素拥有状况,改变转化操作的顺序,是否会影响转化后最终的结果. 水题 虽说是这么水的题,但 ...