AngularJs学习笔记--Dependency Injection(DI,依赖注入)

原版地址:http://code.angularjs.org/1.0.2/docs/guide/di

一、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>

  注意,因为有ng-controller,初始化了MyController,它可以满足MyController的所有依赖需要,让MyController无须知道injector的存在。这是一个最好的结果。应用代码简单地请求它所需要的依赖而不需要处理injector。这样设置,不会打破Law of Demeter。

二、Dependency Annotation(依赖注释,说明依赖的方式)

  injector如何知道什么服务需要被注入呢?

  应用开发者需要提供被injector用作解决依赖关系的注释信息。所有angular已有的API函数,都引用了injector,每一个文档中提及的API都是这样。下面是用服务名称信息注释我们的代码的三个等同的方法。

  1. Inferring Dependencies(隐含依赖)

  这是获取依赖资源的最简单的方式,但需要假定function的参数名称与依赖资源的名称一致。

function MyController($scope, greeter) {
     ...
}

  函数的injector,可以通过检查函数定义并提取函数名称,猜测需要注入的service的名称(functionName.toString(),RegExp)。在上面的例子中,$scope和greeter是两个需要被注入到函数的服务(名称也一致)。

  虽然这样做很简单,但这方法在javascript混淆压缩后就行不通了,因为参数名称会被改变。这让这个方式只能对pretotyping(产品可用性原型模拟测试法,http://www.pretotyping.org/,http://tech.qq.com/a/20120217/000320.htm)和demo应用有作用。

  2. $inject Annotation($inject注释)

  为了允许脚本压缩器重命名函数的方法后,仍然能够注入正确的服务,函数必须通过$inject属性来注释依赖。$inject属性是一个需要注入的服务的名称的数组。

var MyController = function(renamed$scope, renamedGreeter) {

     ...

}
//这里依赖的东东,如果不在当前的module中,它还是不认识的。//需要在当前module中先依赖对应的module。跟之前的例子差不多。但我不知道这是不是正确的方法。
MyController.$inject = [‘$scope‘, ‘greeter‘];

  需要小心的是,$inject的顺序需要与函数声明的参数顺序保持一致。

  这个注释方法,对于controller声明来说是有用的,因为它与函数一起指定注释信息。

  3. inline Annotation(行内注释)

  有时候,不方便使用$inject注释的方式,例如注释directive的时候。

  例如:

someModule.factory(‘greeter‘, function($window) {

    ...;

});

  因为需要临时变量(防止压缩后不能使用),所以代码会膨胀为:

var greeterFactory = function(renamed$window) {
    ...;
};
greeterFactory.$inject = [‘$window‘];
someModule.factory(‘greeter‘, greeterFactory);

  由于这样(代码膨胀),angular还提供了第三种注释风格:

someModule.factory(‘greeter‘, [‘$window‘, function(renamed$window) {
     ...;
}]);

  记住,所有注释风格都是等价的,可以被用在支持injection的angular中的任何地方。

三、Where can I user DI?

  DI遍及整个angular。它通常使用在controller和factory方法中。

  1. DI in controllers

  controller是负责(描述)应用行为的类。建议的controller声明方法是:

var MyController = function(dep1, dep2) {
     ...
}
MyController.$inject = [‘dep1‘, ‘dep2‘];
MyController.prototype.aMethod = function() {
     ...
}

  2. Factory methods

  factory方法是负责创建大多数angular对象。例如directive、service、filter。factory方法注册在module中,建议的factory声明方法是:

angualar.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) {
      ...
}]);
时间: 2024-10-08 06:19:32

AngularJs学习笔记--Dependency Injection(DI,依赖注入)的相关文章

AngularJs 学习笔记(三)依赖注入

一个对象可以通过三种方式来获取对依赖对象的控制权: 1.在内部创建依赖的对象 2.通过全局变量引用这个依赖对象 3.通过参数进行传递(在这里是通过函数参数) AngularJs通过$injector注入器服务来管理依赖关系的查询和实例化,通过其get方法来获取依赖服务的实例,简单点说,它就是生产依赖对象的工厂,负责实例化AngularJs中所有的组件,包括应用的模块.指令.控制器. 可以通过三种方式进行依赖注入: 推断式依赖注入 AngularJs会推断参数的名称就是依赖的对象. 声明式依赖注入

使用Visual Studio Code开发Asp.Net Core WebApi学习笔记(六)-- 依赖注入

本篇将介绍Asp.Net Core中一个非常重要的特性:依赖注入,并展示其简单用法. 第一部分.概念介绍 Dependency Injection:又称依赖注入,简称DI.在以前的开发方式中,层与层之间.类与类之间都是通过new一个对方的实例进行相互调用,这样在开发过程中有一个好处,可以清晰的知道在使用哪个具体的实现.随着软件体积越来越庞大,逻辑越来越复杂,当需要更换实现方式,或者依赖第三方系统的某些接口时,这种相互之间持有具体实现的方式不再合适.为了应对这种情况,就要采用契约式编程:相互之间依

.net core学习笔记(三)-依赖注入

.net core 中使用了大量的依赖注入,对依赖注入一直是一知半解,总想不透,项目中用的是一个网上的开源框架,从底层到web层都是用的构造函数依赖注入. 然后了在继承ActionFilterAttribute的过滤器中,重写的OnActionExecuted需要用到依赖注入的服务,然后就想在子类中的构造函数中进行依赖注入,但是发现OnActionExecuted执行前根本不会进入到子类的构造函数中,查了下资料,发现时因为OnActionExecuted会在其父类的构造函数执行时触发,突然就懵了

ng2 学习笔记(三)依赖注入与服务

前两篇文章简单介绍了ng2的一些基础用法,基本和ng1的使用风格差不多,只是写法和开发方式变化比较大. 这一篇,来总结一下ng的依赖注入与服务.官方的教程上是把他分开来讲的,个人感觉放在一起比较容易理解. 同样,这篇文章适合新手阅读.好,那我们开始正文: 在ng1,也有依赖注入的概念,ng1的依赖注入方式这里就不去多叙述了,有兴趣的可以查阅一下ng1的依赖注入方式. ng2依然有这个概念.下面举例来说明ng2里怎么使用依赖注入以及服务: [场景]:在某个项目里面,有很多页面都用到同一个功能,这个

AngularJs学习笔记--directive

原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directives匹配HTML并执行.这允许directive注册行为或者转换DOM结构. Angular自带一组内置的directive,对于建立Web App有很大帮助.继续扩展的话,可以在HTML定义领域特定语言(domain specific language ,DSL). 一.在HTML中引用direc

AngularJs学习笔记--Guide教程系列文章索引

在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看不懂,希望大家在参观的过程中指出其中的错误).经过1个多月断断续续的努力,终于把Guide里面的文章基本上都弄出来.Guide中的部分章节,由于重复的部分似乎有点多,而且篇幅较短,这里就没有列出来. 文章列表如下: AngularJs学习笔记--bootstrap AngularJs学习笔记--ht

spring in action学习笔记一:DI(Dependency Injection)依赖注入之CI(Constructor Injection)构造器注入

一:这里先说一下DI(Dependency Injection)依赖注入有种表现形式:一种是CI(Constructor Injection)构造方法注入,另一种是SI(Set Injection) set 注入.这篇随笔讲的是第一种构造方法注入(Constructor Injection). 其实DI(Dependency Injection)依赖注入你不妨反过来读:注入依赖也就是把"依赖"注入到一个对象中去.那么何为"依赖"呢?依赖就是讲一个对象初始化或者将实例

Spring:(二)DI依赖注入方式

DI 依赖注入 DI(Dependency Injection)依赖注入,说简单一点就将类里面的属性在创建类的过程中给属性赋值,即将对象依赖属性(简单值,集合,对象)通过配置设值给该对象. 属性注入的方式 构造方法的方式 set方法的方式 工厂方法注入 主要学习前两种方式 构造方法的方式 当是构造方法时注入Bean的属性值(简单值,集合,对象) 利用<constructor-arg>标签进行属性的注入 name:被设置属性的名 value:被设置属性的值 编写用构造方法的pojo 1 pack

Spring详解(三)------DI依赖注入

上一篇博客我们主要讲解了IOC控制反转,也就是说IOC 让程序员不在关注怎么去创建对象,而是关注与对象创建之后的操作,把对象的创建.初始化.销毁等工作交给spring容器来做.那么创建对象的时候,有可能依赖于其他的对象,即类的属性如何赋值?这也是我们这篇博客讲解 Spring 另一个核心要点:DI依赖注入. PS:本篇博客源码下载链接:http://pan.baidu.com/s/1c2xVUDi密码:v1h3 1.什么是DI依赖注入? spring动态的向某个对象提供它所需要的其他对象.这一点