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中文社区提供的文档（不用*）
- 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的流程

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

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

2.6. 如何查看angular离线文档

angular文档设计的非常好都是一个功能一个功能的js分开的，主模块有1000多kb,这个应该是大家见过的最大的js库了
因为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

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

1. Angular

1.1. 库与框架的区别

1.2. AngularJs是什么

1.2.1. 什么是AngularJS

1.2.2. 什么是 SPA

1.2.3. SPA的优点

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

1.3. 为什么要学Angular

1.4. 为什么要使用Angular

2. Angular的使用

2.1. Angular相关资料

2.2. 安装 Angular

2.3. Angular快速开始

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

2.5. 使用AngularJS的流程

2.6. 如何查看angular离线文档

3. Angular 核心概念

3.1. angular.module（模块）

3.1.1. 作用

3.1.2. 语法

3.2. angular.controller（控制器）

3.2.1. 作用

3.2.2. 语法

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

3.4. 单向数据绑定

3.5. MVC 思想

3.5.1. 什么是 MVC 思想

3.5.2. 用MVC构建应用的优势

4. 扩展

4.1. http-server

4.2. i5ting_toc

4.3. module（模块）

4.3.1. 作用

4.3.2. 语法

4.4. controller（控制器）

4.4.1. 作用

4.4.2. 语法

4.4.3. 控制器的注入方式

4.4.4. 普通的定义控制器

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

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

4.5. MVC 思想

4.5.1. 什么是 MVC 思想

4.5.2. 用MVC构建应用的优势

4.5.3. MVC思想总结

4.6. 双向数据绑定

4.6.1. $scope

4.6.2. ViewModel

4.7. 表达式

4.7.1. 作用：

4.7.2. 语法：

4.7.3. 支持的类型

4.7.4. 与JS的比较：

4.8. 指令

4.8.1. 指令标准属性的问题

4.8.2. 内置指令

4.8.2.1. ng-app

4.8.2.1.1. 自动引导

4.8.2.1.2. 手动引导

4.8.2.1.3. 多模块使用标准写法

4.8.2.2. ng-model

4.8.2.3. ng-bind

4.8.2.4. ng-bind-html

4.8.2.5. ng-repeat

4.8.2.6. ng-class

4.8.2.7. $apply

4.8.2.8. ng-cloak

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

4.8.2.10. ng-switch

4.8.2.11. ng-src

4.8.2.12. 其他常用指令

4.8.3. 常用事件指令

4.8.4. 第三方指令

相关文章