0%

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

发表于 更新于 Valine：
本文字数： 2.3k 阅读时长 ≈ 2 分钟
  • 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这段代码，但是通过指令的方式，就会很方便了