angularJS

### AngularJS
>AngularJS指的是angular1.x框架，Angular通常指的是二、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提供的哟，注意要注入。