codecamp

angularjs的依赖注入

大纲
  1. 1. 推断式注入
  2. 2. 标记注入
  3. 3. 内联注入

AngularJS为我们提供了angular.injector(modules)DI注入注射器。但是在我们使用注入的时候常常是不需要关心具体的如何注入。我们只需要按照其规则书写我们的angularjs代码就会很容易的得到angularjs的DI特性。

一般有三种方法来做依赖注入。

推断式注入

在angularjs中我们可以在我们需要注入的地方按照名称注入,这里要求参数名称必须和注入服务实例名称相同,一种名称约定。angularjs会提取参数名称查找相应DI实例注入。


var myModule = angular.module('myModule', []);
myModule.factory('$alert', function($window) {
    return {
        alert: function(text) {
            $window.alert(text);
        }
    };
});
var myController = function($scope, $alert) {
    $scope.message = function(msg) {
        console.log(msg);
        $alert.alert(msg);
    };
};
myModule.controller("myController", myController);

标记注入

在angularjs中我们可以利用$inject标注DI注入,这里需要注入服务名称的顺序和构造参数名对应.这里可以解决以上约定的死板性。


var myModule = angular.module('myModule', []);
myModule.factory('$alert', ['$window', function($window) {
    return {
        alert: function(text) {
            $window.alert(text);
        }
    };}]);
var myController = function($scope, $alert) {
    $scope.message = function(msg) {
        console.log(msg);
        $alert.alert(msg);
    };
};
myController.$inject = ['$scope', '$alert'];
myModule.controller("myController", myController);

在这里,


var myController = function($scope, $alert) {
    $scope.message = function(msg) {
        console.log(msg);
        $alert.alert(msg);
    };
};

我们可以将$scope$alert改为任意的参数名,但是myController.$inject = ['$scope', '$alert'];必须要有的,且数组的元素与实际的服务名一致,顺序与controller中的参数顺序一致。

内联注入

对于directives,factory,filter等特殊指令使用$inject标注注入使用不是那么友好,angularjs特别增加了内联注入。如上面的$alert服务。


myModule.factory('$alert', ['$window', function($window) {
   return {
       alert: function(text) {
       $window.alert(text);
    };
}]);

这里的$window就是采用内联注入的方式。同样的道理,在一些工厂方法中,比如controller、directive等,也可以采取这种方式来依赖注入。


angular.module('app', [])
.controller('controllerName', [
    'dep1',
    'dep2',
    ...,
    function(dep1, dep2, ...) {
    ...
    }
]);



创建可复用angularjs组件
如何在自定义的directive中使用自定义的filter
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }