angularJs的四大特性

有时候，我们追寻更多的东西时候，却忘了我们已经拥有的一切。

使用一个框架的时候，我们首先需要了解的就是一个框架的核心特性及使用的优缺点，在我们谈到Jquery，马上想到的核心概念是选择器，谈到react，首先想到的核心概念是Virtual DOM，可谈到angularJs 呢，不得不说angularJs概念有点多。

下面介绍angularJs的四大特性。

1. MVC ( Model - Controller - View)

通过上图，可直观的看到MVC三层。

2. Module（模块）

注意 : 一切都是从模块开始的，我们使用angularJs的时候，一定要先想到模块，所有的东西都是建立在模块基础上。

3. 指令

指令是angularJs里面最复杂的一部分，下面看一个实例:

(1).restrict

取值有：E(元素),A(属性),C(类),M(注释)，其中默认值为A；

E(元素)：

A(属性)：

C(类)：

M(注释)：

(2).scope

可选参数，（布尔值或者对象）默认值为false，可能取值：

a. 默认值false。表示继承父作用域;

b. true 表示继承父作用域，并创建自己的作用域（子作用域）;

c.{} 表示创建一个全新的隔离作用域；

当scope为{}时候有三种绑定策略

.&父作用域绑定，通过&符号可以对父级作用域进行绑定，以遍在其中运行函数，意味着对这个值进行设置时会生成一个指向父级作用域的包装函数

.@本地作用域属性，使用@将本地作用域同DOM属性的值进行绑定。

.=通过=可以将本地作用域上的属性同父级作用域上的属性进行双向的数据绑定。就像普通的数据绑定一样，本地属性会反映出父数据模型中所发生的改变

（3）.link

链接函数负责将作用域和DOM进行链接。若指令中定义有require选项，则link函数会有第四个参数，代表控制器或者所依赖的指令的控制器

（4）.Anguar的指令编译过程

1.首先加载angularjs库，查找到ng-app指令，从而找到应用的边界，根据ng-app划定的作用域来调用$compile服务进行编译。

2.angularjs会遍历整个HTML文档，并根据js中指令的定义来处理在页面上声明的各个指令。

3.按照指令的优先级(priority)排列，根据指令中的配置参数(template，place，transclude等)转换DOM。

4.按顺序执行各指令的compile函数（如果指令上有定义compile函数）对模板自身进行转换。

5.每个compile函数执行完后都会返回一个link函数，所有的link函数会合成一个大的link函数，然后这个大的link函数就会被执行，主要做数据绑定。

所以：在指令中compile与link选项是互斥的，如果同时设置了这两个选项，那么就会把compile所返回的函数当做是链接函数，而link选项本身就会被忽略掉。

4. 双向数据绑定

所谓的双向绑定，无非是从界面的操作能实时反映到数据，数据的变更能实时展现到界面，典型的MVVM。

觉得本文对你有帮助？请分享给更多人

关注「前端程序猿干货」，提升前端技能