何时应该使用Directive、Controller、Service？

这小半年学习了angularjs，并且用它在做公司的组件库，但是，越到现在，越觉得到瓶颈了。对controller，directive，和service的理解也仅限于手册。不知道成熟的项目是怎么构建的，怎么应用angularjs的。有些苦恼。但是这篇文章还是对这些概念有了一些新的认识。

一：SERVICES（服务）

Service，就是【单例对象】在AngluarJS 中的一个别名。这些小东西（指单例对象）会被经常传来传去，保证你每次访问到的都是同一个实例，这一点和工厂模式不同。基于这种思想，单例对象让我们可以 实现一些相当酷的功能，它可以让很多controller和directive访问内部的数值。在#angularjs 频道（译者注：指的是原作者自己的博客频道）里面这也是非常常见的问题之一，那就是在应用中的不同代码块之间如何共享数据？我们来看这个问题。

我们首先来创建一个module（模块），本文中的所有代码都会用到这个module。

var myapp=angular.module('myapp',[]);

下一步，我们来创建一个新的service（服务）。假设我们上面的这个module是用来管理图书的。所以，这里我们来创建一个Book service，然后把一个JSON对象数组添加到这个service中，这些对象代表很多book数据。如图：

一本书的服务

我们这里正在做的事情就是在管理一个book 数组，同时还带有一个addBook方法，在有需要的时候可以添加更多书籍。addBook方法还会在application上广播一个事件，告诉所有正 在使用我们的service的人，数组已经被更新了，从而让它们自己也做一些刷新操作。现在，我们要做的就是把这个service传递给各种 controller、directive、filter，或者其它任何需要它的东西---然后它们就可以访问service中的这些方法和属性了。

首先，创建一个controller，用它来调用我们定义的服务，如图：

controller

上面所做的就是在创建controller的时候，把Book service传递给了它。也就是把service作为依赖注入到controller里。我们把前面创建的Book service中的books数组赋给了controller内部的scope变量。

这里的核心问题是什么呢？我们节省了一些时间，并且在controller上创建了一个数组。对---我们确实这样做了。这样做确实也为我们节 约了一点时间---但是如果我们要在其它地方处理这些书籍信息应该怎么办呢？通过scope来维护数据是非常粗暴的一种方式。由于其它 controller、directive、model的影响，scope很容易就会崩溃或者变脏。它很快就会变成一团乱麻。通过一种集中的途径（在这里 就是service）来管理所有书籍数据，然后通过某种方式来请求修改它，这样不仅仅会更加清晰---同时当应用的体积不断增大的时候也更加容易管理。最 后，它还可以让你的代码保持模块化（这也是Angular很擅长的一件事情）。一旦你在其它项目中需要用到这个service，你没有必要在scope、 controller、filter等等东西里面到处去查找相关的代码，因为所有东西都在service里面！

好。那么我们什么时候应该使用service呢？答案是：无论何时，当我们需要在不同的域中共享数据的时候。另外，多亏了Angular的依赖注入系统，实现这一点是很容易并且很清晰的。

二：CONTROLLERS（控制器）

我们再来看控制器！除非你曾经使用过前端MVC，否则从服务端MVC的思维模式转向客户端MVC的思维模式就如同一次脑筋急转弯。为什么会这样呢？ 这是因为，虽然在前端开发中controller实现了非常类似的功能，但是它同时还会实现一些与服务端controller非常不同的功能。在 Angular中，controller自身并不会处理"request"，除非它是用来处理路由(route)的（很多人把这种方式叫做创建route controller---路由控制器），更明确地说，尤其是你的应用里面那些作为界面的一部分的controller，它们只会管理非常小的一段代码。

controller应该纯粹地用来把service、依赖关系、以及其它对象串联到一起，然后通过scope把它们关联到view上。如果在你的 视图里面需要处理复杂的业务逻辑，那么把它们放到controller里面也是一个非常不错的选择。回到我们前面的这个books例子，我实际上并没有什 么东西需要添加到controller里面。

但是Kirk（译者注：指本文原作者），如果我要add一本书籍应该怎么办呢？我应该在controller上面新增一个方法来处理这件事情吗？ 不，原因在下面解释。因为它是DOM交互/操作的一部分。所以请把它放到directive(指令)里面。怎么做呢？很高兴你能问出这个问题。

三：DIRECTIVES（指令）

到目前为止，在我们所编写的大量AngularJS应用中，应用中最主要的复杂部分都在directive（指令）中。有一个强大的工具可以用来操 作和修改DOM，它也是我们这里需要讨论的内容。我们来提供一个按钮，用户通过它可以向service里面添加一本图书，以这一功能来结束此文。

一个常见的反模式（按照本人愚见）是在controller里面添加DOM交互代码。Angular对directive的定义是一段代码片段，你 可以用它来操作DOM，但是我觉得directive也是进行用户交互的很好选择。我们来扩展前面的例子，为用户提供一个按钮，通过这个按钮可以向 service里面添加一本书籍。

directive

很简单的东西。我们创建了一个指令，它的核心目的是简单地向books列表中添加一本书籍，books已经注册在了我们的Book服务中。我们来把这个指令应用到我们的视图中。

调用指令

如你所见，我们仅仅把指令当作一个元素属性来使用。每次点击这个按钮的时候，它都会把《Star Wars》（《星球大战》）这本书添加到我们的Book service中去。简单、轻松、模块化---并且易复用。如图：

最初的books只有两条数据，每点击一次，就会把{ title: "Star Wars", author: "George Lucas" }添加到book service中去。

通过这篇文章，我觉得angular的服务就相当与php里面的model，作用就是把常用的东西抽离出来。进行重构。以达到复用的效果。controller和php的controller类似，是连接model和view的，以实现页面效果。而directive更多的是和页面，dom等打交道。截至到现在，我们的应用中对directive的认识和文章说的还有些不同之处。服务没有充分用起来，这是一个值得思考的问题。总之，还是有所学习吧。

注：本文大多数借鉴了前辈的文章，稍有修改。

文章链接：damoqiongqiu.iteye.com/blog/1971204