• {{ entry.msg }}

现在我们不使用ul,而是使用Bootstrap的弹出框，但是我们不用修改controller中的代码，更为重要的是，不管是数据如何修改，视图层也会自动随之发生变化，非常简洁！

尽管我这里不会做演示，但是你需要知道数据绑定是双向的，你可以编辑数据通过添加指令，此外还有很多其他的令人兴奋的地方。

区别model层

在jQuery中，DOM类似于一种model，但是在AngularJS中，我们拥有不同于jQuery中的model层以便我们可以以任何我们想要的方式去管理它，它是完全独立于视图之外的。这种方式是有助于我们进行数据绑定并且可以保持对分离的关注，而且可以具备更好的可测试性。

关注点分离

以上所讲都和这个总体的话题相关：让你关注分离，你的视图层显示记录，你的model层代表数据，你还有个服务层用来执行这些可复用的任务。你使用directive来执行dom操作并扩展你的视图，并将它和controller连接起来，这也就是我在其他方面提到的有关于增强可测试性的原因。

依赖注入

帮助我们解决关注点分离的是依赖注入（DI），如果你是一个服务端开发者（Java或者PHP），你可能已经很熟悉这个概念了，但是如果你是从事客户端开发的，你会觉得这个概念可能有些多余和纯属追求时髦，但是实际上不是这样。

从广义的角度讲，DI意味着你可以自由地声明组件然后从这些组件中进行实例化，这是理所当然的。你不必知道加载顺序，文件位置等诸如此类的事情，这种魔力不是能够立即看到，但是我会给出一个例子：测试。

我们说在应用中，我们需要一个依赖于应用状态和本地存储的服务用来通过一个rest API来执行服务端存储，当我们测试我们的controller时，我们不必和服务端进行通信，毕竟只是在测试controller而已。我们仅添加一个与我们最初组件相同的mock服务，注入器能够确保我们的controller获得一个虚拟的服务，controller自身不必也不需要了解这种差异。

那么说说测试吧。

4.以测试驱动的开发

这部分是一个架构的第三部分，但是他是很重要的，以至于我需要将它放在最重要的位置。

在我们所有见过的，用过的以及写过的jQuery插件中，有多少具有一套测试组件呢？其实并不多，这是因为jQuery在测试上不易控制，但是AngularJS却与此不同。

在jQuery中，测试的唯一方法是使用一个demo页去创建一个独立组件来使得我们的测试可以执行dom操作。我们接下来我们必须开发一个独立的组件然后将它集成到我们的应用中来，这是多不方便啊！在很多情况下，当我们使用jQuery开发实际上是做了很多重复开发而不是以测试驱动的开发，这又能怪我们吗？

但是在AngularJS中我们可以关注分离点，所以我们可以做一些测试驱动的开发。例如，我们有一个directive用来说明在menu中我们的当前路径，我们可以在视图中这样声明：
复制代码代码如下:

Hello

好了，现在我们可以写一个测试用来测试这个不存在的指令when-active了
复制代码代码如下:

it( ‘should add “active” when the route changes’, inject(function() {
var elm = $compile( 'Hello' )($scope );

$location.path('/not-matching');
expect( elm.hasClass('active') ).toBeFalsey();$location.path( '/hello' );
expect( elm.hasClass('active') ).toBeTruthy();

}));

我们直接run测试用例，你会发现是失败的，这时候需要创建这个指令，如下：

复制代码代码如下:

.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’ );
}
});
}
};
});

再次run这个测试用例，你会发现通过了并且菜单如请求的样子显示，我们的开发是兼有反复性和可测试性，非常酷吧！

5.从概念上讲，指令不是打包的jQuery

你常常听说，dom操作只能在指令中，这是必须的，你必须严肃对待。

让我们深入讨论，

某些指令仅仅是装饰我们的视图（例如ngClass），因此有时候直接操作dom是可以的，但是当一个指令类似于一个小物件并且拥有自己的模板，那么它应该当做一个分离的关注点，这就是说，它的模板需要和link中的执行逻辑以及其他controller函数分离开。

AngularJS拥有一整套的工具可以是这种分离更简单，使用ngClass指令，我们可以动态地更新class,使用ngBind我们可以进行双向数据绑定，使用ngShow和ngHide 我们

可以采用编程的形式显示和隐藏一个元素，也包括我们自己写的很多指令。换句话说，我们可以不用Dom操作而完成所有工作，dom操作越少，指令越容易测试，越容易指定他们的style属性，就越容易在将来改变他们，那么他们就越容易复用和分发。

我看过很多AngularJS新手使用指令封装一大串 jQuery代码，换句话说，既然我不能在controller里面进行dom操作，那么我可以将他放在指令中，虽然这相对于直接操作dom好很多，但是任然是错误的。

看看我们在上面的记录，即使我们将其放在一个指令中，我们任然需要以Angular的方式去操作它，这种方式不执行dom操作！在很多时候dom操作是需要的，但是这种情况比你想的要少得多。当我们需要做dom操作的时候先问问自己这里是否必须这样做，这才是一种更好的方式。

下面是一个简单的例子用来表明我常常见到的一种模式，我们需要I一个可切换的button：
复制代码代码如下:

.directive( ‘myDirective’, function () {
return {
template: ‘Toggle me!‘,
link: function ( scope, element, attrs ) {
var on = false;

        $(element).click( function () {on = !on;$(element).toggleClass('active', on);});}
};

});

在以上例子中存在以下错误：

1.首先，jQuery是不必要的，这里的工作完全不需要jQuery！

2.第二，即使我们已经在页面中引入了jquery,但是我们没有理由去使用它，我们可以使用angular.element而我们的组件也能够运行，即使这个项目中没有引入jQuery。

3.第三，假设jquery是需要的在我们的指令中，我们可以使用jqLite去进行替代，只要引入jQuery即可，所以我们不必使用$而是使用angular.element;

4.第四，和第三点联系很紧密，jqLite元素不必使用$包裹起来，element元素传递到link函数中已经是一个jQuery对象了；

5.第五，我们之前已经说过，为什么不将我们的模板和逻辑混合起来呢?

以上指令可以按照如下方式来重写，即使在最复杂的情况下看起来也如此简单。
复制代码代码如下:

.directive( ‘myDirective’, function () {
return {
scope: true,
template: ‘Toggle me!‘,
link: function ( scope, element, attrs ) {
scope.on = false;

        scope.toggle = function () {scope.on = !scope.on;};}
};

});

模板元素是在 template属性中，你可以很容易替换掉它的style，而逻辑根本不用发生变化，达到了完全复用！

还有其他的好处，比如测试起来很简单，不管模板里面是什么，指令API都不会发生改变，所以重构它很简单。你可以随意多次改变你的模板而不用改变指令，无论你怎么改变，你的测试总能通过！

所以说指令不是一堆jQuery代码的集合，比如函数等，而是HTML代码的扩展，如果HTML代码不能实现你需要的功能，你可以写一个指令去实现它，然后像使用HTML那样去使用它。

以另外一种方式讲，AngularJS如果不做额外的事情，想想我们怎么能够使用ngClick,ngClass指令呢？

可以说AngularJs与Jquery的优势乃至设计思路各有不同,按照我的理解.前者是先搭好房屋,再等人入驻.而后者是,需要入驻的人,带着砖瓦自己来修一栋楼.至于哪一种更方便更适合你,因人而异了.