AngularJS_4 Dependency Injection（依赖注入）

(This is the note of angular course in HKUST.)

为了方便整理思路和回忆，这篇博客还是不写蹩脚的英文了。

AngularJS有多种可用的代码形式来实现依赖注入，最清晰明确的是下面这种——Inline array annotation：

module.controller('MyController',['$scope','myFactory',function($scope,myFactory){...}])
           

module为控制全页面的模块，通过其controller接口声明一个新的控制器。该接口包含两个参数，第一个为该控制器的名称，第二个为依赖注入列表。上述例子中，一个注入了三个实体，分别是scope模块，工厂类与本地函数（本地函数可以调用前两者）。在形式上，后续三个实体全是以注入形式声明，反过来，该控制器依赖于这三个实体。理论上三个实体的代码都可以在远端定义（这里第三个实体，即本地功能实现直接以代码形式给出），控制器本身并不清楚三个实体的定义，这种形式更利于架构解耦。

scope模块和本地函数的功能都很清楚了，实现变量绑定和本地功能。其中scope模块，由于其便利性，一般都会注入。可以发现，这两个实体主要只是借用了依赖注入的形式，也可以用传统形式实现。应该是出于架构一直上的考虑，angular选择了全部采用依赖注入。

首先，得了解Angular Service。它是lazily instantiated，只在需要的时候实例化。各个Service可以存储在系统的不同位置。其代码可以通过依赖注入的方式，在整个App范围内共享。Angular提供很多Built-in Service（内建），用

$

符号开头（比如我们常用的scope service），常用的如下：

我们可以通过Angular预留的接口实现自定义的Service，一共有的有

service();factory();provider();constant();value();

五个接口用于实现不同功能的Service，常用的有前两个，它们的定义方式如下：

angular.module('myApp')
    .factory('myFactory', function() {
        var myfac = {};
        var dishes = [...];
        myfac.getDishes = function() {
            return  dishes;
        };
        myfac.getDish = function(index) {
            return  dishes[index];
        };
        return  myfac;
    }

    .service('myService', function() {
        var dishes = [...];
        this.getDishes = function(){
            return dishes;
        };
        this.getDish = function(index)  
        {
            return dishes[index];
        };
});
           

它们的使用方式相同，以最开始的定义举例，在控制器函数内，可用下面的方式调用：

$scope.dishes = myFactory.getDishes()
$scope.favoriteDish = myService.getDish()
           

关于Service、Factory与Provider的对比，网上有一篇很详细的讲解，请参考——http://blog.csdn.net/lglgsy456/article/details/36902179