一、Dependency Injection（依赖注入）
依赖注入（DI）是一个软件设计模式，处理代码如何得到它所依赖的资源。
关于DI更深层次的讨论，可以参观Dependency Injection（http://en.wikipedia.org/wiki/Dependency_injection），Inversion of Control（http://martinfowler.com/articles/injection.html），也可以参观软件设计模式的书。
1. DI in a nutshell（简说DI）
object或者function，只能够通过以下三种方式获取他们依赖的资源：
1) 可以通过new运算符创建依赖的资源。
2) 可以通过全局变量查找依赖的资源。
3) 可以通过参数传入依赖的资源。
1、2两种方式，并不是最佳的，因为它们对依赖关系进行hard code，这使得修改依赖关系时，不是不可能，但会变得比较复杂。这对于测试来说尤其是个问题，通常在独立测试时，希望能够提供模拟的依赖资源。
第3种方法相对来说最可行，因为它去除了从组件（component）中定位依赖的责任。依赖仅仅交给组件就可以了。
function SomeClass(greeter) { this.greeter = greeter}SomeClass.prototype.doSomething = function(name) { this.greeter.greet(name);} 上面的例子，SomeClass不用关心定位greeter这个依赖，它仅仅在运行时传递greeter。
这样是比较合适的，但它将获取依赖资源的责任交给了负责构建SomeClass的代码那里。
为了管理创建依赖的责任，每一个angular应用都有一个injector（http://code.angularjs.org/1.0.2/docs/api/angular.injector）。injector是一个服务定位器，负责定位并创建依赖的资源。
请求依赖，解决了hard code的问题，但它意味着injector需要贯穿整个应用。传递injector，会破坏Law of Demeter（http://baike.baidu.com/view/823220.htm）。为了纠正这个问题，我们将依赖查找的责任转给injector。
上面说了那么多，看看下面经我修改过的例子，合并了原文的两个例子，分别在angular内、外使用inject：
<!DOCTYPE HTML><html lang="zh-cn" ng-app="MainApp"><head> <meta charset="UTF-8"> <title>injector</title></head><body><div ng-controller="MyController"> <button ng-click="sayHello()">Say Hello</button></div><script src="../angular-1.0.1.js" type="text/javascript"></script><script type="text/javascript"> //创建OtherModule这个module，相当于外部的module var otherModule = angular.module("OtherModule", []); //教injector如何创建"greeter" //注意，greeter本身需要依赖$window otherModule.factory("greeter", function ($window) { //这里是一个工厂方法，负责创建greet服务 return { greet:function (text) { $window.alert(text); } }; }); //下面展示在非当前module中，通过injector调用greet方法： //从module中创建新的injector //这个步骤通常由angular启动时自动完成。 //必须引入'ng'，angular的东东 //故意颠倒顺序，暂时证实这玩意的顺序是无所谓的。。 var injector = angular.injector(['OtherModule','ng']); //请求greeter这个依赖。 var g = injector.get("greeter"); //直接调用它~ g.greet("Hi~My Little Dada~"); //这里是当前的主app，需要依赖OtherModule var mainApp = angular.module("MainApp", ["OtherModule"]); //留意Controller的定义函数的参数，在这里直接注入$scope、greeter。 // greeter服务是在OtherModule中的 mainApp.controller("MyController",function MyController($scope,greeter) { $scope.sayHello = function() { greeter.greet("Hello Kitty~~"); }; } ); //ng-controller已经在背后默默地做了这个事情 //injector.instantiate(MyController);</script></body></html>
新闻热点
疑难解答
图片精选
