转载的关于AngularJs的总结
1前言
前端技术的发展是如此之快，各种优秀技术，优秀框架的出现简直让人目不暇接，紧跟时代潮流，学习掌握新知识自然是不敢怠慢。
AngularJS是谷歌在维护，其在国外已经十分火热，可是国内的使用情况却有不小的差距，参考文献/网络文章也很匮乏。这里便将我学习AngularJS写成文档，一方面作为自己学习路程上的记录，另一方面也给有兴趣的同学一些参考。
首先我自己也是一名学习者，会以学习者的角度来整理我的行文思路，这里可能只是些探索，有理解或是技术上的错误还请大家指出;其次我特别喜欢编写小例子来把一件事情说明白，故在文中会尽可能多的用示例加代码讲解，我相信这会是一种比较好的方式;最后，我深知AngularJS的使用方式跟的jquery的的使用方式有很大不同，在大家都有的jquery的，电话分机经验的条件下对于角的学习会困难重重，不过我更相信在大家的坚持下，能够快速的学好AngularJS，至少咱也能深入了解到AngularJS的基本思想，对咱们以后自己的插件开发，项目开发都会有很大的启示。
2 AngularJS概述
2.1 AngularJS是什么？
AngularJs（后面就简称NG了）是一个用于设计动态的网络应用的结构框架。首先，它是一个框架，不是类库，是像EXT一样提供一整套方案用于设计网络应用。它不仅仅是一个JavaScript的的框架，因为它的核心其实是对HTML标签的增强。
何为HTML标签增强其实就是使你能够用标签完成一部分页面逻辑，具体方式就是通过自定义标签，自定义属性等，这些HTML原生没有的标签/属性在NG中有一个名字：指令（指令）。后面会详细介绍。那么，什么又是动态的网络应用呢？与传统的网络系统相区别，网络应用能为用户提供丰富的操作，能够随用户操作不断更新视图而不进行URL跳转.ng官方也声明它更适用于开发CRUD应用，即数据操作比较多的应用，而非是游戏或图像处理类应用。
为了实现这些，NG引入了一些非常棒的特性，包括模板机制，数据绑定，模块，指令，依赖注入，路由。通过数据与模板的绑定，能够让我们摆脱繁琐的DOM操作，而将注意力集中在业务逻辑上。
源地址：https://blog.csdn.net/weixin_33178524/article/details/79179597
另外一个疑问，NG是MVC框架吗？还是MVVM框架？官网有提到纳克的设计采用了MVC的基本思想，而又不完全是MVC，因为在书写代码时我们确实是在用NG-控制器这个指令（起码从名字上看，是MVC吧），但这个控制器处理的业务基本上都是与图进行交互，这么看来又很接近MVVM让我们把目光移到官网那个非醒目的标题上：“AngularJS - 超级英雄JavaScript MVW框架”。
2.2 AngularJS简单介绍
AngularJS重新定义了前端应用的开发方式。面对HTML和JavaScript的之间的界线，它
非但不畏缩不前，反而正面出击，提出了有效的解决方案。
很多前端应用的开发框架，比如骨干，EmberJS等，都要求开发者继承此框架特有的一些JavaScript的的对象。这种方式有其长处，但它不必要地污染了开发者自己代码的对象空间，还要求开发者去了解内存里那些抽象对象。尽管如此我们还是接受了这种方式，因为网络最初的设计无法提供我们今天所需的交互性，于是我们需要框架，来帮我们填补JavaScript的HTML的和之间的鸿沟。而且有了它，你不用再“直接”操控DOM，只要给你的DOM注上的元数据（即AngularJS里的指令们），然后让AngularJS来帮你操纵DOM。同时，AngularJS不依赖（也不妨碍）任何其他的框架。你甚至可以基于其它的框架来开发AngularJS应用。
API地址：http：//docs.angularjs.org/api/ ;
AngularJS在github上的中文粗译版地址：https：//github.com/basestyle/angularjs-cn。
2.3什么时候该用AngularJS
AngularJS是一个MV *框架，最适合开发客户端的单页面应用。它不是个功能库，而是用来开发动态网页的框架。它专注于扩展HTML的功能，提供动态数据绑定（数据绑定） ，而且它能跟其它框架（如jQuery的）合作融洽。
如果你要开发的是单页应用，AngularJS就是你的上上之选.Gmail，Google Docs，Twitter和Facebook这样的应用，都很能发挥AngularJS的长处。但是像游戏开发之类对DOM进行大量操纵，又或者单纯需要极高运行速度的应用，就不是AngularJS的用武之地了。
3 AugularJS特性
AngularJS是一个新出现的强大客户端技术，提供给大家的一种开发强大应用的方式。这种方式利用并且扩展HTML，CSS和JavaScript的，并且弥补了它们的一些非常明显的不足。本应该使用HTML来实现而现在由它开发的动态一些内容。
AngularJS有五个最重要的功能和特性：
3.1特性一：双向的数据绑定
数据绑定可能是AngularJS最酷最实用的特性。它能够帮助你避免书写大量的初始代码从而节约开发时间。一个典型的网络应用可能包含了80％的代码用来处理，查询和监听DOM。数据绑定是的代码更少，你可以专注于你的应用。
我们想象一下模型是你的应用中的简单事实。你的模型是你用来读取或者更新的部分。数据绑定指令提供了你的模型投射到视图的方法。这些投射可以无缝的，毫不影响的应用到网络应用中。
传统来说，当模型变化了。开发人员需要手动处理DOM元素并且将属性反映到这些变化中。这个一个双向的过程。一方面，模型变化驱动了DOM中元素变化，另一方面，DOM元素的变化也会影响到模型。这个在用户互动中更加复杂，因为开发人员需要处理和解析
这些互动，然后融合到一个模型中，并且更新视图。这是一个手动的复杂过程，当一个应用非常庞大的时候，将会是一件非常费劲的事情。
这里肯定有更好的解决方案！那就是AngularJS的双向数据绑定，能够同步DOM和型号等等。
这里有一个非常简单的例子，用来演示一个输入输入框和
元素的双向绑定（例01）：
<！doctype html>
光引入还不够，我们还需在模块声明中注入对ngRoute的依赖，如下：
var app = angular.module('MyApp', ['ngRoute']);
完成了这些，我们就可以在模板或是controller中使用上面的服务和指令了。下面我们需要定义一个路由表。
第二步：定义路由表
$routeProvider提供了定义路由表的服务，它有两个核心方法，when(path,route)和otherwise(params)，先看一下核心中的核心when(path,route)方法。
when(path,route)方法接收两个参数，path是一个string类型，表示该条路由规则所匹配的路径，它将与地址栏的内容($location.path)值进行匹配。如果需要匹配参数，可以在path中使用冒号加名称的方式，如：path为/show/:name，如果地址栏是/show/tom，那么参数name和所对应的值tom便会被保存在$routeParams中，像这样：{name : tom}。我们也可以用*进行模糊匹配，如：/show*/:name将匹配/showInfo/tom。
route参数是一个object，用来指定当path匹配后所需的一系列配置项，包括以下内容：
l controller //function或string类型。在当前模板上执行的controller函数，生成新的scope；
l controllerAs //string类型，为controller指定别名；
l template //string或function类型，视图z所用的模板，这部分内容将被ngView引用；
l templateUrl //string或function类型，当视图模板为单独的html文件或是使用了
l resolve //指定当前controller所依赖的其他模块；
l redirectTo //重定向的地址。
最简单情况，我们定义一个html文件为模板，并初始化一个指定的controller：
function emailRouteConfig($routeProvider){
$routeProvider.when('/show', {
controller：ShowController，
templateUrl：'show.html'
}）。
当（ '/ PUT /：名称'，{
controller：PutController，
templateUrl：'put.html'
}）;
};
否则（PARAMS）方法对应路径匹配不到时的情况，这时候我们可以配置一个redirectTo参数，让它重定向到404页面或者是首页。
第三步：在主视图模板中指定加载子视图的位置
我们的单页面程序都是局部刷新的，那这个“局部”是哪里呢，这就轮到ngView出马了，只需在模板中简单的使用此指令，在哪里用，哪里就是“局部”。例如：
我们的子视图将会在此处被引入进来。完成这三步后，你的程序的路由就配置好了。
4.9.3路由示例
下面我们将用一个例子（例09）来说明路由的使用方式及步骤：
1.为demoApp添加一个路由，代码如下：
demoApp.config（['$ routeProvider'，function（$ routeProvider）{
$ routeProvider.when（'/ list'，{
templateUrl：'route / list.html'，
controller：'routeListController'
}）。when（'/ list /：id'，{
templateUrl：'route / detail.html'，
controller：'routeDetailController'
}）。除此以外（{
redirectTo：'/ list'
}）;
}]）;
/ list对应为：route / list.html页面，显示用户列表; / list /：id对应于route / detail.html页面，显示用户详细信息。
2.为list.html和detail.html分别声明控制器：routeListController和routeDetailController。
demoApp.controller（'routeListController'，function（$ scope）{
$ scope.users = [{userId：“zhangsan”，userName：“张三”，userInfo：“我是张三，我为自己带盐！”}，
{用户名： “丽丝”，用户名： “李四”，USERINFO： “我是李四，我为卿狂”}，
{用户名： “woshishui”，用户名： “我是谁”，USERINFO： “我是谁我是谁我是谁！！”}];
}）;
demoApp.controller（'routeDetailController'，function（$ scope，$ routeParams，userService）{
$ scope.userDetail = userService.getUser（$ routeParams.id）;
}）;
routeDetailController中如上面提到的一样，注入了userService服务，在这里直接拿来用。
3.创建list.html和detail.html页面，代码如下：
路线：List.html（用户列表页面）
-
路线：detail.html（用户详细信息页面）
用户名： {{userDetail.userName}}
<跨度>用户ID：{{userDetail.userId}} <跨度>用户名：{{userDetail.userName}}
用户简介：<跨度> {{userDetail.userInfo}}
4.路由局部刷新位置：
AngularJS路由（路线）示例
4.10 NG动画效果
4.10.1 NG动画效果简介
NG动画效果，现在可以通过CSS3或者是JS来实现，如果是通过JS来实现的话，需要其他JS库（比如JQuery的）来支持，实际上底层实现还是靠其他JS库，只是NG将其封装了，
使其更易使用。
NG动画效果包含以下几种：
- 输入：元素添加到DOM中时执行动画;
- 离开：元素从DOM删除时执行动画;
- 移动：移动元素时执行动画;
- beforeAddClass：在给元素添加类之前执行动画;
- addClass：在给元素添加类时执行动画;
- beforeRemoveClass：在给元素删除类之前执行动画;
- removeClass：在给元素删除CLASS时执行动画。
其相关参数为：
var ngModule = angular.module（'YourApp'，['ngAnimate']）;
demoApp.animation（'。my-crazy-animation'，function（）{
返回{
输入：function（element，done）{
//在此处运行动画，并在动画完成时调用done
返回功能（已取消）{
//动画时会调用此（可选）函数
//完成或取消动画时（取消动画）
如果取消，// flag将被设置为true）。
};
}，
离开：function（element，done）{}，
move：function（element，done）{}，
//在添加类之前可以触发的动画
beforeAddClass: function(element, className, done) { },
//animation that can be triggered after the class is added
addClass: function(element, className, done) { },
//animation that can be triggered before the class is removed
beforeRemoveClass: function(element, className, done) { },
//animation that can be triggered after the class is removed
removeClass: function(element, className, done) { }
};
});
4.10.2 动画效果示例
下面我们来看下DEMO中的例子（例10）。
1.首先，我们在demoApp下定义一个动画效果，匹配CLASS：” .border-animation”
/*定义动画*/
demoApp.animation('.border-animation', function(){
return{
beforeAddClass : function (element, className, done) {
$(element).stop().animate({
'border-width':1
},2000, function() {
done();
});
},
removeClass : function (element ,className ,done ) {
$(element).stop().animate({
'border-width':50
},3000, function() {
done();
});
}
};
});
动画效果的含义就是：在匹配CLASS为边界的动画的元素添加一个CLASS之前使其边框的宽度在2秒内变为1PX;并在其移除一个CLASS时使其边框的宽度在3秒内变为50像素。
2.视图中的代码如下（主要，其他相关样式请查看例子代码）：
NG-显示为假时会为其加上“NG隐藏“的CLASS; NG-显示为真时会为其移除“NG隐藏“的CLASS，从而触发动画效果。
3.其他代码：
demoApp.controller（“test10Controller”，function（$ scope，$ animate）{
$ scope.testShow = true;
}）;
5功能演示
略（详情请看AngularJS / demo WEB演示）
6 AngularJS进阶
6.1数据绑定原理研究
角用户都想知道数据绑定是怎么实现的你可能会看到各种各样的词汇：？$手表，$申请，$消化，脏检查......它们是什么它们是如何工作的呢？这里我想回答这些问题，其实它们在官方的文档里都已经回答了，但是我还是想把它们结合在一起来讲，但是我只是用一种简单的方法来讲解，如果要想了解技术细节，查看源代码。
6.1.1 AngularJS扩展事件循环
我们的浏览器一直在等待事件，比如用户交互。假如你点击一个按钮或者在输入框里输入东西，事件的回调函数就会在JavaScript的解释器里执行，然后你就可以做任何DOM操作，等回调函数执行完毕时，浏览器就会相应地对DOM做出变化。（记住，这是个重要的概念），为了解释什么是上下文以及它如何工作，我们还需要解释更多的概念。
6.1.2 $ watch队列
每次你绑定一些东西到你的DOM上时你就会往$看队列里插入一条$腕表。想象一下$手表就是那个可以检测它监视的模型里时候有变化的东西。例如你有如下的代码：
/ *查看index.html * /
用户：
密码：
在这里我们有个$ scope.user，他被绑定在了第一个输入框上，还有个$ scope.pass，它被绑定在了第二个输入框上，然后我们在$ watch list里面加入两个$手表。
再看下面的例子：
/ * Controller controllers.js * /
app.controller（'MainCtrl'，function（$ scope）{
$ scope.foo =“Foo”;
$ scope.world =“世界”;
}）;
/ *查看index.html * /
你好，世界 }}
这里，即便我们在$范围上添加了两个东西，但是只有一个绑定在了DOM上，因此在这里只生成了一个$手表。
再看下面的例子：
/ * Controller controllers.js * /
app.controller（'MainCtrl'，function（$ scope）{
$ scope.people = [...];
}）;
/ *查看index.html * /
-
{{person.name}} - {{person.age}}
这里又生成了多少个$watch呢？每个person有两个（一个name，一个age），然后ng-repeat又有一个，因此10个person一共是(2 * 10) +1,也就是说有21个$watch。
因此，每一个绑定到了DOM上的数据都会生成一个$watch。
那这写$watch是什么时候生成的呢？
当我们的模版加载完毕时，也就是在linking阶段（Angular分为compile阶段和linking阶段），Angular解释器会寻找每个directive，然后生成每个需要的$watch。
6.1.3 $digest循环
还记得我前面提到的扩展的事件循环吗？当浏览器接收到可以被angular context处理的事件时，$digest循环就会触发。这个循环是由两个更小的循环组合起来的。一个处理evalAsync队列，另一个处理$watch队列。 这个是处理什么的呢？$digest将会遍历我们的$watch，然后询问：
•嘿，$watch，你的值是什么？
◦是9。
•好的，它改变过吗？
◦没有，先生。
•（这个变量没变过，那下一个）
•你呢，你的值是多少？
◦报告，是Foo。
•刚才改变过没？
◦改变过，刚才是Bar。
•（很好，我们有DOM需要更新了）
•继续询问直到$watch队列都检查过。
这就是所谓的dirty-checking。既然所有的$watch都检查完了，那就要问了：有没有$watch更新过？如果有至少一个更新过，这个循环就会再次触发，直到所有的$watch都没有变化。这样就能够保证每个model都已经不会再变化。记住如果循环超过10次的话，它将会抛出一个异常，防止无限循环。当$digest循环结束时，DOM相应地变化。
例如：
/*Controller controllers.js */
app.controller（'MainCtrl'，function（）{
$ scope.name =“Foo”;
$ scope.changeFoo = function（）{
$ scope.name =“Bar”;
}
}）;
/ *查看index.html * /
{{ 名称 }}
这里我们有一个$手表因为NG单击不生成$腕表（函数是不会变的）。
我们可以看出NG的处理流程：
•我们按下按钮;
•浏览器接收到一个事件，进入角度上下文;
•$消化循环开始执行，查询每个$表是否变化;
•由于监视$ scope.name的$腕表报告了变化，它会强制再执行一次$消化循环;
•新的$消化循环没有检测到变化;
•浏览器拿回控制权，更新与$ scope.name新值相应部分的DOM。
这里很重要的是每一个进入角度上下文的事件都会执行一个$ digest循环，也就是说每次我们输入一个字母循环都会检查整个页面的所有$ watch。
6.1.4如何进入角度上下文
谁决定什么事件进入角度上下文，而哪些又不进入呢？通过$ apply！
如果当事件触发时，你调用$ apply，它会进入角度上下文，如果没有调用就不会进入。现在你可能会问：刚才的例子里我也没有调用$ apply啊，为什么？Angular已经做了！因此你点击带有NG点击的元素时，时间就会被封装到一个$应用调用。如果你有一个NG-模型= “富” 的输入框，然后你敲一个楼事件就会这样调用$ apply（“foo ='f';”）。
角什么时候不会自动为我们$申请呢？
这是Angular新手共同的痛处。为什么我的jQuery不会更新我绑定的东西呢？因为jQuery没有调用$ apply，事件没有进入angular context，$ digest循环永远没有执行。
我们来看一个有趣的例子：
假设我们有下面这个指令和控制。
/ *控制器app.js * /
app.directive（'clickable'，function（）{
返回{
限制：“E”，
范围： {
foo：'='，
吧：'='
}，
模板：'
- {{foo}}
- {{bar}} '，
link：function（scope，element，attrs）{
element.bind（'click'，function（）{
scope.foo ++;
scope.bar ++;
}）;
}
}
}）;
app.controller（'MainCtrl'，function（$ scope）{
$ scope.foo = 0;
$ scope.bar = 0;
}）;
它将FOO和酒吧从控制器里绑定到一个列表里面，每次点击这个元素的时候，富和酒吧都会自增1，那我们点击元素的时候会发生什么呢？我们能看到更新吗？答案是否定的。因为点击事件是一个没有封装到$应用里面的常见的事件，这意味着我们会失去我们的计数吗？不会。
真正的结果是：$ scope确实改变了，但是没有强制$ digest循环，监视foo和bar的$ watch没有执行。也就是说如果我们自己执行一次$ apply那么这些$ watch就会看见这些变化，然后根据需要更新DOM。
执行$适用：
element.bind（'click'，function（）{
scope.foo ++;
scope.bar ++;
。范围$适用（）;
}）;
$应用是我们的$范围（或者是direcvie里的链接函数中的范围）的一个函数，调用它会强制一次$消化循环（除非当前正在执行循环，这种情况下会抛出一个异常，这是我们不需要在那里执行$适用的标志）。
更好的使用$适用的方法：
element.bind（'click'，function（）{
scope。$ apply（function（）{
scope.foo ++;
scope.bar ++;
}）;
}）
有什么不一样的？差别就是在第一个版本中，我们是在angular context的外面更新的数据，如果有发生错误，Angular永远不知道。很明显在这个像个小玩具的例子里面不会出什么大错，但是想象一下我们如果有个警示框显示错误给用户，然后我们有个第三方的库进行一个网络调用然后失败了，如果我们不把它封装进$应用里面，角永远不会知道失败了，警报框就永远不会弹出来了。
因此，如果你想使用一个jQuery的插件，并且要执行$消化循环来更新你的DOM的话，要确保你调用了$适用。
有时候我想多说一句的是有些人在不得不调用$申请时会“感觉不妙”，因为他们会觉得他们做错了什么。其实不是这样的，角不是什么魔术师，他也不知道第三方库想要更新绑定的数据。
6.1.5使用$表来监视
你已经知道了我们设置的任何绑定都有一个它自己的$手表，当需要时更新DOM，但是我们如果要自定义自己的手表呢简单，来看个例子？
/ *控制器app.js * /
app.controller（'MainCtrl'，function（$ scope）{
$ scope.name =“Angular”;
$ scope.updated = -1;
$ scope。$ watch（'name'，function（）{
$ scope.updated ++;
}）;
}）;
/ *查看index.html * /
名称已更新：{{updated}}次。
这就是我们创造一个新的$表的方法。第一个参数是一个字符串或者函数，在这里是只是一个字符串，就是我们要监视的变量的名字，在这里，$ scope.name（注意我们只需要
用名）。第二个参数是当$看说我监视的表达式发生变化后要执行的。我们要知道的第一件事就是当控制器执行到这个$表时，它会立即执行一次，因此我们设置更新为-1。
例子2：
/ *控制器app.js * /
app.controller（'MainCtrl'，function（$ scope）{
$ scope.name =“Angular”;
$ scope.updated = 0;
$ scope。$ watch（'name'，function（newValue，oldValue）{
if（newValue === oldValue）{return; } // AKA首次运行
$ scope.updated ++;
}）;
}）;
/ *查看index.html * /
名称已更新：{{updated}}次。
看的第二个参数接受两个参数，新值和旧值。我们可以用他们来略过第一次的执行。通常你不需要略过第一次执行，但在这个例子里面你是需要的。
例子3：
/ *控制器app.js * /
app.controller（'MainCtrl'，function（$ scope）{
$ scope.user = {name：“Fox”};
$ scope.updated = 0;
$ scope。$ watch（'user'，function（newValue，oldValue）{
if（newValue === oldValue）{return; }
$ scope.updated ++;
}）;
}）;
/ *查看index.html * /
名称已更新：{{updated}}次。
我们想要监视$ scope.user对象里的任何变化，和以前一样这里只是用一个对象来代替前面的字符串。
呃？没用，为啥？因为$观看默认是比较两个对象所引用的是否相同，在例子1和2里面，每次更改$ scope.name都会创建一个新的基本变量，因此$手表会执行，因为对这个变量的引用已经改变了。在上面的例子里，我们在监视$ scope.user，当我们改变$ scope.user.name时，对$ scope.user的引用是不会改变的，我们只是每次创建了一个新的$ scope.user.name，但是$ scope.user永远是一样的。
例子4：
/ *控制器app.js * /
app.controller（'MainCtrl'，function（$ scope）{
$ scope.user = {name：“Fox”};
$ scope.updated = 0;
$ scope。$ watch（'user'，function（newValue，oldValue）{
if（newValue === oldValue）{return; }
$ scope.updated ++;
，真实）;
}）;
/ *查看index.html * /
名称已更新：{{updated}}次。
现在有用了吧！因为我们对$手表加入了第三个参数，它是一个布尔类型的参数，表示的是我们比较的是对象的值而不是引用。由于当我们更新$ scope.user.name时$ scope.user也会改变，所以能够正确触发。
6.1.6总结
我希望你们已经学会了在角中数据绑定是如何工作的。我猜想你的第一印象是脏检查很慢，好吧，其实是不对的。它像闪电般快。但是，如果你在一个模版里有2000-3000个手表，它会开始变慢。但是我觉得如果你达到这个数量级，就可以找个用户体验专家咨询一下了。
无论如何，随着ECMAScript6的到来，在折角未来的版本里我们将会有Object.observe那样会极大改善消化$循环的速度。
6.2自定义指令详解
角度的指令机制.angular通过指令的方式实现了HTML的扩展，增强后的HTML不仅长相焕然一新，同时也获得了很多强大的技能。更厉害的是，你还可以自定义指令，这就意味着HTML标签的范围可以扩展到无穷大.angular赋予了你造物主的能力。既然是作为角度的精华之一，相应的指令相关的知识也很多的。
6.2.1指令的编译过程
在开始自定义指令之前，我们有必要了解一下指令在框架中的执行流程：
1.浏览器得到HTML字符串内容，解析得到DOM结构。
2.ng引入，把DOM结构扔给$ compile函数处理：
①找出DOM结构中有变量占位符;
②匹配找出DOM中包含的所有指令引用;
③把指令关联到DOM;
④关联到DOM的多个指令按权重排列;
⑤执行指令中的编译函数（改变DOM结构，返回链接函数）;
⑥得到的所有链接函数组成一个列表作为$ compile函数的返回。
3.执行link函数（连接模板的范围）。
这里注意区别一下$编译和编译，前者是NG内部的编译服务，后者是指令中的编译函数，两者发挥作用的范围不同.compile和链接函数息息相关又有所区别，这个在后面会讲。了解执行流程对后面的理解会有帮助。
在这里有些人可能会问，角不就是一个JS框架吗，怎么还能跟编译扯上呢，又不是像C ++那样的高级语言。其实此编译非彼编译，NG编译的工作是解析指令，绑定监听器，替换模板中的变量等。因为工作方式很像高级语言编辑中的递归，堆栈过程，所以起名为编译，不要疑惑。
6.2.2指令的使用方式及命名方法
指令的几种使用方式如下：
- 作为标签：<我-DIR>
- 作为属性：
- 作为注释：<！ - directive：my-dir exp - >
- 作为类名：
其实常用的就是作为标签和属性，下面两种用法目前还没见过，感觉就是用来卖萌的，姑且留个印象。我们自定义的指令就是要支持这样的用法。
关于自定义指令的命名，你可以随便怎么起名字都行，官方是推荐用[命名空间 - 指令名称]。这样的方式，像纳克控制器不过你可千万不要用NG-前缀了，防止与。系统自带的指令重名另外一个需知道的地方，指令命名时用驼峰规则，使用时用 - 分割各单词如：定义myDirective，使用时像这样：<我的指导性>。
6.2.3自定义指令的配置参数
下面是定义一个标准指令的示例，可配置的参数包括以下部分：
myModule.directive（'namespaceDirectiveName'，function factory（injectables）{
var directiveDefinitionObject = {
restrict：string，//指令的使用方式，包括标签，属性，类，注释
priority：number，//指令执行的优先级
template: string,//指令使用的模板，用HTML字符串的形式表示
templateUrl: string,//从指定的url地址加载模板
replace: bool,//是否用模板替换当前元素，若为false，则append在当前元素上
transclude: bool,//是否将当前元素的内容转移到模板中
scope: bool or object,//指定指令的作用域
controller: function controllerConstructor($scope, $element, $attrs, $transclude){...},//定义与其他指令进行交互的接口函数
require: string,//指定需要依赖的其他指令
link: function postLink(scope, iElement, iAttrs) {...},//以编程的方式操作DOM，包
括添加监听器等
compile: function compile(tElement, tAttrs, transclude){
return: {
pre: function preLink(scope, iElement, iAttrs, controller){...},
post: function postLink(scope, iElement, iAttrs, controller){...}
}
}//编程的方式修改DOM模板的副本，可以返回链接函数
};
return directiveDefinitionObject;
}）;
看上去好复杂的样子，定义一个指令需要这么多步骤嘛？当然不是，你可以根据自己的需要来选择使用哪些参数。事实上优先和编译用的比较少，模板和templateUrl又是互斥的，两者选其一即可所以不必紧张，接下来分别学习一下这些参数：
l指令的表现配置参数：restrict，template，templateUrl，replace，transclude;
l指令的行为配置参数：compile和link;
l指令划分作用域配置参数：scope;
l指令间通信配置参数：controller和require。
6.2.3指令的表现参数限制等
指令的表现配置参数：限制，模板，templateUrl，更换，transclude。
我将先从一个简单的例子开始。
例子的代码如下：
var app = angular.module（'MyApp'，[]，function（）{console.log（'here'）}）;
app.directive（ '的sayHello'，函数（）{
返回{
限制：'E'，
模板：'
你好'};
}）
然后在页面中，我们就可以使用这个名为sayHello的的指令了，它的作用就是输出一个招呼单词像这样使用：
<发言权问候>
这样页面就会显示出你好了，看一下生成的代码：
<说问候>
你好稍稍解释一下我们用到的两个参数，restirct用来指定指令的使用类型，其取值及含义如下：
取值
含义
使用示例
Ë
标签
一个
属性
C
类
中号
注释
<！ - directive：my-menu Products - >
默认值是A.也可以使用这些值的组合，如EA，EC等等我们这里指定为E，那么它就可以像标签一样使用了如果指定为A，我们使用起来应该像这样。：
从生成的代码中，你也看到了模板的作用，它就是描述你的指令长什么样子，这部分内容将出现在页面中，即该指令所在的模板中，既然是模板中，模板的内容中也可以使用NG-MODLE等其他指令，就像在模板中使用一样。
在上面生成的代码中，我们看到了
你好外面还包着一层<说问候>标签，如果我们不想要这一层多余的东西了，则更换就派上用场了，在配置中将取代赋值为真，将得到如下结构：你好)，或者哪些元素本身就是个指令(如替代的作用正如其名，将指令标签替换为了寺庙中定义的内容。不写的话默认为假。
上面的模板未免也太简单了，如果你的模板HTML较复杂，如自定义一个UI组件指令，难道要拼接老长的字符串？当然不需要，此时只需用templateUrl便可解决问题。你可以将指令的模板单独命名为一个HTML文件，然后在指令定义中使用templateUrl指定好文件的路径即可，如：
templateUrl：'helloTemplate.html'
系统会自动发一个http请求来获取到对应的模板内容。是不是很方便呢，你不用纠结于拼接字符串的烦恼了。如果你是一个追求完美的有考虑性能的工程师，可能会发问：那这样的话岂不是要牺牲一个http请求？这也不用担心，因为ng的模板还可以用另外一种方式定义，那就是使用
你可以把这段代码写在页面头部，这样就不必去请求它了。在实际项目中，你也可以将所有的模板内容集中在一个文件中，只加载一次，然后根据id来取用。
接下来我们来看另一个比较有用的配置：transclude，定义是否将当前元素的内容转移到模板中。看解释有点抽象，不过亲手试试就很清楚了，看下面的代码（例06）：
app.directive('sayHello',function(){
return {
restrict : 'E',
template : '
hello，',replace : true,
transclude : true
};
})
指定了transclude为true，并且template修改了一下，加了一个标签，并在上面使用了ng-transclude指令，用来告诉指令把内容转移到的位置。那我们要转移的内容是什么呢？请看使用指令时的变化：
美女 内容是什么你也看到了哈~在运行的时候，美女将会被转移到标签中，原来此配置的作用就是——乾坤大挪移！看效果：
hello, 美女！
这个还是很有用的，因为你定义的指令不可能老是那么简单，只有一个空标签。当你需要对指令中的内容进行处理时，此参数便大有可用。
6.2.4指令的行为参数：compile和link
6.2.3中简单介绍了自定义一个指令的几个简单参数，restrict、template、templateUrl、replace、transclude，这几个理解起来相对容易很多，因为它们只涉及到了表现，而没有涉及行为。我们继续学习ng自定义指令的几个重量级参数：compile和link
l 理解compile和link
不知大家有没有这样的感觉，自己定义指令的时候跟写jQuery插件有几分相似之处，都是先预先定义好页面结构及监听函数，然后在某个元素上调用一下，该元素便拥有了特殊的功能。区别在于，jQuery的侧重点是DOM操作，而ng的指令中除了可以进行DOM操作外，更注重的是数据和模板的绑定。jQuery插件在调用的时候才开始初始化，而ng指令在页面加载进来的时候就被编译服务($compile)初始化好了。
在指令定义对象中，有compile和link两个参数，它们是做什么的呢？从字面意义上看，编译、链接，貌似太抽象了点。其实可大有内涵，为了在自定义指令的时候能正确使用它们，现在有必要了解一下ng是如何编译指令的。
l 指令的解析流程详解
我们知道ng框架会在页面载入完毕的时候，根据ng-app划定的作用域来调用$compile服务进行编译，这个$compile就像一个大总管一样，清点作用域内的DOM元素，看看哪些元素上使用了指令(如
)，或者使用了插值指令( {{}}也是一种指令，叫interpolation directive)，$compile大总管会把清点好的财产做一个清单，然后根据这些指令的优先级(priority)排列一下，真是个细心的大总管哈~大总管还会根据指令中的配置参数(template，place，transclude等)转换DOM，让指令“初具人形”。 然后就开始按顺序执行各指令的compile函数，注意此处的compile可不是大总管$compile，人家带着$是土豪，此处执行的compile函数是我们指令中配置的，compile函数中可以访问到DOM节点并进行操作，其主要职责就是进行DOM转换，每个compile函数执行完后都会返回一个link函数，这些link函数会被大总管汇合一下组合成一个合体后的link函数，为了好理解，我们可以把它想象成葫芦小金刚，就像是进行了这样的处理。
//合体后的link函数
function AB(){
A(); //子link函数
B(); //子link函数
}
接下来进入link阶段，合体后的link函数被执行。所谓的链接，就是把view和scope链接起来。链接成啥样呢？就是我们熟悉的数据绑定，通过在DOM上注册监听器来动态修改scope中的数据，或者是使用$watchs监听 scope中的变量来修改DOM，从而建立双向绑定。由此也可以断定，葫芦小金刚可以访问到scope和DOM节点。
不要忘了我们在定义指令中还配置着一个link参数呢，这么多link千万别搞混了。那这
个链接函数是干嘛的呢，我们不是有葫芦小金刚了嘛？那我告诉你，其实它是一个小三。此话怎讲？编译函数执行后返回的链接函数，但若没有配置编译函数呢？葫芦小金刚自然就不存在了。
正房不在了，当然就轮到小三出马了，大总管$编译就把这里的链接函数拿来执行。这就意味着，配置的链接函数也可以访问到的范围以及DOM节点。值得注意的是，编译函数通常是不会被配置的，因为我们定义一个指令的时候，大部分情况不会通过编程的方式进行DOM操作，而更多的是进行监听器的注册，数据的绑定。所以，小三名正言顺的被大总管宠爱。
听完了大总管，葫芦小金刚和小三的故事，你是不是对指令的解析过程比较清晰了呢？不过细细推敲，你可能还是会觉得情节生硬，有些细节似乎还是没有透彻的明白，所以还需要再理解下面的知识点：
l compile和link的区别
其实在我看完官方文档后就一直有疑问，为什么监听器，数据绑定不能放在编译函数中，而偏偏要放在链接函数中？为什么有了编译还需要链接？就跟你质疑我编的故事一样，为什么最后小三被宠爱了？所以我们有必要探究一下，编译和链接之间到底有什么区别。好，正房与小三的PK现在开始。
首先是性能举个例子：
-
我们的观察目标是NG-重复指令。假设一个前提是不存在的链接。大总管$编译在编译这段代码时，会查找到NG-重复，然后执行它的编译函数，编译函数根据数组的长度复制出ñ个
- 标签。而复制出的
- 节点中还有<输入>节点并且使用了NG-MODLE指令，所以编译还要扫描它并匹配指令，然后绑定监听器。每次循环都做如此多的工作。而更加糟糕的一点是，我们会在程序中向阵列中添加元素，此时页面上会实时更新DOM，每次有新元素进来，编译函数都把上面的步骤再走一遍，岂不是要累死了，这样性能必然不行。
现在扔掉那个假设，在编译的时候编译就只管生成DOM的事，碰到需要绑定监听器的地方先存着，有几个存几个，最后把它们汇总成一个链接函数，然后一并执行。这样就轻松多了，编译只需要执行一次，性能自然提升。
另外一个区别是能力。
尽管编译和链接所做的事情差不多，但它们的能力范围还是不一样的。比如正房能管你的存款，小三就不能。小三能给你初恋的感觉，正房却不能。
我们需要看一下编译函数和链接函数的定义：
函数compile（tElement，tAttrs，transclude）{...}
功能链接（范围，iElement，iAttrs，控制器）{...}
这些参数都是通过依赖注入而得到的，可以按需声明使用。从名字也容易看出，两个函数各自的职责是什么，编译可以拿到transclude，允许你自己编程管理乾坤大挪移的行为。而链接中可以拿到范围和控制器，可以与范围进行数据绑定，与其他指令进行通信。两者虽然都可以拿到元件，但是还是有区别的，看到各自的前缀了吧？编译拿到的是编译前的，是从模板里拿过来的，而链接拿到的是编译后的，已经与作用域建立了
关联，这也正是链路中可以进行数据绑定的原因。
我暂时只能理解到这个程度了实在不想理解这些知识的话，只要简单记住一个原则就行了。如果指令只进行DOM的修改，不进行数据绑定，那么配置在编译函数中，如果指令要进行数据绑定，那么配置在链接函数中。
6.2.5指令的划分作用域参数：范围
我们在上面写了一个简单的<说问候> ，能够跟美女打招呼但是看看人家纳克内置的指令，都是这么用的：NG-模型=” M”，NG- repeat =“a in array”，不单单是作为属性，还可以赋值给它，与作用域中的一个变量绑定好，内容就可以动态变化了。假如我们的sayHello可以这样用：
为了实现这样的功能，我们需要使用范围参数，下面来介绍一下。
使用范围为指令划分作用域
顾名思义，范围肯定是跟作用域有关的一个参数，它的作用是描述指令与父作用域的关系，这个父作用域是指什么呢想象一下我们使用指令的场景，页面结构应该是这个样子？
美女 外层肯定会有一个控制器，而在控制器的定义中大体是这个样子：
var app = angular.module（'MyApp'，[]，function（）{console.log（'here'）}）;
app.controller（ 'TESTC'，函数（$范围）{
$ scope.content ='今天天气真好！';
}）;
所谓的sayHello的父作用域就是这个名叫TESTC的控制器所管辖的范围，指令与父作用域的关系可以有如下取值：
取值
说明
假
默认值。使用父作用域作为自己的作用域
真正
新建一个作用域，该作用域继承父作用域
JavaScript的对象
与父作用域隔离，并指定可以从父作用域访问的变量
乍一看取值为假和真好像没什么区别，因为取值为真时会继承父作用域，即父作用域中的任何变量都可以访问到，效果跟直接使用父作用域差不多。但细细一想还是有区别的，有了自己的作用域后就可以在里面定义自己的东西，与跟父作用域混在一起是有本质上的区别。好比是父亲的钱你想花多少花多少，可你自己挣的钱父亲能花多少就不好说了。你若想看这两个作用域的区别，可以在连接函数中打印出来看看，还记得链接函数中可以访问到的范围吧。
最有用的还是取值为第三种，一个对象，可以用键值来显式的指明要从父作用域中使用属性的方式。当范围值为一个对象时，我们便建立了一个与父层隔离的作用域，不过也不是完全隔离，我们可以手工搭一座桥梁，并放行某些参数我们要实现对美女说各种话就得靠这个使用起来像这样。：
范围： {
attributeName1：'BINDING_STRATEGY'，
attributeName2：'BINDING_STRATEGY'，...
}
键为属性名称，值为绑定策略。等等！啥叫绑定策略？最讨厌冒新名词却不解释的行为！别急，听我慢慢道来。
先说属性名称吧，你是不是认为这个ATTRIBUTENAME1就是父作用域中的某个变量名称？错！其实这个属性名称是指令自己的模板中要使用的一个名称，并不对应父作用域中的变量，稍后的例子中我们来说明再来看绑定策略，它的取值按照如下的规则：
符号
说明
举例
@
传递一个字符串作为属性的值
str：'@string'
=
使用父作用域中的一个属性，绑定数据到指令的属性中
名称：'=用户名'
＆
使用父作用域中的一个函数，可以在指令中调用
getName：'＆getUserName'
总之就是用符号前缀来说明如何为指令传值。你肯定迫不及待要看例子了，我们结合例子看一下，小二，上栗子〜
举例说明
我想要实现上面想像的跟美女多说点话的功能，即我们给sayHello指令加一个属性，通过给属性赋值来动态改变说话的内容主要代码如下：
app.controller（ 'TESTC'，函数（$范围）{
$ scope.content ='今天天气真好！';
}）;
app.directive（ '的sayHello'，函数（）{
返回{
限制：'E'，
模板：'
你好， ，{{cont}} '，替换：true，
转录：是的，
范围 ： {
cont：'=发言'
}
};
}）;
然后在模板中，我们如下使用指令：
美女 看看运行效果：
美女今天天气真好！
执行的流程是这样的：
①指令被编译的时候会扫描到模板中的{{cont}}，发现是一个表达式;
②查找范围中的规则：通过说与父作用域绑定，方式是传递父作用域中的属性;
③说与父作用域中的内容属性绑定，找到它的值“今天天气真好！”;
④将内容的值显示在模板中。
这样我们说话的内容的内容就跟父作用域绑定到了一其，如果动态修改父作用域的内容的值，页面上的内容就会跟着改变，正如你点击“换句话”所看到的一样。
这个例子也太小儿科了吧简单虽简单，但可以让我们理解清楚，为了检验你是不是真的明白了，可以思考一下如何修改指令定义，能让sayHello的以如下两种方式使用！
美女
美女
答案我就不说了，简单的很。下面有更重要的事情要做，我们说好了要写一个真正能用的东西来着。接下来就结合所学到的东西来写一个折叠菜单，即点击可展开，再点击一次就收缩回去的菜单。
控制器及指令的代码如下（例07）：
app.controller（ 'TESTC'，函数（$范围）{
$ scope.title ='个人简介';
$ scope.text ='大家好，我是一名前端工程师，我正在研究AngularJs，欢迎大家与我交流';
}）;
app.directive（ '膨胀'，函数（）{
返回{
限制：'E'，
templateUrl：'expanderTemp.html'，
替换：true，
转录：是的，
范围 ： {
mytitle：'= etitle'
}，
link：function（scope，element，attris）{
scope.showText = false;
scope.toggleText = function（）{
scope.showText =！scope.showText;
}
}
};
}）;
HTML中的代码如下：
你可能感兴趣的:(angularjs)