理解ng中的依赖和注入

Angularjs中的依赖注入

一：为什么要依赖注入？

  ”依赖注入” ——，从字面意思上来说分为两个部分：一是依赖，二是注入。也就是说，当一个对象在建立时候，需要依赖于另一个对象，这是代码层的一种依赖关系；当在代码中声明了依赖关系之后，Angular通过injector注入器将所依赖的对象进行”注入”操作.

二：Angular的三种注入方式？

  推断型注入、声明式注入(标注式注入)，内联注入,下面的例子中html只有一个<div>gameName</div>
- 内联注入（最常用）

    myModule.controller('myCtrl',['$scope',function($scope1){        function($scope1){            $scope1.gameName = '棒棒';        }    }])

• 推断型注入(也就是吧里面的函数拿出来)

  注意：里面的参数(scope)不能随意换，要和被注入的对象相同,因为通常被注入的是作用域scope

    var myCtrl = function($scope){        $scope.gameName = '棒棒';    }    myModule.controller('myCtrl',myCtrl);

• 声明式注入（也就是可以换了参数的名称）

    var myCtrl = function(myName){        myName.gameName = '棒棒';    }    myCtrl.$inject = ['$scope']; //也就是改了一下函数的参数名称    myModule.controller('myCtrl',myCtrl);

三：Angular的创建自定义的注入方式(也就是创建能被注入的服务)？

• provider模式是策略模式和工厂模式的综合体
• 核心目的是为了让接口和现实分离
• 所有的provider都可以用来进行注入：provider/factory/service/constant/value
• 以下类型的函数可以接受注入：controller/directive/filter/service/factory
• Angular中的”依赖注入”是通过provider和injector这两个机制联合实现的

下面例子中html里面都是：<div>{{myName}}</div>，下面创建服务的方法，从上到下，灵活度依次变差，因为无论是factory、service、constant还是value最终都是调用provider，(请看Angularjs源码第3922行左右的provider函数)只是他们封装了一下我们看不到而已。

provider方式？

    var myModule = angular.module('myModule',[]);    myModule.provider('HelloAngular',function(){        return {            $get : function(){                var name = '棒棒';                function getName(){                    return name;                }                return {                    getName : getName                }            }        }    });    myModule.controller('myCtrl',['$scope','HelloAngular',        function($scope,HelloAngular){            $scope.myName = HelloAngular.getName();        }    ])

factory方式？（最省事）

    var myModule = angular.module("myModule", []);    myModule.factory('game', function() {        return {            gameName: '棒棒'        }    });    myModule.controller('myCtrl',['$scope','game',function($scope,game){        $scope.myName = game.gameName    }])

service方式？(里面只是一个构造函数)

    var myModule = angular.module('myModule',[]);    myModule.service('HelloAngular',function(){        this.name = '棒棒';        this.getName = function(){            return this.name;        }    });    myModule.controller('myCtrl',['$scope','HelloAngular',function($scope,HelloAngular){        $scope.myName = HelloAngular.getName();    }])

github源码：理解ng中的依赖和注入