什么是 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. SpringCloud（一）：了解SpringCloud

    一.SpringCloud 简介 首先看看SpringCloud官方的介绍: Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智能路由, ...

  2. golang-错误处理

    1.错误处理 如果要写出健壮 ,易维护的代码 ,错误处理就是关键 ,考虑到可能会发生的意外对其进行处理 go的错误处理与众不同 ,在调用可能出现问题的方法和函数时都会返回一个类型为error的值 ,由 ...

  3. BIM工程信息管理新系统- 系统管理模块

    系统管理模块 1.实体类 public partial class T_Role { public string RoleId { get; set; } public string RoleName ...

  4. Python程序中的线程操作-锁

    目录 一.同步锁 1.1 多个线程抢占资源的情况 1.1.1 对公共数据的操作 1.2 同步锁的引用 1.3 互斥锁与join的区别 二.死锁与递归锁 2.1 死锁 2.2 递归锁RLock 三.典型 ...

  5. ASP.NET Core 中基于 API Key 对私有 Web API 进行保护

    这两天遇到一个应用场景,需要对内网调用的部分 web api 进行安全保护,只允许请求头账户包含指定 key 的客户端进行调用.在网上找到一篇英文博文 ASP.NET Core - Protect y ...

  6. HTML连载47-设计思想、浮动元素高度问题

    一.设计网页的思想 拿到需求之后我们先对各个模块(盒子)进行划分,然后从外到内进行设计(1)设计一个盒子最基本的设计大致包括背景颜色(其实用于识别),宽,高,边界浮动流还是标准流. (2)然后盒子和盒 ...

  7. PHP递归函数return返回null的问题

    前段时间在写递归函数的时候碰到个问题,返回值一直为null,这里记录一下. 写个小例子: /** * @param $i * @return mixed */ function recursion($ ...

  8. Java菜题

    编程语言:Java  2019年全国高校计算机能力挑战赛分设大数据算法赛(所谓的内部试题) 一.选择题(共15题,每题3分,共45分) 1. 在Java中下列说法正确的是(  ) A.一个子类可以有多 ...

  9. P3376 网络最大流模板（Dinic + dfs多路增广优化 + 炸点优化 + 当前弧优化）

    ### P3376 题目链接 ### 这里讲一下三种优化的实现以及正确性. 1.dfs多路增广优化 一般的Dinic算法中是这样的,bfs() 用于标记多条增广路,以至于能一次 bfs() 出多次 d ...

  10. 开发常用Git/Linux/idea命令快捷键总结（持续更新）

    在开发过程中,会使用越来越多的命令,或快捷键,来帮助我们提高工作效率.本文记录了我在平时积累的常用命令,分享给大家. git命令 基本命令 set LESSCHARSET=utf-8 --idea T ...