原文： 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来处理这个就能避免这些问题了.