在AngularJS中何时应该使用Directives，Controllers或者Service

原文： http://kirkbushell.me/when-to-use-directives-controllers-or-services-in-angular/

Services

Service是单例的. 可以让你在你应用的不同代码块中共享同一个数据.

首先定义一个module.

var module = angular.module( "my.new.module", [] );

接下来, 创建一个service名为Book, 其中有一个json对象包含了一些图书的数据.

module.service( ‘Book‘, [ ‘$rootScope‘, function( $rootScope ) {
   var service = {
     books: [
       { title: "Magician", author: "Raymond E. Feist" },
       { title: "The Hobbit", author: "J.R.R Tolkien" }
     ],

     addBook: function ( book ) {
       service.books.push( book );
       $rootScope.$broadcast( ‘books.update‘ );
     }
   }

   return service;
}]);

$rootScope.$broadcast 通知使用Book服务的其他组件books数据被更新了. 现在我们把这个服务传到任何需要他的controllers, directives, filters中去 - 这样他们就能访问Book service的属性和方法了.

var ctrl = [ ‘$scope‘, ‘Book‘, function( scope, Book ) {
   scope.$on( ‘books.update‘, function( event ) {
     scope.books = Book.books;
   });

   scope.books = Book.books;
 }];

 module.controller( "books.list", ctrl );

我们把Book service中的books数组赋值给controller的scope对象的books属性.

那么这么做的重点是什么呢? 为什么我们不直接在controller里面创建这个books数组了, 这样我们就不要创建Book service了, 这可以节省不少时间呢. 是的 - 这样做确实有可能节省时间 - 但是如果我们需要在其它的地方也使用这个books数组呢? 直接通过scope管理数据是我们不推荐的. Scopes 很容易被其他controller, directive 污染. 在一个统一的地方集中处理book数据对于一个稍大一点的应用都是推荐的. 它让你的数据保持模块化.

CONTROLLERS

Controller应该简单的只是连接service, dependency和其他对象, 并且通过scope把他们传到视图页面. 如果在你的view中有比较复杂的业务逻辑，把这些逻辑放在controller中也是一个不错的选择.

如果我们添加一本书应该怎么做? 应该在controller里面添加一个方法来处理吗? 不. 这属于DOM交互的部分. 应该把这个添加到directive里面去.

DIRECTIVES

在我写过的各式各样的Angular应用中, 我感觉最复杂最难的是directives. 在这篇文章中我们提供一个按钮用来使用service添加一本书.

Angular 定义了directive作为一代码块用来给你操作DOM, 交互的.

module.directive( "addBookButton", [ ‘Book‘, function( Book ) {
   return {
     restrict: "A",
     link: function( scope, element, attrs ) {
       element.bind( "click", function() {
         Book.addBook( { title: "Star Wars", author: "George Lucas" } );
       });
     }
   }
}]);

上面的代码很简单. 我么创建了一个directive, 使用service添加一本新书. 使用这个directive的代码如下

<button add-book-button>Add book</button>

如你所见, 我们通过attribute使用这个directive.为什么我们不在我们的controller里面添加一个方法添加新书呢:

$scope.addBook = function() {
  Book.addBook( { title: "Star Wars", author: "George Lucas" } );
};

在directive或者controller里面处理添加新书的结果是一样的，那为什么我们说要放到directive中来处理而不是controller呢? 如果我想在其它的位置添加新书，我是不是要把这个controller里面的代码复制出来拷贝到想要添加这个功能的地方中去？这样会造成重复代码，给维护带来难度. 通过directive来处理这个就能避免这些问题了.