什么是 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. 一文解读HTTP (转)

    先扒一扒HTTP协议背景? HTTP(HyperText Transfer Protocol) 即超文本传输协议,现在基本上所有web项目都遵从HTTP协议(协议就是一种人为的规范). 目前绝大部分使 ...

  2. SQL Server通过函数把逗号分隔的字符串拆分成数据列表的脚本-干货

    CREATE FUNCTION [dbo].[Split](@separator VARCHAR(64)=',',@string NVARCHAR(MAX))  RETURNS @ResultTab ...

  3. idea延长使用期

    0. 如果你的idea(版本2019.02)是已过期状态则先上网找个激活码激活再进行下面步骤延长使用期至2089年 1. 附件下载地址: 链接:https://pan.baidu.com/s/1L5O ...

  4. 反卷积（Transposed Convolution）

    反卷积的具体计算步骤 令图像为 卷积核为 case 1 如果要使输出的尺寸是 5x5,步数 stride=2 ,tensorflow 中的命令为: transpose_conv = tf.nn.con ...

  5. new和delete创建和释放动态数组

    1.动态创建和释放一维数组 #include<iostream> using namespace std; int main() { int n; cin>>n; //分配动态 ...

  6. 02. Go 语言基本语法

    Go语言基本语法 变量.数据类型和常量是编程中最常见,也是很好理解的概念.本章将从 Go 语言的变量开始,逐步介绍各种数据类型及常量. Go 语言在很多特性上和C语言非常相近.如果读者有C语言基础,那 ...

  7. Mysql 如何创建一张临时表

    mysql 利用 temporary 关键字就可以创建出一个临时表.创建的这张表会在与服务器的会话终止时自动消失 语法:create temporary table tbl_name...; 规则:每 ...

  8. spring+eureka+zuul

    最近在看一个关于spring+eureka+zuul的教学视频,终于明白了eureka是用于提供服务注册和发现的service,通过eureka各个service可以知道其他service,这样就隔离 ...

  9. 多网卡做team

    简明的说,就是把多个物理网卡绑定成一个逻辑上的网卡,以增加带宽,或者实现主备功能,增加硬件冗余,以实现更高的系统稳定性,目前主要有bond和team两种做法,而bond主要是针对双网卡的情况来说,而t ...

  10. php中trait的使用方法

    1.php中的trait是啥? 看上去既像类又像接口,其实都不是,Trait可以看做类的部分实现,可以混入一个或多个现有的PHP类中,其作用有两个:表明类可以做什么:提供模块化实现.Trait是一种代 ...