何时使用指令，服务，控制器

发表于   |   分类于   |     |   阅读次数
  • Directive(指令)
  • Controller(控制器)
  • Service(服务)
    以上为angular1的核心概念，我们究竟什么以什么样的方式去使用它们。

    Service

    Service是单例对象，会经常被传来传去，但是可以保证每次访问的都是同一个实例。所以很多Controler和Directive可以访问它内部的数值，所以它是一个存放数据，实现数据共享的好地方;


    首先创建一个module,

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



下一步，创建一个服务，用来管理图书的BookService;

1
2
3
4
5
6
7
8
9
10
11
12
13
module.factory('BookService',['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.updata');
		}
	}
	return service;
}])

这里很好理解，一个对象里面有我要存放的书的集合，还有一个添加图书的方法，这个方法还会在应用上广播一个事件，告诉所有使用我们的服务的人，存放书的集合已经更新了，接下来就是要使用它的东西需要接收这个广播了。



1
2
3
4
5
6
7
module.controller('books.list',['$scope','BookService',function($scope,BookServie){
	$scope.$on('books.updata',function(event){
		$scope.books = BookService.books;
		$scope.$apply();
	});
	$scope.books = BookService.books;
}])

这里就是将前面创建的BookService中存放的books赋值给了controller内部的scope对象。如果我们在controller上创建一个数组，其他地方也要处理书籍的信息，通过scope来维护数据会很麻烦，scope很容易变得混乱不堪，通过一种集中的途径进行数据的管理，更容易理解也可以使代码模块化。所以当需要在不同的地方共享数据的时候，就要依靠服务了，谁要用就注入到谁那里，就这么容易。


形容服务有一个例子特别的形象，A团A连和B团B连去执行任务，

A团A连发现敌情，要报告给B团B连，军队里只有服从上级，所以他只能报告给A团A营，在一直向上报告直到A、B共同的长官C旅，C旅在下发给B团，直到B连，要是有个特殊情况，相信这时候B连已经死光了，所以才有了通信部门的存在，而这里的通信部门也就是angular中的服务。

Controller

Controller应该纯粹的把Service，依赖关系，以及其他对象串连在一起，通过scope关联到view上。Dom操作的部分最好把它放入指令里面;


Directive

应用中最复杂的部分应该在指令中，下面来扩展前面的例子，提供一个按钮，通过这个按钮向服务里面添加一本书。

1
2
3
4
5
6
7
8
9
10
11
module.directive('addBookButton',['BookService',function(BookService){
	return {
		restrict:'EA',
		replace:true,
		link:function(scope,ele,attrs){
			ele.bind('click',function(){
				BookService.addbook({ title: "Star Wars", author: "George Lucas" });
			})
		}
	}
}])

创建了一个指令，目的是向books集合里面添加一本书，books已经注册在服务中，所以可以直接注入服务进行使用。下面将指令应用到视图中

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


每当点击按钮的时候都会添加那本书，如果将控制器上面添加一个addBook方法呢，

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

可以得到同样的结果，但是如果需要复用的话，只能copy这段代码，但是通过指令的方式，就会很方便了