热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

AngularJs学习笔记--DependencyInjection(DI,依赖注入)原版地址:http:code.angularjs.org1.0.2docsguidedi一、Dep

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

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

 

一、Dependency Injection(依赖注入)

  依赖注入(DI)是一个软件设计模式,处理代码如何得到它所依赖的资源。

  关于DI更深层次的讨论,可以参观Dependency Injectionhttp://en.wikipedia.org/wiki/Dependency_injection),Inversion of Controlhttp://martinfowler.com/articles/injection.html),也可以参观软件设计模式的书。

  1. DI in a nutshell(简说DI

  object或者function,只能够通过以下三种方式获取他们依赖的资源:

    1) 可以通过new运算符创建依赖的资源。

    2) 可以通过全局变量查找依赖的资源。

    3) 可以通过参数传入依赖的资源。

  12两种方式,并不是最佳的,因为它们对依赖关系进行hard code,这使得修改依赖关系时,不是不可能,但会变得比较复杂。这对于测试来说尤其是个问题,通常在独立测试时,希望能够提供模拟的依赖资源。

  第3种方法相对来说最可行,因为它去除了从组件(component)中定位依赖的责任。依赖仅仅交给组件就可以了。

function SomeClass(greeter) {
this.greeter = greeter
}

SomeClass.prototype.doSomething
= function(name) {
this.greeter.greet(name);
}
  上面的例子,SomeClass不用关心定位greeter这个依赖,它仅仅在运行时传递greeter

  这样是比较合适的,但它将获取依赖资源的责任交给了负责构建SomeClass的代码那里。

  为了管理创建依赖的责任,每一个angular应用都有一个injectorhttp://code.angularjs.org/1.0.2/docs/api/angular.injector)。injector是一个服务定位器,负责定位并创建依赖的资源。

  请求依赖,解决了hard code的问题,但它意味着injector需要贯穿整个应用。传递injector,会破坏Law of Demeterhttp://baike.baidu.com/view/823220.htm)。为了纠正这个问题,我们将依赖查找的责任转给injector

  上面说了那么多,看看下面经我修改过的例子,合并了原文的两个例子,分别在angular内、外使用inject

DOCTYPE HTML>
<html lang="zh-cn" ng-app="MainApp">
<head>
<meta charset="UTF-8">
<title>injectortitle>
head>
<body>
<div ng-controller="MyController">
<button ng-click="sayHello()">Say Hellobutton>
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)。在上面的例子中,$scopegreeter是两个需要被注入到函数的服务(名称也一致)。

  虽然这样做很简单,但这方法在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) {
...;
}]);
  记住,所有注释风格都是等价的,可以被用在支持injectionangular中的任何地方。
 

三、Where can I user DI

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

  1. DI in controllers

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

var MyCOntroller= function(dep1, dep2) {
...
}
MyController.$inject
= ['dep1', 'dep2'];
MyController.prototype.aMethod
= function() {
...
}
  2. Factory methods

  factory方法是负责创建大多数angular对象。例如directiveservicefilterfactory方法注册在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) {
  ...
}]);

推荐阅读
  • 如何使用Java获取服务器硬件信息和磁盘负载率
    本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务,并获取服务器的磁盘信息,并将结果输出。然后在本地使用JS编写一个AJAX脚本,远程请求服务端的程序,得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ... [详细]
  • 本文讨论了一个关于cuowu类的问题,作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案,并给出了两个可能导致错误的原因。 ... [详细]
  • ZSI.generate.Wsdl2PythonError: unsupported local simpleType restriction ... [详细]
  • 本文讨论了如何在codeigniter中识别来自angularjs的请求,并提供了两种方法的代码示例。作者尝试了$this->input->is_ajax_request()和自定义函数is_ajax(),但都没有成功。最后,作者展示了一个ajax请求的示例代码。 ... [详细]
  • Spring常用注解(绝对经典),全靠这份Java知识点PDF大全
    本文介绍了Spring常用注解和注入bean的注解,包括@Bean、@Autowired、@Inject等,同时提供了一个Java知识点PDF大全的资源链接。其中详细介绍了ColorFactoryBean的使用,以及@Autowired和@Inject的区别和用法。此外,还提到了@Required属性的配置和使用。 ... [详细]
  • 本文介绍了OpenStack的逻辑概念以及其构成简介,包括了软件开源项目、基础设施资源管理平台、三大核心组件等内容。同时还介绍了Horizon(UI模块)等相关信息。 ... [详细]
  • 本文介绍了在go语言中利用(*interface{})(nil)传递参数类型的原理及应用。通过分析Martini框架中的injector类型的声明,解释了values映射表的作用以及parent Injector的含义。同时,讨论了该技术在实际开发中的应用场景。 ... [详细]
  • 一、Struts2是一个基于MVC设计模式的Web应用框架在MVC设计模式中,Struts2作为控制器(Controller)来建立模型与视图的数据交互。Struts2优点1、实现 ... [详细]
  • 阿里Treebased Deep Match(TDM) 学习笔记及技术发展回顾
    本文介绍了阿里Treebased Deep Match(TDM)的学习笔记,同时回顾了工业界技术发展的几代演进。从基于统计的启发式规则方法到基于内积模型的向量检索方法,再到引入复杂深度学习模型的下一代匹配技术。文章详细解释了基于统计的启发式规则方法和基于内积模型的向量检索方法的原理和应用,并介绍了TDM的背景和优势。最后,文章提到了向量距离和基于向量聚类的索引结构对于加速匹配效率的作用。本文对于理解TDM的学习过程和了解匹配技术的发展具有重要意义。 ... [详细]
  • vue使用
    关键词: ... [详细]
  • 向QTextEdit拖放文件的方法及实现步骤
    本文介绍了在使用QTextEdit时如何实现拖放文件的功能,包括相关的方法和实现步骤。通过重写dragEnterEvent和dropEvent函数,并结合QMimeData和QUrl等类,可以轻松实现向QTextEdit拖放文件的功能。详细的代码实现和说明可以参考本文提供的示例代码。 ... [详细]
  • 本文介绍了Java工具类库Hutool,该工具包封装了对文件、流、加密解密、转码、正则、线程、XML等JDK方法的封装,并提供了各种Util工具类。同时,还介绍了Hutool的组件,包括动态代理、布隆过滤、缓存、定时任务等功能。该工具包可以简化Java代码,提高开发效率。 ... [详细]
  • flowable工作流 流程变量_信也科技工作流平台的技术实践
    1背景随着公司业务发展及内部业务流程诉求的增长,目前信息化系统不能够很好满足期望,主要体现如下:目前OA流程引擎无法满足企业特定业务流程需求,且移动端体 ... [详细]
  • 本文介绍了如何使用C#制作Java+Mysql+Tomcat环境安装程序,实现一键式安装。通过将JDK、Mysql、Tomcat三者制作成一个安装包,解决了客户在安装软件时的复杂配置和繁琐问题,便于管理软件版本和系统集成。具体步骤包括配置JDK环境变量和安装Mysql服务,其中使用了MySQL Server 5.5社区版和my.ini文件。安装方法为通过命令行将目录转到mysql的bin目录下,执行mysqld --install MySQL5命令。 ... [详细]
  • Imtryingtofigureoutawaytogeneratetorrentfilesfromabucket,usingtheAWSSDKforGo.我正 ... [详细]
author-avatar
凤凰花开清风自来_406
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有