什么是 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. 假设高度已知，请写出三栏布局，其中左右各为300px 中间自适用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. JS基础语法---作用域链

    从函数嵌套来分析: (层数一般5层内) var num=10; function f1() { var num=20; function f2() { var num=30; function f3( ...

  3. ArcGIS以数据库作为数据源作为source发布服务步骤详解（以Postgresql为例）及各种发布问题

    创建企业级数据库 Data Management Tools-->Geodatabase Administration-->Create Enterprise Geodatabase 按如 ...

  4. Dynamics 365 Online通过OAuth 2 Client Credential授权(Server-to-Server Authentication)后调用Web API

    微软动态CRM专家罗勇 ,回复332或者20190505可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me! 本文很多内容来自 John Towgood 撰写的Dynamic ...

  5. php代码如何加域名授权？开源php项目如何保护版权 商业授权？

    php在web开发领域是最热门的语言,也是开发项目的不二选择,许多PHP开发者说它是当今世界上最好的开发语言,php开发项目效率高,是因为开源项目太多了,不管是国内,还是国外,开源的框架,开源的CMS ...

  6. Linux shell--基础指令

    Linux shell--基础指令 浏览Linux文件系统 Linux中最基础也是最必要的一条指令 cd destination cd命令可接受单个参数destination,用以指定想切换到的目录名 ...

  7. ABP入门教程3 - 解决方案

    点这里进入ABP入门教程目录 创建项目 点这里进入ABP启动模板 如图操作,我们先生成一个基于.NET Core的MPA(多页面应用)．点击"Create my project!" ...

  8. TypeScript 学习笔记（四）

    函数: 1.函数是一组一起执行一个任务的语句 2.我们可以把一段可复用的代码放到一起组成函数,从而提高效率 3.函数声明(通过关键字 function 来声明)告诉编译器函数的名称.返回类型和参数 4 ...

  9. MyBtis之关于#{}和${}

    1.${}的用法的mapper文件配置: </select>     <select id="selById2" resultType="com.sus ...

  10. 关于Linux下进程的详解【进程查看与管理】

    一.关于进程 进程: 已经启动的可执行程序的运行实力 进程的组成:一个进程包含内核中的一部分地址空间和一系列数据结构.其中地址空间是内核标记的一部分内存以供进程使用,而数据结构则用来纪录每个进程的具体 ...