angular.js （二）
## 流行框架第二天
### Angular VS jQuery
- jQuery:库
+ 封装了一些常用的方法，我们主动调用这些方法
- Angular:框架
+ 框架提供了一些结构或者模式，
+ 我们按照框架提供的规则去写代码
+ 然后由框架自己去执行相应的操作
- 思想上:
jQuery: 提高了dom操作的开发效率。
Angular: 不提倡dom操作，几乎没有dom操作(底层还是操作的dom)
+ angular中操作dom `angular.element()` ,叫做jqLite
### angular.element
- 轻量级的jQuery,
*注意：在获取dom对象时传入的参数是一个原生dom对象*
### 复习并总结Angular开发流程
0.通过npm/bower/暴力的方式/cdn 拿到想到angular.js文件。
1.在HTML代码中引入angular.js这个文件
2.在HTML代码上加上ng-app指令，告诉angular来管理我们的代码，这个指令只能使用一次
3.在JS代码中通过`angular.module('模块名',[])`创建一个模块，然后在HTML中的ng-app指令指定一下模块名'ng-app="模块名"'
4. 在JS代码中创建控制器`xxx.controller('控制器的名字',function(){})`,在HTML代码中通过ng-controller指令由我们当前的控制器来管理数据模型`ng-controller="控制器的名字"`
5. 建模（根据页面原型抽象出数据模型）, 最终得到视图模型(ViewModel)
6. 通过`$scope`来暴露页面上所需要使用的一些数据
7. 在HTML代码中通过`ng-model/ng-click/{{}}` 将刚刚暴露的数据绑定到页面上去
8. 在JS中写一些具体业务相关的代码
### 复习MVC
- MVC是一种设计思想,它是约定了程序的结构应该是怎么。
- 每一个组成原件都会有一个明确的职责。
- 提高代码的结构和可维护性(代码的执行效率肯定是不会提高的，10行代码，会分到10个不同的方法。);
### $scope
- 视图和控制器之间的数据桥梁
- 用于在视图和控制器之间传递数据
- 用来暴露数据模型（数据，行为）
### ViewModel
- $scope 实际上就是MVVM中所谓的VM（视图模型）
- 正是因为$scope在Angular中大量使用甚至盖过了C（控制器）的概念，所以很多人（包括我）把Angular称之为MVVM框架
- 这一点倒是无所谓，具体看怎么用罢了
## 模块
### 模块的创建
> 通过`anuglar.mdoule()`方法来创建模块.
*注意,如果传入两个参数就是去创建模块，如果只传入第一个参数，就会变成获取模块。*
### 模块的划分式
#### 1.根据项目中具体的功能去划分模块
#### 2.根据具体的文件功能的类型去划分模块
## 控制器的创建方式
### 传统的方式创建控制器(不推荐使用这种方式)
```javascript
// 通过全局函数来创建控制器
// angular会把我们创建的全局函数作为控制器使用
function demoController($scope){
$scope.name='小明';
}
```
### 面向对象的方式创建控制器
```html
<div ng-controller="demoController as obj ">
{{obj.name}}
{{age}}
</div>
<!-- 1.引入angular.js文件 -->
<script src="node_modules/angular/angular.js"></script>
<script>
// 3.创建模块
var app =angular.module('myApp',[]);
// 4.创建控制器
app.controller('demoController',function($scope){
// 可以当作构造函数来使用
this.name="小明";
$scope.age=12;
})
</script>
```
### 安全的创建控制器的方式
- 原因：angular在控制器的回调函数中是通过参数名来传递参数的。
- 通过将第二个参数改为数据组：数据的最后一个参数还是原来的fucntion,数据前的参数是我们想要anuglar传递的参数的字符串形式，fucntion里的参数需要与数组前面的元素一对应。
`app.controller('demoController',['$scope','$log',function($scope,$log){}])`
### 依赖注入的原理
- 核心是toString()
- 获取函数形参的方式
### 指令
- 在 AngularJS 中将前缀为 ng- 这种属性称之为指令，其作用就是为 DOM 元素调用方法、定义行为绑定数据等
- 简单说：当一个 Angular 应用启动，Angular 就会遍历 DOM 树来解析 HTML，根据指令不同，完成不同操作
- ng-bind
+ 用来解决表达式闪烁问题
+ `<p ng-bind="数据模型"></p>`
*注意：只能够在双标签中使用ng-bind指令*
- ng-cloak
+ 用来解决表达式闪烁问题
+ `<p class="ng-cloak">{{name}}</p>`
+ 利用angular在加载会移除页面上所以名为ng-cloak的样式名的特性。
- ngSanitize模块
`npm install angular-sanitize`
+ 使用的是ng-bind-html指令来渲染数据模型。
- ng-repeat
+ 可以用来循环输出数组
+ 写在哪个元素上就是循环哪个元素。
+ 语法：类似于forin 循环
> `<div ng-repeat="item in data ">{{item}}</div>`
+ track by $index 解决数组中数据有重得的问题
+ `<li ng-repeat="item in tesData track by $index"></li>`
+ 还可以用来渲染key,value对
+ ng-repeat 在遍历里会暴露一些数据模型,
- $even:提供了一个布尔值，当为true时表示当前数据是第偶数条数据,从索引0开始计算
- $odd:提供了一个布尔值，当为true时表示当前数据是第奇数条数据,从索引0开始计算
- $first,$last ,$middle
ng-class:
+ 从多种样式中选择一个样式
- 语法：类似于从一个key,value对象中获取其中一个属性的值
- ng-class="{'A':'red','B':'blue','C':'green'}"
+ 从多种样式中选择多个
- 语法：也是写一个key,value对象，这里的key是我们提供的类样式名，value是一个布尔值，为true时对应的key会被作为样式名加入到class中
ng-hide/ng-show
- ng-hide：需要一个布尔值：当为true时为隐藏当前元素
- ng-show: 需要一个布尔值：当为true时为显示当前元素
ng-if:需要一个布尔值：当为true时为显示当前元素
为false时是删除当前元素
ng-switch:与ng-switch-when同用，类似与js中的switch case
```html
<div ng-switch="name">
<div ng-switch-when="小明">我是小明</div>
<div ng-switch-when="小红">我是小红</div>
<div ng-switch-when="小月">我是小月</div>
</div>
```
### 其他常用指令
- ng-checked：
+ 单选/复选是否选中,是单向数据绑定
- ng-selected：
+ 是否选中
- ng-disabled：
+ 是否禁用
- ng-readonly：
+ 是否只读
### 常用事件指令
不同于以上的功能性指令，Angular还定义了一些用于和事件绑定的指令：
- ng-blur：失去焦点
- ng-focus：获得焦点
- ng-change：改变事件
- ng-copy：复制事件
- ng-click： ng-click="add()"
- ng-dblclick：双击事件
- ng-submit： 表单提交事件
### 指令的标准使用方式
data-xxx,在使用angular指令时，只需要在原先的指令前加上data-前缀。
x-
