聊聊近态

现在AngularJS框架很火，很多前端招聘信息要求都需要掌握AngularJS，因为我学习喜欢做笔记，但是一般是写在印象笔记，但是投前端简历的时候，就需要填写个人博客或者github，所以以后学习就转战这两个平台进行记录吧~~~请大家多多关照

学习内容来源： AngularJS中文网

笔记备注：

蓝色字体代表加了链接，绿色字体表示个人理解，红色字体表示待解决的疑问，紫色字体表示对疑问的解答
学习的过程中可以配合PhoneCat 官方案例进行理解，github地址：https://github.com/angular/angular-phonecat

1、简介

1）核心特性：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等

【解释：MVVM（Model-View-ViewModel）

先了解用JavaScript在浏览器中操作HTML，经历了若干发展阶段：

1）直接用JavaScript操作DOM节点，使用浏览器提供的原生API

2）由于原生API不好用，还要考虑浏览器兼容性，jQuery横空出世，以简洁的API迅速俘获了前端开发者的芳心

3）MVC模式，需要服务器端配合，JavaScript可以在前端修改服务器渲染后的数据

4）MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。这样就能做到：改变JavaScript对象的状态，会导致DOM结构作出对应的变化。

】

2）创新之处：

构建一个CRUD应用时可能用到的所有技术：数据绑定、基本模板指令、表单验证、路由、深度链接、组件重用、依赖注入。
可测试性：单元测试、端到端测试、模拟对象（mocks）、测试工具。
拥有一定目录结构和测试脚本的种子应用。

3）适用场景：

对于像游戏和有图形界面的编辑器之类的应用，会进行频繁且复杂的DOM操作，和CRUD应用不同。因此，可能不适合用Angular来构建。在这种场景下，使用更低抽象层次的类库可能会更好，例如：jQuery。

【解释： CRUD是 Create(创建)、Read(读取)、Update(更新)和Delete(删除)的缩写。】

4）解决了以下问题：

使用回调
以编程的方式操作HTML DOM
在用户界面中读写数据
在开始前写大量的初始化代码

优点简单来说就是，DOM因显示动态数据被频繁地更新数据导致HTML、CSS、JavaScript和ajax代码混杂，为了更好的提高代码简洁性可读性，提高开发效率，angularJS这个完整的前端解决方案出现啦！！！

2、引用

像正常引入js一样引入

例子：

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" ng-app id="ng-app">
  <body>
    ...
    <script src="angular.js">
  </body>
</html>

说明：

1）在HTML页面底部放置 script 标签。这样可以优化应用的加载时间，因为避免了HTML加载时被 angular.js 脚步的加载阻滞。也可以选择直接引入百度CDN文件（推荐）或者bootcdn。注意，别再你的产品代码中连接这个 URL，因为这样会在你的网站中暴露一个安全问题。当然，在开发的时候连接是没有问题的。

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>

2）如果你想要你的应用自动启动 Angular 的话，那就把 ng-app 放在应用的根结点中，通常情况下是 <html> 标签中；

3）如果你的应用需要支持 IE7 ，那么加上 id="ng-app"；

4）如果你要使用 ng: 这样的老风格的指令方式，那就在 html 中加入 xml 命名空间，这样也能让 IE 得瑟下。（译注：历史原因，你懂的，所以 ng : 这种方式现在已经不推荐了。）

xmlns:ng="http://angularjs.org"

3、自动初始化

两种情况下自动初始化：1）在DOMContentLoaded 事件触发时；2）在 angular.js 脚本被执行的同时如果document.readyState 被置为 ' complete ' 的话。

学习Angular.js之Class-1: 简介+初始化+概念概述

初始化时，Angular 会去找 ng-app 这个指明应用开始所在的指令。如果 ng-app 指令被找到的话，Angular 会做以下几件事：

加载 ng-app 指令所指定的模块
创建应用所需的 injector
以 ng-app 所在的节点为根节点，开始遍历并编译DOM树（ng-app 指出了应用的哪一部份开始时 Angular 去编译的）

4、手动初始化

如果不想那么快就启动应用，想先操作一些别的事情，可以这样设置

<!doctype html>
<html xmlns:ng="http://angularjs.org">
  <body>
    Hello World!
    <script src="http://code.angularjs.org/angular.js"></script>
    <script>
       angular.element(document).ready(function() {
         angular.module('myApp', []);
         angular.bootstrap(document, ['myApp']);
       });
    </script>
  </body>
</html>

说明：

1）angular.element(doument) 是angular的默认模块ng中的全局函数，类似jquery中的$(document).ready(function(){ }) =>创建了一个女朋友

描述：包裹着一部分DOM element或者是HTML字符串，把它作为一个jQuery元素来处理。（类似于jQuery的选择器啦）如果jQuery被引入了，则angular.element就可以看作是jQuery选择器，选择的对象可以使用jQuery的函数；如果jQuery不可用，angular.element只能接受HTML字符串或者DOM元素为参数，选择的元素只可以调用Angular中嵌入的精简版的jQuery library（名为: "jQuery lite" or "jqLite")。

注意: 所有被Angular引用的元素都是jQuery或者jqLite对象，不是原始的DOM元素了。

返回值：jQuery对象

2）angular.module(name, [requires], [configFn]); =>给女朋友新买了一个myApp的配饰

描述：用angular.module来注册和检索模块。所有模块应提供给一个应用程序必须使用这种机制注册。当传递了2个或更多的参数时，创建一个新的模块。如果仅通过一个参数，一个现有的模块（作为第一个参数传递给模块）被检索。

学习Angular.js之Class-1: 简介+初始化+概念概述

返回值：module对象 =>就是保存一个可重复调用的模块

3）angular.bootstrap(element, [modules], [config]); =>将myApp配饰装饰到女朋友身上

描述：此方法用于手动加载angularjs模板
(官方翻译：注意基于端到端的测试不能使用此功能来引导手动加载，他们必须使用ngapp。 angularjs会检测这个模板是否被浏览器加载或者加载多次并且在控制台给出警告在加载其他模块的时候，这防止了奇怪的结果，在实际应用中，angularjs在尝试其它的多个实例来研究DOM)。

返回值：新创建的injector 对象 => 这是一个怎么样的对象呢？

4）Angular 代码运行时遵循的顺序

在HTML页面以及所有代码加载完毕后，Angular 会去找到应用的根元素（通常是文档的根节点），然后调用 angular.bootstrap() 去编译各元素成为一个可执行的且双向绑定的应用。

5、延迟启动

这个特色可以让像 Batarang 一样的测试工具横插一杠进入 Angular 的引导进程，并且溜进模块中的DI***制中，这样就可以替换或者增强DI提供的服务。

【解释：Batarang是Angular chrome 插件，用来进行调试，就像我们一般按F12找bug一样。安装此插件后在调试工具栏会出现多一个选项 AngularJS。安装过程需要安装Node.js，在npm下安装依赖包angular和browerify-eep。

Batarang下载地址：https://github.com/angular/batarang/releases

Batarang安装教程：https://blog.****.net/u013236043/article/details/73957808

Batarang使用教程：https://blog.****.net/fangjuanyuyue/article/details/51201622】

当 angular.bootstrap() 被调用时，如果 window.name 包含 NG_DEFER_BOOTSTRAP! 前缀，引导进程会被暂停直到 angular.resumeBootstrap() 被调用。

angular.resumeBootstrap() 以一个可选的数组作为参数，这个数组是包含了应用启动时需要被注入的模块。

=> 这段不是很理解，需要后续学习进行了解，若网友们知道，求帮忙解释，谢谢！！

6、概念概述

重要概念：

学习Angular.js之Class-1: 简介+初始化+概念概述

1）例子：数据绑定

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.25/angular.min.js"></script>
  </head>
  <body>
    <div ng-init="qty=1;cost=2">
      <b>订单:</b>
      <div>
        数量: <input type="number" ng-model="qty" required >
      </div>
      <div>
        单价: <input type="number" ng-model="cost" required >
      </div>
      <div>
        <b>Total:</b> {{qty*cost}}
      </div>
    </div>
  </body>
</html>

运行效果：

学习Angular.js之Class-1: 简介+初始化+概念概述

说明：

在Angular中，像这样的文件叫做“模板(template)”。当Angular启动你的应用时，它通过“编译器(compiler)”来解析并处理模板中的这些新标记。这些经过加载、转换、渲染而成的DOM就叫做“视图(view)”。

第一类新标记叫做“指令(directive)”。它们通过HTML中的属性或元素来为页面添加特定的行为。上面的例子中，我们使用了 ng-app 属性，与此相关的指令(directive)则负责自动初始化我们的应用程序。 Angular还为input 元素定义了一个指令，它负责添加额外的行为到这个元素上。例如，当它发现了input元素的required属性，它就会自动进行验证，确保所输入的文本不会是空白。 ng-model指令则负责从变量(比如这里的qty、cost等)加载input元素的value值，并且把input元素的value值写回变量中。并且，还会根据对input元素进行校验的结果自动添加相应的css类。比如在上面这个例子中，我们可以通过这些css类把空白input元素的边框设置为红色，来表示无效的输入。

通过自定义指令访问DOM: 对于Angular，一个程序中唯一允许接触DOM的地方就是“指令”。之所以这样要求，是因为需要访问DOM的代码难以进行自动化测试。如果你需要直接访问DOM，那么你就应该为此写一个自定义指令。（后续会看到）

第二类新标记是双大括号{{ expression | filter }}，其中expression是“表达式”语句，filter是“过滤器”语句。当编译器遇到这种标记时，它会把这些标记替换为这个表达式的计算结果。模板中的"表达式"是一种类似于JavaScript的代码片段，它允许你读写变量。注意，表达式中所用的变量并不是全局变量。就像JavaScript函数定义中的变量都属于某个作用域一样，Angular也为这些能从表达式中访问的变量提供了一个“作用域(scope)”。这些存储于Angular作用域(Scope)中的变量叫做Scope变量，这些变量所代表的数据叫做“模型(model)”。在上面的例子中，这些标记告诉Angular：“从这两个input元素中获取数据，并把它们乘在一起。”

上面这个例子中还包含一个"过滤器(filter)"。过滤器格式化表达式的值，以便呈现给用户。上面的例子中currency过滤器把一个数字格式化为金额的形式进行输出。

这个例子中最重要的一点是：Angular提供了动态(live)的绑定：当input元素的值变化的时候，表达式的值也会自动重新计算，并且DOM所呈现的内容也会随着这些值的变化而自动更新。这种模型(model)与视图(view)的联动就叫做“双向数据绑定”。

学习Angular.js之Class-1: 简介+初始化+概念概述

2）例子：添加UI逻辑控制器

HTML代码：

<!doctype html>
<html ng-app="invoice1">
  <head>
    <script src="http://code.angularjs.org/1.2.25/angular.min.js"></script>
    <script src="invoice1.js"></script>
  </head>
  <body>
    <div ng-controller="InvoiceController as invoice">
      <b>订单:</b>
      <div>
        数量: <input type="number" ng-model="invoice.qty" required >
      </div>
      <div>
        单价: <input type="number" ng-model="invoice.cost" required >
        <select ng-model="invoice.inCurr">
          <option ng-repeat="c in invoice.currencies"></option>
        </select>
      </div>
      <div>
        <b>总价:</b>
        <span ng-repeat="c in invoice.currencies">
          
        </span>
        <button class="btn" ng-click="invoice.pay()">支付</button>
      </div>
    </div>
  </body>
</html>

invoice1.js

angular.module('invoice1', [])
  .controller('InvoiceController', function() {
    this.qty = 1;
    this.cost = 2;
    this.inCurr = 'EUR';
    this.currencies = ['USD', 'EUR', 'CNY'];
    this.usdToForeignRates = {
      USD: 1,
      EUR: 0.74,
      CNY: 6.09
    };
 
    this.total = function total(outCurr) {
      return this.convertCurrency(this.qty * this.cost, this.inCurr, outCurr);
    };
    this.convertCurrency = function convertCurrency(amount, inCurr, outCurr) {
      return amount * this.usdToForeignRates[outCurr] * 1 / this.usdToForeignRates[inCurr];
    };
    this.pay = function pay() {
      window.alert("谢谢！");
    };
  });

运行效果：

学习Angular.js之Class-1: 简介+初始化+概念概述

这个例子是输入数量、价格，选择价格的单位

---未完待续---

学习Angular.js之Class-1: 简介+初始化+概念概述

1、简介

2、引用

3、自动初始化

4、手动初始化

5、延迟启动

6、概念概述

1）例子：数据绑定

2）例子：添加UI逻辑 控制器

相关推荐

2）例子：添加UI逻辑控制器