标签：作用 界面 dom 不显示 好的 fun direct ## 注意
### AngularJS
>AngularJS指的是angular1.x框架，Angular一般指的是2、4
##### angularjs是什么
angularjs是一个javascript framework，一个js的框架，帮助我们创建WebApplication
AngularJs是由谷歌公司创建，遵循MIT协议，开源开放。
网址：https://angularjs.org/
中文网：http://www.apjs.net/
中文社区：http://www.angularjs.cn/
cdn：www.bootcdn.cn/angular.js/
AngularJs这套js框架针对于SPA应用以及商业业务流程应用的开发具有特别的优势。
比较难学，学习途径比较陡峭，因为用到了很多的后台逻辑代码的思维
##### 适用和不适用的项目：
SPA（singel page app）应用：单页面应用 --路由机制
CRUD应用： 增加(Create)、查询(Retrieve)(重新得到数据)、更新(Update)和删除(Delete)，例如后台管理系统。购物车逻辑---数据双向绑定
不适用：
游戏、图形界面编辑器，这种频繁DOM操作也很复杂的应用
##### 版本介绍：
1.3版本是一个分水岭，最稳定的是1.5.4-1.5.8的版本，这个时候就更新的很少了，这里使用1.5.7版本
ps：ionic .，这个是要和angular配合使用的，因为angular并没有自己的一个样式组件，并且在移动端有很多水土不服的地方，于是，ionic横空出世把移动端一些个angular做的不好的地方全部克服掉，抢占了部分市场和用户。
##### angular的特性：
1. MVC模式 model view controller
2. 模块系统
3. 指令系统
4. 依赖注入
5. 数据双向绑定
##### angular缺点
1. 对dom操作支持较弱，当然也可以使用jq；
2. Html中过多指令、事件绑定的操作，耦合度较高
##### 为什么需要MVC,js模块化？
* 代码规模越来越大，切分职责是大势所趋
* 为了复用代码，很多逻辑都是一样的，封装
* 为了方便后期的维护，修改一块功能不影响其他功能
-----
# AngularJS第二课
### 安格拉小姐
类似于黄蓉 机灵古怪 侠骨丹心 善良 有脾气
##### 1.表达式：
1. ng-app 就是angular的一个入口，划分领域，只有在有ng-app属性的标签内部才可以进行表达式计算哟
并且每个项目或页面只能有一个入口，其他的不起作用
2. {{10+20}} ==》30 内部包含表达式来进行计算结果的显示，加减乘除都可以
3.
```
{{[0,1,2][2]}} ---》 2
```
```
{{{name:"kervin"}.name}}==>kerwin
```
angular的表达式很随意、自然，这样的写法也可以呈现
4. angualr应用只能有一个ng-app指令（注意，这个玩意属于一条指令，带ng-的就是指令哟,directive），也就说只有一个入口。
---
##### 2.表达式定义变量
```
{{‘myname‘}}==》myname 相当于定义一个字符串
{{myname}}==》不显示 相当于一个变量，因为没有值，所以不显示
{{myname =‘allen’}}==》allen 给变量赋值，所以显示了
```
但是这样好不爽啊，还是js去定义变量好玩~
其实还可以通过ng-init在指令作用域上定义变量
还有个小东西，大家发现表达式经常会出问题呀，有时候刷新页面的时候大括号会暴露出来，那么这个时候用ng-bind就可以咯
---
##### 3.控制器
1. 给ng-app赋值哟，不然js里找不到
2. angular.module("appName",[]);
获取主模块，第二个参数[]，代表依赖的模块，后面再说哟
3. html中定义一个controll ng-controller
4.
```
myapp.controller("myController",function($scope){
$scope.name="allen"
})
```
这样把数据挂到一个叫$scope的东西的身上，就可以{{name}}去用了
哇，666，这样就可以把变量搞到js里了
说到这里，来研究一下angular的MVC
**++M：model 数据模型 V：view 视图 C：controller 控制器++**
++**通过C把M和V联系了起来，就叫MVC模式**++
咱们上面的这个小东西
数据挂在$scope下。那么这个货就是个M
{{name}}这一块是要显示数据，那当然就是个V咯
那么通过controller把他们联系起来，那他理所当然就是个C咯
>比如去饭店吃夹肉饼，夹肉饼是数据，把肉饼吃到肚子里，那么肚子就是视图，那么什么是控制器呀，当然是钱咯，钱买来夹肉饼，把它送到肚子里，这，就是mvc的模式
那么$scope好像是函数里的形参，那咱们能乱改吗？不能！必须这么写，写什么，js就会给控制器下注入什么，别的angular不认识，只能注入咱们这个可爱的$scope了
**++这就是依赖注入的特性++**
咱们把$scope叫做一个作用域，就是咱们这个控制器的一个作用域，里面的数据只能在这个域里生存
控制器是可以写多个的，每个控制器里都可以绑定一些个数据
注意：只要html里写了controller，那么如果不在js里也去写一下的话，就会报错..
只要html里给ng-app起了名字，那么如果不在js里也去写一下的话，就会报错..
---
##### 4.作用域 action scope
controller可以嵌套，那么就会出现在里面的controller能用到外面controller绑定的数据 就像js函数套函数一样
就近原则，谁离得我进，我就找谁，啦啦啦~
这个时候里面定义的作用域$scope代表的就是局部作用域
angular有全局作用域么，当然有啦，就是$rootScope
可以注入到任何一个控制器的回调里，然后就可以
```
$rootScope.XX=XX；
```
如果多个控制器都注入了 $rootScope，并且挂的数据键一样，那么就按照代码执行顺序去覆盖
但是大家可能发现了哈，介个时候定义全局作用域下的变量的话需要控制器，如果我的项目中没有控制器怎么办，咱们可以把它用run来挂载
```
myapp.run(function($rootScope)){
$rootScope.aaa=123;
}）
```
5.ng-click
通过给控制器作用域内部的dom元素的标签上添加ng-click指令，去执行某个方法（在表达式内需要加{{}}，在标签的ng-属性里面不需要加哟）来改变数据，视图层的数据显示会马上发生变化，这就是angular的魅力所在。
那么有个疑问了，既然数据改变，视图改变，那我在控制器js里去添加一个seTimeout去改变数据，视图能改变吗？并不能！！数据确实可以改变，但是视图并不能改变，因为并咩有人去报信，通知视图去改变，那么这就尴尬了，刚才去ng-click报信，现在木有人报信了...
不怕，在setTimeout里改变数据后执行
```
$scope.$apply（）；
```
去报信，这个就可以了，那么这个执行了玩意是什么呢，专业名称叫脏数据检验，什么叫脏数据？数据改变了就叫数据脏了，啊哈哈哈哈哈，神奇。
不想这么做？可以，那就别用setTimeout这种原生方法，用$timeout，这是angualr提供的哟，注意要注入。
标签：作用 界面 dom 不显示 好的 fun direct ## 注意
原文地址：http://www.cnblogs.com/lrtblog/p/7875386.html
