今天做项目用到框架，关于angual,然后自己整理了一番，自己上网也看了看。

1. Angular

1.1. 库与框架的区别

• jQuery:库
  • 库一般都是封装了一些常用的方法
  • 自己手动去调用这些方法，来完成我们的功能

    $('#txt').val('我是小明')；
    $('div').text('xx');
    

• angular:框架
  • 框架都是提供一种规范或者模式
  • 我们却要按照它提供的这种规则去写代码
  • 框架会自动帮助我们去执行相应的代码

• 其实可以简单的理解为：大而全是框架，小而精的是库

  1.2. AngularJs是什么

• 百度百科http://baike.baidu.com/link?url=CKrQ1574lIOkgQ8-FBB1fxuEJzIf0Jscf2n53rxuVjK37wm0M4LupH--17Ix6towMSRoizil9Dk8mqhK4-PXGK

• 一款非常优秀的前端高级 JS 框架
• 最早由 Misko Hevery 等人创建
• 2009 年被 Google 公式收购，用于其多款产品
• 目前有一个全职的开发团队继续开发和维护这个库
• 其核心就是通过指令扩展了 HTML，通过表达式绑定数据到 HTML。
• Angular不推崇DOM操作，也就是说在NG中几乎找不到任何的DOM操作
  • angular，几乎不会使用angualr操作dom（但是angular内部肯定是使用dom来改变页面的值）
• Angular 主要是来做什么的，帮助我们方便的去写spa应用程序

1.2.1. 什么是AngularJS

• 一个前端框架，提供一种无DOM操作的编程方式，在前端页面中引入了传统在后台开发中使用的一些思想，增强代码的结构和可维护性
• 一个功能非常完备的前端框架，通过增强HTML的方式提供一种便捷开发Web应用程序的方式
• 其核心特点就是几乎无任何DOM操作，让开发人员的精力和时间全部集中于业务
• MVC的特性增强了代码的结构和可维护性，应对需求的变化做出最小的改动

1.2.2. 什么是 SPA

• single page application的缩写
• 单页应用程序
• 原理就是：通过监视hashchange事件，根据不同的url中的锚点值，去动态的发送ajax请求去请求数据（简单的说就是不会看到页面刷新）
  • 可以参照资料-备课代码-01理解
  • 网站实例：music.163.com

1.2.3. SPA的优点

• 响应效果好，体验好
• 重用资源
• 方便统一控制和代码重用，不想访问应用了，在入口的控制一下就可以。

1.2.4. 扩展：如何获取url中的各部分参数，比如hash

• 字符串操作
• 正则表达式去匹配url
• 创建a对象

  var a=document.createElement('a');
  a.hreg='http://www.baidu.com?id=23#home';
  a.pathname
  a.hash
  a.search
  

1.3. 为什么要学Angular

• 主要是为了就业，出去之后立马就能找到工作
• 新的技术在中国市场推广开来，还是需要一定时间的
• https://www.awesomes.cn

1.4. 为什么要使用Angular

• 总结一句话：为了更少的代码，实现更强劲的功能
  • 很多操作都需要dom操作，但是angular中没有那么多的dom操作，这是因为angular帮我们封装了，减少了我们开发人员的dom操作
  • 一般在angular中就不会出现jquery了，因为这两种思想正好是相悖的。
  • 参照资料-备课代码-02-compare中的四个例子体会
• 上面的意义只是皮毛，它真正的意义是:angular又是一场革命，带领前端进入了MVX时代。
  • 这就像从手工业转为机械工业一样，以前很多东西都是我么你自己手动去做，现在我们有了gulp，webpack这些自动化构建工具。

2. Angular的使用

2.1. Angular相关资料

• AngularJS 1.x 官方网站
  • https://angularjs.org/
• AngularJS 2.x 官方网站
  • https://angular.io/
• Google Material Design for Angular
  • https://material.angularjs.org
• Angular UI（Angular最大的第三方社区）
  • http://angular-ui.github.io/
• AngularJS中文社区
  • http://www.angularjs.cn/
• AngularJS中文社区提供的文档（不用FQ）
  • http://docs.angularjs.cn/api
  • http://www.apjs.net/

2.2. 安装 Angular

• 暴力安装:
  • 手动的去github下载安装
• 通过工具安装:
  • npm : npm install angular
  • bower: bower install angular
• CDN
• 本质都为了拿到angular.js这个文件。

2.3. Angular快速开始

• 请参照资料-备课代码-03-helloworld.html和04-helloworld.html和05-calc.html理解
• 请参照资料-图片-01-helloworld说明图记忆

2.4. 理解angular的整个开发流程

• ng-app:告诉angular来管理页面的代码块是什么（ng-app所在元素及其子元素）
• ng-click : 类比成onClick，是用来为当前元素注册点击事件的

  ng-click="val = (val-0) + 1"
  相当于：
  var add = document.getElementById('add');
  add.addEventListener('click',function(){

  }

• ng-model: 用来获取文本框的值,是于input的value值进行了绑定。
  • 改变ng-model的属性值对应的值，文本框的值就会改变,

  ng-model = "val";//angular就会帮助我们去创建一个val变量
  相当于:
  var num = document.getElementById('num').value;

• ng-init 指令: 用于对ng-model指定的值进行初始化操作

  ng-init = "val = 10"
  

• ng-controller：我们的业务逻辑，数据模型都要写在这里面

• $scope:这个就相当于我们所画的途中的数据模型， 在它上面给以挂载变量和方法。

  • 请参照资料-图片-02-计算器对应关系说明图

• 表达式: {{}}，相当于模板函数中的模板输出
  • 在大括号内部写上一个ng-model对应的文本框的值

2.5. 使用AngularJS的流程

1. 借助npm下载到本地
2. 在HTML代码中引入Angular.js包
3. 在JS代码中通过angular.module('myApp', [])注册一个模块
4. 在HTML代码中将刚刚定义的模块通过ng-app="myApp"指令的方式作用到一个特定的元素上
5. 根据当前页面的情况（业务块）划分控制器
6. 在HTML代码中将刚刚定义的控制器通过ng-controller="ControllerName"作用到特定的元素上
7. 建模（根据界面原型抽象一个数据模型）得到一个视图模型（ViewModel）
8. 在JS代码中通过$scope暴露需要提供到页面的数据成员
9. 在HTML代码中将刚刚暴露出来的数据通过类似ng-model/{{}}/ng-click之类的指令绑定到特定的元素上
10. 在JS中完成业务逻辑（还可以展开）

• 在思想上：
  • JQ提高了操作DOM的开发效率
  • NG几乎没有任何DOM操作（不是没有，只是不用我们自己操作）
  • NG内置一个类似JQ的东西angular.element()
  • Angular 不提倡DOM操作，如果必须使用DOM的话，也不建议再去引用jquery，有内置

2.6. 如何查看angular离线文档

1. angular文档设计的非常好都是一个功能一个功能的js分开的，主模块有1000多kb,这个应该是大家见过的最大的js库了
2. 因为angularJS的文档需要引用angularjs的东西，所以要用http-server模块打开的话，必须在文档的根目录启动hs -o

3. Angular 核心概念

• 模块化
• MVC - 思想
• 指令
• 双向数据绑定

3.1. angular.module（模块）

3.1.1. 作用

• 通过模块对页面进行业务上的划分
• 将重复使用的指令或者过滤器之类的代码做成模块，方便复用
• 注意必须指定第二个参数，否则变成找到已经定义的模块
  • 请参照资料-备课代码-06-module.html理解

3.1.2. 语法

• 根据不同的功能划分不同的模块。
• 创建一个模块
• 语法： angular.module('模块名',[])
  • 第二个参数是个数组,这个数组里的每一个元素，是我们当前模块依赖的其他模块
  • 注意: 即便我们不依赖其他的模块，也需要传递一个空数组

      因为如是不传第二个参数的话，这个方法的作用就会变为获取一个名为"模块名"的模块对象
    

  • angular.module('myApp'),是获取一个名为myApp的模块对象。
  • 我们需要给ng-app指令一个属性值，这个值就是我们创建的模块名:
    • 告诉anuglar,现在由我们自己创建的这个模块来管理页面。

3.2. angular.controller（控制器）

3.2.1. 作用

• 为应用中的模型设置初始状态
• 通过$scope对象把数据模型或者函数行为暴露给视图
• 监视模型的变化，做出相应的动作
  • 请参照资料-备课代码-08-reg2.html理解

3.2.2. 语法

• 控制器是通过模块对象来创建的:

  • 语法: var app = angular.module('模块名',[])app.controller('控制器的名字',function($scope){ // 在这个function里写我们具体想要执行的代码 // $scope 就是用来存储我们的数据模型. })

  • 我们需要在页面上使用了数据模型的元素父级元素上加上ng-controller指令，并给这个指令一个属性值，这个值就是我们创建的控制器名字。

3.3. 双向数据绑定(双向数据绑定)

• 页面文本框的值改变，导致数据模型的值发生改变，
• 数据模型的值的改变，反过来导致页面文本框的值的改变，这种相互影响的关系，我们起了个名词，叫作双向数据绑定。
• ng-model = ""

3.4. 单向数据绑定

• 只能一数据模型的值改变，导致页面值的改变;

3.5. MVC 思想

3.5.1. 什么是 MVC 思想

• 将应用程序的组成划分为三个部分：Model View Controller
  • 模型：数据处理
  • 视图：以友好的方式向用户展示数据
  • 控制器：业务逻辑处理
• 控制器的作用就是初始化模型用的；
• 模型就是用于存储数据的,做一些业务逻辑的操作。

• 视图用于展现数据

• 请参照资料-图片-03-富士康MVC类比图和04-MVC在代码中的应用理解

• 请参照资料-备课代码-07-register.html理解

3.5.2. 用MVC构建应用的优势

• 剥离开视图和逻辑之间的关系，无论怎么修改dom操作都不用修改业务逻辑代码
• 请参照资料-备课代码-09-calc2.html理解

4. 扩展

4.1. http-server

• 安装 npm install -g http-server
• 使用 hs -o -p 8089

4.2. i5ting_toc

• 安装 npm install -g i5ting_toc
• 使用 i5ting_toc -f sample.md -o
• 网址

4.3. module（模块）

4.3.1. 作用

• 通过模块对页面进行业务上的划分,根据不同的功能划分不同的模块。
• 将重复使用的指令或者过滤器之类的代码做成模块，方便复用
• 注意必须指定第二个参数，否则变成找到已经定义的模块
  • 请参照资料-备课代码-20-module.html理解

4.3.2. 语法

• 语法： angular.module('模块名',[])
  • 第二个参数是个数组,这个数组里的每一个元素，是我们当前模块依赖的其他模块
  • 注意: 即便我们不依赖其他的模块，也需要传递一个空数组

      因为如是不传第二个参数的话，这个方法的作用就会变为获取一个名为"模块名"的模块对象
    

  • angular.module('myApp'),是获取一个名为myApp的模块对象。
  • 我们需要给ng-app指令一个属性值，这个值就是我们创建的模块名:
    • 告诉anuglar,现在由我们自己创建的这个模块来管理页面。

4.4. controller（控制器）

4.4.1. 作用

• 为应用中的模型设置初始状态
• 通过$scope对象把数据模型或者函数行为暴露给视图
• 监视模型的变化，做出相应的动作
  • 请参照资料-备课代码-24-watch.html理解

4.4.2. 语法

• 控制器是通过模块对象来创建的:

  • 语法:

    var app = angular.module('模块名',[])
    app.controller('控制器的名字',function($scope){
      // 在这个function里写我们具体想要执行的代码
      // $scope 就是用来存储我们的数据模型.
    })
    

  • 我们需要在页面上使用了数据模型的元素父级元素上加上ng-controller指令，并给这个指令一个属性值，这个值就是我们创建的控制器名字。

4.4.3. 控制器的注入方式

4.4.4. 普通的定义控制器

var myModule = angular.module('myModule', []);
myModule.controller('DemoController', function($scope) {
  $scope.user = {
    name: 'world1111'
  };
});

4.4.5. 安全的定义控制器（推荐）

• angular代码在压缩混淆的时候回被替换成特殊字符，这样就会产生找不到对象的问题
• 请参照资料-备课代码-07-controller2.html理解
• 代码混淆工具

4.4.6. 面向对象的方式定义控制器(扩展)

• 请参照资料-备课代码-09-oo-controller.html理解

4.5. MVC 思想

4.5.1. 什么是 MVC 思想

• 将应用程序的组成划分为三个部分：Model View Controller
  • 模型：数据处理
  • 视图：以友好的方式向用户展示数据
  • 控制器：业务逻辑处理
• 控制器的作用就是初始化模型用的；
• 模型就是用于存储数据的,做一些业务逻辑的操作。

• 视图用于展现数据

• 请参照资料-图片-03-富士康MVC类比图和04-MVC在代码中的应用理解

• 请参照资料-备课代码-22-register.html理解

4.5.2. 用MVC构建应用的优势

• 剥离开视图和逻辑之间的关系，无论怎么修改dom操作都不用修改业务逻辑代码
• 请参照资料-备课代码-23-calc2.html理解

4.5.3. MVC思想总结

• 是一种设计思想，约定了程序的结构应该是怎样的，
• 每一个组成原件都有一个明确的职责
• 提高代码的结构和可维护性提高

4.6. 双向数据绑定

• 页面文本框的值改变，导致数据模型的值发生改变，
• 数据模型的值的改变，反过来导致页面文本框的值的改变，这种相互影响的关系，我们起了个名词，叫作双向数据绑定。
• ng-model = ""

4.6.1. $scope

• 视图和控制器之间的数据桥梁
• 用于在视图和控制器之间传递数据
• 用来暴露数据模型（数据，行为）

4.6.2. ViewModel

• $scope 实际上就是MVVM中所谓的VM（视图模型）
• 正是因为$scope在Angular中大量使用甚至盖过了C（控制器）的概念，所以很多人（包括我）把Angular称之为MVVM框架，这一点倒是无所谓，具体看怎么用罢了
• 大家必须掌握的就是如何根据一个原型抽象出对应的视图模型

4.7. 表达式

类似于模版引擎的语法

4.7.1. 作用：

使用表达式把数据绑定到 HTML。

4.7.2. 语法：

• 表达式写在双大括号内：{{ expression }}。
• AngularJS 表达式很像 JavaScript 表达式
• 它们可以包含文字、运算符和变量
• 如 {{ 5 + 5 }} 或 {{ firstName + '-' + lastName }}
  • 请参照资料-备课代码-10-expression.html理解

4.7.3. 支持的类型

• 数字 {{ 100 + 100 }}
• 字符串 {{ 'hello' + 'angular' }}
• 对象 {{ zhangsan.name }}
• 数组 {{ students[10] }}

4.7.4. 与JS的比较：

相同点：

• AngularJS 表达式可以包含字母，操作符，变量。

不同点：

• AngularJS 表达式可以写在 HTML 中。
• AngularJS 表达式不支持条件判断，循环及异常。
• AngularJS 表达式支持过滤器。

4.8. 指令

• 在 AngularJS 中将前缀为 ng- 这种属性称之为指令，其作用就是为 DOM 元素调用方法、定义行为绑定数据等
• 简单说：当一个 Angular 应用启动，Angular 就会遍历 DOM 树来解析 HTML，根据指令不同，完成不同操作

4.8.1. 指令标准属性的问题

• ng-xxx 的属性本身并不是HTML标准中定义的属性
• 很多情况下语法校验是无法通过的,但是浏览器有容错性。
• HTML5 允许扩展的（自制的）属性，以 data- 或者x- 开头。
• 在 AngularJS 中可以使用 data-ng- 来让网页对 HTML5 有效。

• ng-和data-ng-二者效果相同。

• 请随便把example中的ng-app替换为data-ng-app理解

4.8.2. 内置指令

4.8.2.1. ng-app

• ng-app 指令用来标明一个 AngularJS 应用程序
• 标记在一个 AngularJS 的作用范围的根对象上
• 系统执行时会自动的执行根对象范围内的其他指令
• 可以在同一个页面创建多个 ng-app 节点（不推荐）
• 创建多个ng-app时，默认只能执行第一个，后面的需要手动引导：angular.bootstrap()
• 标记的范围尽可能小，这样可以减少遍历的dom元素，主要为了性能

4.8.2.1.1. 自动引导

• 在angular中一个页面中只能有一个ng-app指令，这是单页面应用程序的入口,这属于自动引导
  • 请参照资料-备课代码-02-module.html理解

4.8.2.1.2. 手动引导

• 如果想在一个页面中使用多个ng-app指令，需要进行手动引导
• 请参照资料-备课代码-03-mulit-module.html理解

4.8.2.1.3. 多模块使用标准写法

• 请参照资料-备课代码-04--module2.html理解
• 请参照资料-图片-01--angular应用结构图理解

4.8.2.2. ng-model

• 用于建立界面上的元素到数据模型属性的双向数据绑定
• 一般情况绑定到元素的value属性上
• 但是在checkbox之类的表单元素会有不同

4.8.2.3. ng-bind

• ng-bind和表达式效果相同,不过能防止闪动一下页面
• ng-bind上来是没有东西的，需要通过viewmodel或者ng-init初始化绑定的值
  • 请参照资料-备课代码-11-directive.html理解

4.8.2.4. ng-bind-html

• 可以把字符串中的html在页面中直接展示
• 不过在使用的时候会报不安全问题，缺少引用的文件，需要引用第三方的包才能实
  • 请参照资料-备课代码-11-directive.html理解
• 现安全输出浏览器自动也会帮你处理一些安全问题的,不会执行或者输出不安全的代码， 你在开发的过程中要有意识的考虑攻击问题，想一下输出的会不会是可执行的代码，需要编码后再呈现。
  • 请参照资料-备课代码-12-html-safe.html理解安全问题

4.8.2.5. ng-repeat

• 循环输出页面内容
  • 请参照资料-备课代码-13-userful-directive.html理解
• 数据源是数组

     var data = [
       /* beautify ignore:start */
       { id: 1, name: '詹三1', age: 118, gender: true },
       { id: 2, name: '詹三2', age: 128, gender: true },
       { id: 3, name: '詹三3', age: 138, gender: true },
       { id: 4, name: '詹三4', age: 148, gender: true },
       { id: 5, name: '詹三5', age: 158, gender: true },
       /* beautify ignore:end */
     ];
  

  <ul ng-controller="MainController">
    <li ng-repeat="item in data">
      <p>
        <span>{{item.id}}</span>
        <span>{{item.name}}</span>
        <span>{{item.age}}</span>
      </p>
    </li>
  </ul>

• 数据源是对象

   var data = {
      /* beautify ignore:start */
      1: { name: '詹三1', age: 11, gender: true },
      2: { name: '詹三2', age: 12, gender: true },
      3: { name: '詹三3', age: 13, gender: true },
      4: { name: '詹三4', age: 14, gender: true },
      5: { name: '詹三5', age: 15, gender: true },
      /* beautify ignore:end */
    };
  

  <ul ng-controller="MainController">
    <li ng-repeat="(id, item) in ps track by $index">
      <p>
        <span>{{id}}</span>
        <span>{{item.name}}</span>
        <span>{{item.age}}</span>
      </p>
    </li>
  </ul>
  

• $index

  • ng-repeat中的索引

4.8.2.6. ng-class

• 决定某个样式是否添加
• ng-class={classname1:是否添加,classname2:是否添加}
  • 请参照资料-备课代码-14-ng-class.html理解

4.8.2.7. $apply

• 异步操作中的数据绑定不能及时监听到，让页面渲染，所以需要手动调用一下
  • 请参照资料-备课代码-15-loading.html理解

4.8.2.8. ng-cloak

• 自动给页面元素添加dispaly：none属性，当页面渲染完毕自动删除
• 最后你会发现直接把angularjs引用到最上面就不会有闪屏现象了，因为angularjs在页面渲染的时候已经执行了
  • 请参照资料-备课代码-16-ng-cloak.html理解

4.8.2.9. ng-show/ng-hide/ng-if

• ng-show和ng-hide是控制页面是否显示
• ng-if的作用是控制是否存在这个dom元素，如果值等于false会把页面中的元素注释
  • 请参照资料-备课代码-17-if-show-hide.html理解

4.8.2.10. ng-switch

• 根据value值决定页面中的哪部分显示
  • 请参照资料-备课代码-17-if-show-hide.html理解

4.8.2.11. ng-src

• 用于解决当链接类型数据绑定时候造成的加载问题
• ng-src指令会自动帮你把属性值赋值给src属性，类似于懒加载中的效果一样
  • 请参照资料-备课代码-18-ng-src-ng-href.html理解

4.8.2.12. 其他常用指令

• ng-checked：
  • 单选/复选是否选中，只是单向绑定数据
  • 请参照资料-备课代码-19-ng-checked.html理解
• ng-selected：
  • 是否选中，只是单向绑定数据
• ng-disabled：
  • 是否禁用
• ng-readonly：
  • 是否只读

4.8.3. 常用事件指令

不同于以上的功能性指令，Angular还定义了一些用于和事件绑定的指令：

• ng-blur：
  • 失去焦点
• ng-change：
  • 发生改变
• ng-copy：
  • 拷贝完成
• ng-click：
  • 单击
• ng-dblclick：
  • 双击
• ng-focus：
  • 得到焦点
• ng-blur：
  • 失去焦点
• ng-submit：
  • 表单提交

4.8.4. 第三方指令

• 网址：angular-ui.github.io