function SomeClass(greeter) { this.greeter = greeter; } SomeClass.prototype.doSomething = function(name) { this.greeter.greet(name); }在上面的例子中, SomeClass 不需要关心 greeter 在哪里, 只需要在运行时将 greeter 传递给他即可。
// 在一个模块中提供连接信息 angular.module(‘myModule‘, []). // 告诉 injector 如何去构建一个 ‘greeter‘ // 注意, greeter 自身是依赖于 ‘$window‘ 的 factory(‘greeter‘, function($window) { // 这是一个 factory function, // 职责是为创建 ‘greet‘ 服务. return { greet: function(text) { $window.alert(text); } }; }); // 新的 injector 从 module 创建. // (这通常由 angular bootstrap 自动创建) var injector = angular.injector([‘myModule‘, ‘ng‘]); // 从 injector 获取所有依赖 var greeter = injector.get(‘greeter‘);要解决依赖关系硬编码的问题,也就意味着 injector 需要贯穿整个应用程序生命周期。传递 injector 打破了 得墨忒耳定律(Law of Demeter, 最少知识原则)。为了弥补这一点,在下面的例子中,我们通过依赖声明的方式将查找依赖的职责交给了 injector:
HTML代码:
<!-- Given this HTML --> <div ng-controller="MyController"> <button ng-click="sayHello()">Hello</button> </div>Angular代码
// 这是 controller 定义 function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(‘Hello World‘); }; } // 由 ‘ng-controller‘ directive 在后台执行 injector.instantiate(MyController);注意通过 ng-controller 实例化此类,它可以 在 controller 不知道有 injector 的情况下满足 MyController 所有的依赖。这是最好的结果。应用程序代码简单地要求所需的依赖项,无需和 injector 打交道。这个设置不违背 得墨忒耳定律。
function MyController($scope, greeter) { ... }给定一个 function, injector 通过检查函数声明和提取参数名称可以推断出 service 的名称 。在上面的例子中, $scope 和 greeter 是需要注入 function 的两个 services。
var MyController = function(renamed$scope, renamedGreeter) { ... } MyController[‘$inject‘] = [‘$scope‘, ‘greeter‘];在这种情况下,$inject数组中的值的顺序必须和要注入的参数的顺序一致。使用上面的代码片段作为一个例子, ‘$scope‘ 将注入到 “renamed$scope”, 而“greeter” 将注入到 “renamedGreeter”。再次提醒注意 $inject 注解必须和 函数声明时的实际参数保持同步(顺序,个数...)。
someModule.factory(‘greeter‘, function($window) { ... });因为需要使用临时变量,导致了代码膨胀为:
var greeterFactory = function(renamed$window) { ... }; greeterFactory.$inject = [‘$window‘]; someModule.factory(‘greeter‘, greeterFactory);这也是提供第三种注解方式的原因.
someModule.factory(‘greeter‘, [‘$window‘, function(renamed$window) { ... }]);记住,所有的 annotation 风格都是等价的,在 Angular 中,只有支持注入的地方都可以使用.
someModule.controller(‘MyController‘, [‘$scope‘, ‘dep1‘, ‘dep2‘, function($scope, dep1, dep2) { ... $scope.aMethod = function() { ... } ... }]);这避免了为 controllers 创建全局函数,并且在代码压缩时继续可用.
angular.module(‘myModule‘, []). config([‘depProvider‘, function(depProvider){ ... }]). factory(‘serviceId‘, [‘depService‘, function(depService) { ... }]). directive(‘directiveName‘, [‘depService‘, function(depService) { ... }]). filter(‘filterName‘, [‘depService‘, function(depService) { ... }]). run([‘depService‘, function(depService) { ... }]);
原文:http://blog.csdn.net/renfufei/article/details/19038123