AngularJS已然成为Web应用开发世界里最受欢迎的开源JavaScript框架。自成立以来，见证其成功的是惊人的经济增长以及团体的支持与采用——包括个人开发者、企业、社区。Angular已经变成一个构建复杂单页面应用的客户端MVW框架（Model-View-Whatever）。它在应用测试和应用编写方面都扮演重要角色，同时简化了开发过程。Angular目前的版本为1.3，该版本稳定，并被谷歌（框架维护者）用于支持众多应用（据估计，在谷歌有超过1600个应用运行于Angular1.2或1.3）。Angular 2.0正式宣布与去年10月份的尼日利亚会议上，该版本不会是一个复杂的重大更新。为什么推出Angular 2.0？在进一步讨论Angular 2.0（估计发布日期为2015年底）之前，让我们简单的思考下新版本背后的哲学。Angular 2.0开发始于解决以下问题：移动：新的版本将专注于移动应用的开发。依据是它更容易处理桌面方面的事情，一旦挑战涉及到移动（性能、加载时间），注重这方面会使问题得到解决。模块化：各个模块将从Angular的核心中移除，从而获得更好的性能。这意味着你可以选择你需要的零件。现代化：Angular 2.0将把ES6和“常青”现代浏览器（自动更新到最新版本）作为目标。这意味着开发者可以专注于业务领域相关的代码。有哪些争议？在尼日利亚会议上并没有提及迁移到2.0版本的途径。同时也指出跳转到2.0版本将会打破原有的1.3版本应用，不会有任何的向后兼容性。自从那时开始开发者社区一直充斥着不确定性和猜测，一些开发者也开始质疑是否值得开始一个新的Angular 1.3项目。有哪些改变？AtScriptAtScript是ES6的一个父集，被用于开发Angular 2.0。它是由Traceur编译器（连同ES6）处理来生成ES5代码并用TypeScript类型语法来生成执行时间的断言，以此来代替编译时的检查。不过AtScript并不是强制的，你仍然能够使用纯JavaScript/ES5代码代替AtScript来编写Angular应用。改善依赖入驻（DI）依赖注入（Dependency injection ）模式的基本思想是客户类Client不用自己来初始化它所依赖的成员变量IServer，使用一个独立的对象创建IServer适当的实现类并将它赋值给Client的成员变量。它对模块开发与组件隔离特别有益。Angular 2.0将会解决Angular 1.X所存在的这个方面的问题。添加丢失的的特性，如child injectors和lifetime/scope控制。AnnotationsAtScript提供工具关联元数据和功能。这有助于构建提供必要信息到DI库的对象实例（检查相关元数据时调用一个函数或创建一个类的实例）。它还容易通过提供一个注解重载参数数据。Child Injectors一个child injector继承了其父类的所有性能服务。根据要求，不同类型的对象可以被调用，并且自动覆盖不同的范围。实例范围改进的DI库将以实例范围为特性，这在使用Child Injectors和自己的范围标识符时变得更加强大。模板和数据绑定在开发应用中，模板和数据绑定将齐头并进。动态载入这是当前Angular版本所缺失的一个特性，不过将在Angular 2.0中出现。这将让开发者可以在忙碌中添加新的指令或控制器。模板在Angular 2.0中，模板编译过程将是异步的。由于代码是基于ES6模块规格，该模块加载器将通过简单的引用组件定义来加载依赖关系。指令在Angular 2.0中将会出现三种指令：组件指令——这些将通过JavaScript、HTML或一个可选的CSS样式表的封装逻辑创建可重复使用的组件。装饰指令——这些指令将被用来装饰元素（例如添加一个工具提示，或使用ng-show/ng-hide来显示/隐藏元素）。模板指令——这些将把HTML改变为可重复使用的模板。模板的实例化以及嵌入到DOM可以完全由指令控制。这样的例子包括ng-if和ng-repeat。路由方案初始的Angular路由是被设计用于处理一些简单的情况。然而，随着框架的发展，越来越多的功能被添加。在Angular 2.0中路由已经是可扩展的，它将包含以下基本功能：简单的基于json路由配置；优于配置的可选协定；静态的。参数化的路由模式；URL解析器；支持查询字符串；使用推送状态或Hashchange；导航模型（生成一个导航UI）；文档标题更新；404路由处理；位置服务；历史操作。现在，让我们来看看那些让Angular 2.0达到新高度的路由特性：子路由子路由将把应用的每个组件通过为它们提供各自路由的方式转换成更小的应用，这将有助于封装整个应用的特性集。屏幕激活这将帮助开发者通过一组can*回调更出色的控制导航的生命周期：canActivate——允许/阻止导航到新的控制器；activate——响应成功到新的控制器的导航；canDeactivate——允许/阻止导航远离旧的控制器；deactivate——响应成功远离旧的控制器的导航；这些回调将允许开发者返回Boolean值或一个命令（为了更低层次上的控制）。设计所有的这些逻辑都是使用流水线结构构建的，使得它非常容易将自己的步骤添加到流水线中或移除默认的东西。此外，它的异步特性将允许开发者使用服务器请求进行身份验证或为控制器加载数据，不过这还在规划中。日志Angular 2.0将包含一个被称为diary.js的日志服务——一个非常有用的特性，测量你在应用中时间花费在哪里。Scope$scope将从Angular 2.0中移除，取而代之的是ES6类。结论随着发布日期的临近，围绕Angular 2.0的兴奋和声音将会加剧。是否打破改变是一件好事？我们无法知道，不过反对者感到紧张是可以理解的，因为明显缺乏迁移的计划。Duang的一下就来了。不过其既然要来了，我们可以做的就是积极的迎接它。本文为CSDN编译整理，点击“阅读原文”可查看全文并参与讨论。如果您喜欢这篇文章，请点击右上角“…”将本文分享给你的朋友。CSDN(CSDNnews)　
　文章为作者独立观点，不代表微头条立场
的最新文章
本文以“为什么选择Kubernetes作为云平台的微服务治理框架”为例，介绍了普元在做与云平台相关的开源技术选型时的一些方法和经验。如今，Twitter每秒可以创建并保存3000张（20GB）的图片。2015年，Twitter甚至从对媒体存原文： 12 years, 12 lessons working at ThoughtWorks 作者： P源于2014年，由CSDN主办的中国Spark技术峰会已成功举办两届，而到了2016年，峰会更得到了Spar【CSDN编者按】Linux之父Linus Torvalds，一生只为寻找欢笑，以“I do code foGithub的跨平台的代码编辑器发布1.7版本了！这个版本主要集中优化了Windows平台和标签。同时Git上个月，我们发布了首个Android N的开发者预览版，本文将带你先睹为快，一窥新发布的Android N开最近的游戏产业，特别是视频游戏引擎的发展耐人寻味。虽然一股脑都说出来才痛快，但又想起我的空手道教练教过的：追源于2014年，由CSDN主办的中国Spark技术峰会已成功举办两届。而在2016年，峰会更得到了Spark日-23日，由CSDN重磅打造的数据库核心技术与实战应用峰会、互联网应用架构实战峰会将在深北京时间4月8日，OpenStack社区如期发布了OpenStack的第13个版本——Mitaka，新版本更最近半年，一个叫papi酱的平胸女子连续在微博、朋友圈、创业圈刷屏，当之无愧成了中文互联网的第一大网红。呃，日-23日，由CSDN重磅打造的数据库核心技术与实战应用峰会、互联网应用架构实战峰会将在深在即将到来的SDCC深圳技术峰会召开之际，由CSDN负责数据库技术领域的小编采访了一些参会讲师，谈谈他们将在日-23日，由CSDN重磅打造的SDCC 2016数据库&架构技术峰会将在深圳举行，目前1摘要：根据市场研究公司Net Applications的最新数据显示：截止2016年3月，全球浏览器的市场份当微软宣布，将在Windows10上面支持bash时，所有的Unix命令行用户都为之雀跃了。上周三，微软发布导读移动应用的成功要归结于高速网络和移动设备的强大处理能力。但如今极度饱和的移动市场出现了诸多问题，而最迫在如今关于虚拟现实和增强现实的各类宣传已经甚嚣尘上，从2016年初到现在3个月的时间里，想要分一杯羹的投资者在IBM称他们正在开发一种人工智能计算机，可以模拟人类的大脑作出决策。它叫做NS16e，是目前最大的人脑启发计回望二十一世纪已过去的十六个年头，云计算可谓赚足了风头，而作为云计算IaaS(基础设施即服务)模式的新贵，OBuild 2016 直播看的大家心情为之振奋，信仰充值爆棚，如果你不信，那么请仔细看好下面的内容：在Bui3月31日，笔者应邀前往北京国际会议中心参加Cocos 2016开发者大会（春季）。看了今年大会日程，总体而游戏行业一直以来都是由技术、平台和市场需求的演变推动着前行的，未来这一趋势还将继续。游戏机从2G到3G的跨越这一次，如果演讲者还想在台上继续“安利”云计算的概念，继续泛谈云计算将像水和电一样影响人们生活的趋势…这，恐很多时候需要网络抓包分析，在iPhone上抓包稍有不同，下面介绍三种常用的方式。分析工具以wireshark超融合在2015年关注度非常高，但各家厂商的超融合架构实现方法各有不同。我们不评判对错，也不去探究这些是不是导言：本文讲述了Spring数据框架在数据处理以及微服务方面的进化史。定量分析能否成功，在很大程度上要依赖于本文从程序员的角度对CNTK和TensorFlow做高层次的对比。本文也不属于性能分析，而是编程模型分析。文日-19日，由CSDN重磅打造的互联网应用架构实战峰会、数据库核心技术与实战应用峰会在上海光大会展中心国际大酒店隆重召开。如果我们一直按照前人的路去走，就很难超越前人，如果我们运用新的技术，改变思路，常常会化繁为简，化腐朽为神奇。只有通过新技术、新思维去创造、创新才能超越前人。【CSDN现场报道】日-19日，由CSDN重磅打造的互联网应用架构实战峰会、数据库核心技术未来五到十年对虚拟现实（VR）技术的意义重大。实际上已经有这样的迹象：虚拟现实拉近了我们的距离，让地理位置不去年六月发表的一篇博文中我们用可视化的方法解释了神经网络在图形分类中的工作原理。我们意外地收获了一些副产品–SDCC上海站之数据库&架构峰会的讲师、议题等均已确认，主办方今天放出了架构场讲师的视频，都来看看谁是颜值担当？欢迎在评论中留言，将有机会获得现场门票。导读本文作者Juhani Lehtim?ki，现任Fat Robot联合创始人兼CTO，在过去三年里一直负责在2011年、2012年大数据概念火了之后，可以说这几年许多传统企业也好，互联网企业也好，都把自己的业务给大数据靠一靠，并且提的比较多的大数据思维。本文重点介绍如何用数据驱动产品和运营。日-19日，由CSDN重磅打造的数据库核心技术与实战应用峰会、互联网应用架构实战峰会将在上CSDNnewsCSDN精彩内容每日推荐。我们关注IT产品研发背后的那些人、技术和故事。热门文章最新文章CSDNnewsCSDN精彩内容每日推荐。我们关注IT产品研发背后的那些人、技术和故事。在不久的将来，javascript2.0 普及后， angularjs还会如此热门吗？
现代浏览器应该会迅速跟进javascript2.0的支持吧
写下你的评论...
Copyright (C)
All Rights Reserved | 京ICP备 号-2大家正在求推荐
&·&·&·&·&·&·
第三方登录：【angularjs简称是什么】-我搜你-为您提供最新最优angularjs简称是什么信息
angularjs简称是什么的所有信息
&& &它们是属于2类东西 jsvascript是一种脚本语言 angularjs是用js编写的一种前段框架回答(1) && &AngularJs推荐你在百度找一下资料，有非常多可参考的信息。 与jquery的对比其实并不冲突，jquery只是对原生javascript的封装，用起来非常方便，而angularjs我理解是对数据处理、数据显示更加方便，两者虽有重复，侧重点不一样。而且是可以结合用...回答(1) && &MEAN是一个Javascript平台的现代Web开发框架总称，它是MongoDB + Express +AngularJS + NodeJS 四个框架的第一个字母组合。它与传统LAMP一样是一种全套开发工具的简称。 MongoDB是一个使用JSON风格存储的数据库，非常适合javascript。(JSON是JS...回答(2) && &未来的发展趋势是前端后端只靠json数据来进行通信：后端只处理和发送一段json数据到前端，然后计算和模板渲染都在前端进行。而前端的改动后，形成json数据然后传回到后端。未来趋势就是：后台程序再也不做模板的任何处理 AngularJS 的作用简单说...回答(1) && &AngularJS的官方文档是这样介绍它的。 1、完全使用JavaScript编写的客户端技术。同其他历史悠久的Web技术（HTML、CSS和JavaScript）配合使用，使Web应用开发比以往更简单、更快捷。 2、AngularJS主要用于构建单页面Web应用。它通过增加开发人员...回答(2) && &这个是js中的闭包写法。 闭包是什么？ 函数内部定义函数，连接函数内部和外部的桥梁 闭包的作用有2个: 一是前面提到的读取函数内部的变量， 二是让这些变量的值保存在内存中，实现数据共享 类似这样写法： (function(){ var i=0; return functio...回答(3) && &首先它是一个JavaScript框架它来自Google，作者叫Misko Hevery，ITeye上发过他的专  更多细节在慕课网：回答(1) && &AngularJS是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。回答(1) && &Ionic是一个混合APP开发工具，它以AngularJS为中间脚本工具(称为库，似乎又不恰当)，所以，你如果要使用Ionic开发APP，就必须了解AngularJS。 祝学业精进！回答(1)有jQuery背景，该如何用AngularJS编程思想？ - 文章 - 伯乐在线
& 有jQuery背景，该如何用AngularJS编程思想？
伯乐在线导读：本文由
编译自 Mark Rajcok 在 StackOverflow 的同名问答题《》。下面是 Mark Rajcok 的提问：
“我可以熟练使用jQuery进行客户端应用的开发，但是现在我希望开始使用Angular.js。哪位能描述一下这个过程中必要的模式变化吗？希望您的答案能够围绕下面这些具体的问题：
1. 我如何对客户端web应用进行不同方式的架构和设计？它们之间最大的区别是什么？（译者注：指jQuery和Angular.js）
2. 有什么是我不该做或者不该使用的；而又有什么是我应该做或者应该使用的呢？
3. 有没有一些服务端的考量/约束呢？
我在寻找的就是一个关于jQuery和Angular.js之间的详细的比较。”
下面是来自
的最佳回答：
1. 绝不要先设计你的页面，然后用DOM操作去改变它
在jQuery中，你会先设计一个页面，然后让它变得动态化。这是因为jQuery是为了扩展而设计的，并在这个前提下变得越来越臃肿。
但是在Angular.js中， 你必须从一开始就在脑子里挂着架构的弦。不要一开始就想着“我有这样一个DOM，我想让它做X”， 你必须从你要完成的目标开始思考，然后设计你的应用， 最后才是设计你的视图。
2. 不要用 Angular.js 扩展 jQuery
类似地，不要一开始就带着这样的想法：jQuery可以完成X，Y，Z，所以我只要在其上为模型和控制器添加Angular.js就行了。在起步阶段这确实很容易勾引你，这也是为什么我总是推荐Angular.js新手根本不要使用jQuery，至少要在他们习惯了“angular 方式”之后。
我在这里（译者注：指stackoverflow）和邮件列表上看到过很多开发者，他们用150或者200行代码的jQuery插件，然后利用一堆让人困惑的复杂的回调和$apply与Angular.js粘合起来建立这些详尽的解决方案；最终确实可以跑起来！ 但是其实这个问题在大多数情况下，我们可以用一小段Angular.js代码来重写jQuery插件即可，而这种方式会让一切刹那间简单明了可理解。
我觉得这类问题的底线是：当你在解决问题时，首先利用“Angular.js思想”去做；如果你不能想出一个方案，那么就在社区里询问；如果还是没有简单的解决方法，那么再请随意使用jQuery吧。但是注意，千万别让jqeury成为你的拐杖，不然你将永远无法真正精通Angular.js。
3. 永远根据架构去思考
首先你要知道，单页面结构也是应用。它不是网页。所以我们需要有服务端开发者思想加上客户端开发者思想。 我们必须考虑如何将我们的应用拆分为独立，可扩展，可测试的组件。
那么你要怎么做呢？你如何做到利用“angualrjs思想”呢？这里有一些普遍的原则，与jQuery作为比照。
视图是“正式记录”
在jQuery中，我们通过编程方式来改变视图。我们可以像下面这样通过ul标签来定义一个下拉菜单：
JavaScript
&ul class="main-menu"&
&li class="active"&
&a href="#/home"&Home&/a&
&a href="#/menu1"&Menu 1&/a&
&li&&a href="#/sm1"&Submenu 1&/a&&/li&
&li&&a href="#/sm2"&Submenu 2&/a&&/li&
&li&&a href="#/sm3"&Submenu 3&/a&&/li&
&a href="#/home"&Menu 2&/a&
12345678910111213141516
&ul class="main-menu"&&&&&&li class="active"&&&&&&&&&&a href="#/home"&Home&/a&&&&&&/li&&&&&&li&&&&&&&&&&a href="#/menu1"&Menu 1&/a&&&&&&&&&&ul&&&&&&&&&&&&&&li&&a href="#/sm1"&Submenu 1&/a&&/li&&&&&&&&&&&&&&li&&a href="#/sm2"&Submenu 2&/a&&/li&&&&&&&&&&&&&&li&&a href="#/sm3"&Submenu 3&/a&&/li&&&&&&&&&&/ul&&&&&&/li&&&&&&li&&&&&&&&&&a href="#/home"&Menu 2&/a&&&&&&/li&&/ul&
在jQuery中，根据我们应用的逻辑，可以用类似下面的语句来激活它。
JavaScript
$('.main-menu').dropdownMenu();
$('.main-menu').dropdownMenu();
当我们只是看着视图的时候，不会立刻看出它的功能。对于小应用而言，这样是没问题的。但是对于大型的应用，情况就一下子变得令人困惑并且难以维护。
但是在Angular.js中，视图是基于视图的功能的正式记录。我们的ul是像下面这样声明的：
JavaScript
&ul class="main-menu" dropdown-menu&
&ul class="main-menu" dropdown-menu&&&&&...&/ul&
这两者其实做了同样的事情，但是在Angular.js的版本中，任何看到这个模板的人都知道将要发生什么。不论何时，开发团队里有任何新的开发人员加入，她可以一眼看出有一个叫做dropdownMenu的指令作用在视图上；她根本不需要凭直觉猜测或者研究下代码才找到正确的答案。视图本身就告诉我们将会发生什么了。清晰多了。
angualrjs的新手经常会问这样一个问题： 我如何找到某一类所有的链接并且给它们添加一个指令呢？当看到我们回复的时候小伙伴都震惊了：压根别去这样做。但是劝你不要这样做的原因是，这样做就像是一半jQuery，一半angulrjs，而这真心很糟。这里的问题是，开发者想在angualrjs的情境中使用jQuery方式。而这绝对不会玩得转。视图是正式记录。超出指令的范围（这点下文会谈论更多），你绝不要去改变DOM。而且指令是应用在视图中的，目的自然也一目了然。
记住：不要先设计再修饰。你必须先进行架构，然后再考虑设计。
这是Angular.js目前最酷的特性之一，并且秒杀我前文提到的各种需要的DOM操作。不需要你自己动手，Angular.js将自动更新你的视图有木有!
在jQuery里， 我们响应事件并更新内容，大概是这个样子：
JavaScript
url: '/myEndpoint.json',
success: function ( data, status ) {
$('ul#log').append('&li&Data Received!&/li&');
$.ajax({&&url: '/myEndpoint.json',&&success: function ( data, status ) {&&&&$('ul#log').append('&li&Data Received!&/li&');&&}});
视图则看上去是这样的：
JavaScript
&ul class="messages" id="log"&
&ul class="messages" id="log"&&/ul&
除了关注点混合的问题，这里同样有之前提到的表征目的的问题。更重要的是，我们不得不手动引用并更新dom节点。并且如果我们想要删除一个日志，我们不得不再次对dom编程操作。我们怎样才能抛开dom来测试逻辑呢？还有，如果我们希望改变展现呢？
真是让人凌乱。。。
但是在Angular.js中，我们可以这样做：
JavaScript
$http( '/myEndpoint.json' ).then( function ( response ) {
$scope.log.push( { msg: 'Data Received!' } );
$http( '/myEndpoint.json' ).then( function ( response ) {&&&&$scope.log.push( { msg: 'Data Received!' } );});
我们的视图看上去是这样的：
JavaScript
&ul class="messages"&
&li ng-repeat="entry in log"&{{ entry.msg }}&/li&
&ul class="messages"&&&&&&li ng-repeat="entry in log"&{{ entry.msg }}&/li&&/ul&
但是考虑到刚才提到的问题，我们的视图看上去可以是这样的：
JavaScript
&div class="messages"&
&div class="alert" ng-repeat="entry in log"&
{{ entry.msg }}
&div class="messages"&&&&&&div class="alert" ng-repeat="entry in log"&&&&&&&&&{{ entry.msg }}&&&&&/div&&/div&
现在，替换掉了无序列表，我们使用Bootstrap警告框。同时我们根本不需要改变控制器代码！更重要的是，不论日志何时或者如何更新，视图也会跟着改变。自动的！漂亮！
虽然我没有在这里演示出来，但是数据绑定是双向的。所以这些日志信息同样可以在视图中被编辑，就像这样：
JavaScript
&input ng-model="entry.msg" /&
&input ng-model="entry.msg" /&
是不是更开心了？
不同的模型层
在jQuery中，dom有点像模型。但是在angualrjs中，我们有一个分离的模型层， 而这个模型层可以让我们用任何方式管理，完全独立于视图。这对于上面说的数据绑定很有帮助， 还可以维护关注点分离，并且引入更多的可测试性。其它的答案提到了这点，所以我这里就不再赘述了。
关注点分离
以上所有的这些把我们带入了这样的主题：保持你的关注点分离。你的视图表现的像记录什么会发生（大部分情况）的正式记录；你的模型表现你的数据；你有一个服务层来执行可重用的任务；你执行dom操作并通过指令扩展你的视图；并且你用控制器来组合这些。这些同样已经在其它答案中提到，我在这里唯一还要提出的一个事情就是可测试性，我会在下文的另一节里专门讨论。
依赖注入是让我们实现关注点分离的方法。如果你是一个服务器端的开发者（从java到php），你可能对这个概念已经非常熟悉了，但是如果你是一个来自jQuery的客户端的朋友，那么你可能会认为这个概念是傻浅挫。但是它可不是：）
从一个更广的观点来看， 依赖注入意味着你可以非常自由的声明组件，然后你可以通过任意其它组件，呼叫一个它的实例，然后授权。
你不需要知道载入顺序，或者文件位置，或者其它类似的东西。这种强大的力量可能不会立刻显现，但是我这里会提供一个（通常）的例子：测试。
比如在我们的应用中，需要一个通过REST API，同时也依赖于应用状态，本地存储实现了服务器端存储的服务。当在我们的控制器上跑测试的时候，我们不希望与服务器端通讯-毕竟我们在测试控制器。我们能够仅仅添加一个与我们原始组件同名的mock服务，注入器将确保我们的控制器自动获取伪造对象–我们的控制器不会也不需要知道它们的区别。
那么既然提到测试……
4. 保持测试驱动的开发
这个其实是关于架构的第三节的一部分，但是这个主题非常重要，所以我需要将其提出来作为自成体系的部分。
那些你看过，用过，写过的所有jQuery插件，它们中有多少有相应的测试包？不是很多吧？ 因为jQuery可不是很遵守这个规矩。但是angualrjs是。
在jQuery中， 测试的唯一方法是用示例页面来独立地创建组件，针对该页面我们的测试可以实施dom操作。于是我们就不得不分离地开发一个组件然后将其集成进我们的应用。多么不方便啊！
那么多时间啊，当我们使用jQuery开发时，我们选择使用迭代开发代替测试驱动的开发。可以谁又能怪我们呢？
但是因为我们有关注点分离，我们能够在Angular.js里反复使用测试驱动开发。举个例子，我们想要一个超简单的指令来指示在菜单中我们目前的路径是什么。我们可以在视图中这样声明我们想获取的：
JavaScript
&a href="/hello" when-active&Hello&/a&
&a href="/hello" when-active&Hello&/a&
好了，我们现在可以写个测试：
JavaScript
it( 'should add "active" when the route changes', inject(function() {
var elm = $compile( '&a href="/hello" when-active&Hello&/a&' )( $scope );
$location.path('/not-matching');
expect( elm.hasClass('active') ).toBeFalsey();
$location.path( '/hello' );
expect( elm.hasClass('active') ).toBeTruthy();
it( 'should add "active" when the route changes', inject(function() {&&&&var elm = $compile( '&a href="/hello" when-active&Hello&/a&' )( $scope );&&&&&$location.path('/not-matching');&&&&expect( elm.hasClass('active') ).toBeFalsey();&&&&&$location.path( '/hello' );&&&&expect( elm.hasClass('active') ).toBeTruthy();}));
我们运行测试，并确认它是失败的。那么我们来写下我们的指令：
JavaScript
.directive( 'whenActive', function ( $location ) {
scope: true,
link: function ( scope, element, attrs ) {
scope.$on( '$routeChangeSuccess', function () {
if ( $location.path() == element.attr( 'href' ) ) {
element.addClass( 'active' );
element.removeClass( 'active' );
123456789101112131415
.directive( 'whenActive', function ( $location ) {&&&&return {&&&&&&&&scope: true,&&&&&&&&link: function ( scope, element, attrs ) {&&&&&&&&&&&&scope.$on( '$routeChangeSuccess', function () {&&&&&&&&&&&&&&&&if ( $location.path() == element.attr( 'href' ) ) {&&&&&&&&&&&&&&&&&&&&element.addClass( 'active' );&&&&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&else {&&&&&&&&&&&&&&&&&&&&element.removeClass( 'active' );&&&&&&&&&&&&&&&&}&&&&&&&&&&&&});&&&&&&&&}&&&&};});
现在我们的测试通过了，并且我们的菜单按照请求运行。我们的开发是迭代并且测试驱动的，太酷了哦！
5. 从概念上来看，指令不是打包的jQuery
你会经常听到“只在指令里做dom操作”。这是必要的。请对它表示出尊重！
但是让我们谈点更深入的。。。
一些指令只是装饰那些在视图里的已有的（想想ngClass），因此有时候就直接进行dom操作，基本上都能搞定。但是如果一个指令像个“widget”并有一个模板，
那它同样要遵守关注点分离原则。也就是说，这个模板也应该与它在链接和控制器函数里的实现保持最大的独立。
Angular.js自带着一套工具让这件事变得简单； 使用ngClass我们能够动态的更新类；ngBind允许双向的数据绑定；ngShow和ngHide以编程的方式显示或隐藏一个元素；还有更多–包括我们自己写的那些。换句话说， 我们可以不用DOM操作来实现所有的酷炫的事儿。 dom操作越少，指令越容易测试，它们也更容易样式化，在未来它们也更容易改变，并且也变得更加可重用和可分发。
我看到很多Angular.js开发新手将指令当做放置一堆jQuery的地方。换句话说， 他们认为：“既然我不能在控制器里做dom操纵，那么我就把这段代码放到指令里”。当然这看上去好多了，但是通常这仍然是错的。
想一下在第三节里我们编写的日志记录。即使我们将其放到一个指令里，我们仍然希望用“anggualjs方式”来做这件事情。这仍然没有做任何dom操作！在很多情况下dom操作是必须的，但是这种情况其实比你想的少得多！在你在你的应用中到处使用dmo操作之前，问问你自己，这真的是必须的吗。可能有更好的方法呢。
这里用一个简单的例子来展示我们经常会看到的一个模式。我们需要一个切换按钮。（注意：这个例子有那么一点人为设计的技巧并且有点啰嗦，但是很多更复杂的情况其实也完全可以根据这个例子的方式来解决。）
JavaScript
.directive( 'myDirective', function () {
template: '&a class="btn"&Toggle me!&/a&',
link: function ( scope, element, attrs ) {
$(element).click( function () {
if ( on ) {
$(element).removeClass( 'active' );
$(element).addClass( 'active' );
12345678910111213141516171819
.directive( 'myDirective', function () {&&&&return {&&&&&&&&template: '&a class="btn"&Toggle me!&/a&',&&&&&&&&link: function ( scope, element, attrs ) {&&&&&&&&&&&&var on = false;&&&&&&&&&&&&&$(element).click( function () {&&&&&&&&&&&&&&&&if ( on ) {&&&&&&&&&&&&&&&&&&&&$(element).removeClass( 'active' );&&&&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&else {&&&&&&&&&&&&&&&&&&&&$(element).addClass( 'active' );&&&&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&&on = !on;&&&&&&&&&&&&});&&&&&&&&}&&&&};});
这里有一些错误。第一，jQuery不是必须的。我们这里做的一切都不需要jQuery！第二， 即使是我们的页面上已经有jQuery，也没有理由一定要在这里使用它；我们可以简单的使用angular.element，而且就算在一个没有jQuery的项目中我们的组件仍然可以工作。第三，即使我们假设为了让这个指令工作，jQuery是必须的，如果jqury被加载，那么jqLite（angler.element）一定会使用jQuery。所以我们不需要使用$（译者注：jQuery的一个标识符号，是jQuery函数的别名）–我们可以使用angular.element。第四， 紧接第三点，jqLite元素不需要被包裹在$里–传递给link函数的element已经是一个jQuery元素！第五， 我上一节已经提过的，为什么我们要将模板混合进我们的逻辑呢？
这个指令可以更精简的重写（即时在更复杂的例子里也一样）：
JavaScript
.directive( 'myDirective', function () {
scope: true,
template: '&a class="btn" ng-class="{active: on}" ng-click="toggle()"&Toggle me!&/a&',
link: function ( scope, element, attrs ) {
scope.on =
scope.toggle = function () {
scope.on = !$scope.
12345678910111213
.directive( 'myDirective', function () {&&&&return {&&&&&&&&scope: true,&&&&&&&&template: '&a class="btn" ng-class="{active: on}" ng-click="toggle()"&Toggle me!&/a&',&&&&&&&&link: function ( scope, element, attrs ) {&&&&&&&&&&&&scope.on = false;&&&&&&&&&&&&&scope.toggle = function () {&&&&&&&&&&&&&&&&scope.on = !$scope.on;&&&&&&&&&&&&};&&&&&&&&}&&&&};});
再次强调，模板的那些代码都是在模板里的，所以你或者你的使用者能够很方便的将其换成一个符合任何需要的样式，同时逻辑不被改变。这就是重用性-赞！
当然，还有其它很多好处–比如测试 – 这很容易！ 不论什么在模板中，指令的内部API绝不会被接触，所以重构就变得容易。你可以在不接触指令的情况下随意改变你的模板。并且不论你怎么变，你的测试仍可以通过。
所以如果指令不只是一组jQuery风格的函数，那么它们是什么呢？指令其实就是html的扩展。如果html不能完成你希望它做的一些事情，你就写一个指令来做，并且当它是html的一部分来使用。
换句话说， 如果Angular.js一下子无法完成手头的工作，想想看你的团队是否能用ngClick、ngClass等来搞定它。
别用jQuery。甚至都别引用它。它会阻碍你。当你有个问题已经知道怎么用jQuery来解决的时候，在你将手伸向$的时候，试试能不能在Angular.js的规范内解决。如果你不知道，就问！
十有八九最佳的方法是不需要jQuery的，而当你选择用jQuery的时候反而会导致更多的工作呢。
关于作者：
可能感兴趣的话题
摆脱，提问的最后一句都翻译错了，完全反了。。。
关于伯乐在线博客
在这个信息爆炸的时代，人们已然被大量、快速并且简短的信息所包围。然而，我们相信：过多“快餐”式的阅读只会令人“虚胖”，缺乏实质的内涵。伯乐在线内容团队正试图以我们微薄的力量，把优秀的原创文章和译文分享给读者，为“快餐”添加一些“营养”元素。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2016 伯乐在线}