`
openxtiger
  • 浏览: 147357 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

[angularjs之我见]注入器

 
阅读更多

刚开始看angularjs时,总是云里雾里的,出现了很多新的理念。最后硬着头皮看源码,还真发现许多奇妙处,记录下来:

注入器Injector

 

anguarjs的注入器主要是用来将provider作为参数注入到被注入的函数中。

其包合:

1.invoke(fn, self, locals):通过fn的参数列表(获取[]方式指定,或$inject)得到需要注入的provider作为fn的参数调用fn。

注:如果提供了locals,系统会先通过locals查找注入列表,只有找不到时,才找provider

 

args.push(
        locals && locals.hasOwnProperty(key)
           ? locals[key]: getService(key)
);

 2.annotate(fn),获得注入列表

 

有三种方式:

A.通过推测来注释:通过函数参数推断

B.显式注释:在函数中指定$inject

C.内联注释:通过数组方式,最后一个元素为函数

 

3.instantiate(Type, locals):通过Type创建一个实力化对象,Type函数默认支持DI

其实他的原理是通过Type创建对象,再通过invoke函数实现DI,此时第二个参数self为创创建的对象。

 

4.get(serviceName):调用getService,根据serviceName获取provider,此时很重要的是provider的cache,和获取的方式。

有两种注入器,一种是ProviderInjector,另外是InstanceInjector

他们的cache分别是providerCache和instanceCache

而且获取方式分别为:

 

 

function () {
    throw $injectorMinErr('unpr', "Unknown provider: {0}", path.join(' <- '));
}

和

function (servicename) {
    var provider = providerInjector.get(servicename + providerSuffix);
    return instanceInjector.invoke(provider.$get, provider);
}

 从上可以看出,providerCache一定存在指定的provider,否则会报错。

InstanceInjector获取时,会先从providerCache中获得provider,再通过instanceInjector的invoke,对获得的provider的$get函数做DI,所以这就是为何provider必须体供$get的函数的原因。

 

 

那DI是什么时间发生的呢?

1.在module的config中

module中的config ==>providerCache中的$injector的invoke,

此时$injector为providerInjector,所以config函数注入的将是providerCache中的Provider.

 

2.在module的runBlocks中

 

此时调用的是instanceInjector的invoke,所以被注入的都是instanceCache的Provider

 

以下是module体供的方法:

provider ==>providerCache中的$provide的provider,

factory ==>providerCache中的$provide的factory,

service ==>providerCache中的$provide的service,

value ==>providerCache中的$provide的value,

constant ==>providerCache中的$provide的constant

 

 

 

 

0
0
分享到:
评论

相关推荐

    最新AngularJS开发宝典视频教程 后盾网AngularJS培训视频教程 后盾网.txt

    ├最新AngularJS开发宝典—第044讲 自定义过滤器之手机加星过滤器实例.mp4 ├最新AngularJS开发宝典—第045讲 SPA应用与自定义指令使用场景应用场景分析.mp4 ├最新AngularJS开发宝典—第046讲 自定义指令directive...

    Mastering Web Application Development with AngularJS

    并通过丰富的开发实例向读者展示了构建复杂应用的完整过程,包括学习使用AngularJS特有的基于DOM的模板系统,实现复杂的后端通信,创建漂亮的表单,制作导航,使用依赖注入系统,提高Web应用的安全性,使用Jasmine...

    AngularJs权威教程.pdf

    基本功能,包括模块、作用域、控制器、表达式、指令、路由、依赖注入等,重要的是书中对每一个概念 的讲解都配合了恰如其分的示例和代码,让读者通过动手实践,切身体会到这些概念的含义和价值。本书 后半部分深入到...

    AngularJs权威教程

    本书是资深全栈工程师的代表性著作,由拥有丰富..., 双向数据绑定, 依赖注入, 作用域, 控制器, 路由, 客户端模板, 服务, 通过XHR实现动态内容, 测试, 过滤器, 定制表单验证, 深度测试, 定制指令, 专业工具, 对IE的支持

    AngularJS开发指南29:将服务注入到控制器中1

    AngularJS开发指南29:将服务注入到控制器中 | AngularJS中文社区AngularJS开发指南29:将服务注入到控制器中发表:13­03­29

    nui-form-for:优雅的 AngularJS 验证注入器

    优雅的 AngularJS 表单验证注入器这个怎么运作此模块仅在未定义时从 JSON 对象优雅地注入 Angular 验证规则。 例如,验证规则为{minlength:1} , 这个输入会变成&lt;input name="foo" /&gt; &lt;input name="foo" ng...

    angularJS权威指南

    全书 35 章,由浅入深地讲解了 AngularJS 的基本概念和 基本功能,包括模块、作用域、控制器、表达式、指令、路由、依赖注入等,重要的是书中对每一个概念 的讲解都配合了恰如其分的示例和代码,让读者通过动手实践,切身...

    详解AngularJS中的依赖注入机制

    AngularJS提供了一个至高无上的依赖注入机制。它提供了一个可注入彼此依赖下列核心组件。 值 工厂 服务 提供者 常值 值 值是简单的JavaScript对象,它是用来将值传递过程中的配置相位控制器。 //define a ...

    AngularJS权威指南.pdf 清晰中文完整版

    全书35章,由浅入深地讲解了AngularJS的基本概念和基本功能,包括模块、作用域、控制器、表达式、指令、路由、依赖注入等,重要的是书中对每一个概念的讲解都配合了恰如其分的示例和代码,让读者通过动手实践,切身...

    Angularjs注入拦截器实现Loading效果

    angularjs作为一个全ajax的框架,对于请求,如果页面上不做任何操作的话,在结果反回来之前,页面是没有任何响应的,不像普通的HTTP请求,会有进度条之类

    AngularJS 中文手册

    Services / Factories 这些核心服务集可通过依赖注入(DI)来供你的应用使用。 例如:$compile, $http, $location… Filters 这些ng模块中的核心过滤器用于在指令和表达式被渲染前转换模板数据。 例如:filter, ...

    Angular2 多级注入器详解及实例

    angular2 的依赖注入包含了太多的内容,其中的一个重点就是注入器,而注入器又非常难理解,今天我们不深入介绍注入器的内容,可以参考官方文档,我们今天来说注入器的层级。 也就是组件获取服务的容器会选择具体哪一...

    精通AngularJS part1

    本地化设置和AngularJS过滤器275 102处理翻译277 翻译AngularJS模板中的字符串277 使用过滤器278 使用指令279 翻译JavaScript代码中的字符串280 103范式、秘诀和技巧282 按照设定的地区初始化应用282 将地区...

    AngularJs控制器中的依赖注入

    在本文中,我们将学习在AngularJS控制器中实现依赖注入。

    ykFiltersCapitalize:AngularJS 的大写过滤器

    AngularJS 过滤器将句子和特别是团队名称大写。 分叉和大量修改 安装(尚未发布) 您可以使用安装过滤器: $ bower install yk.filters.capitalize 然后你必须将它包含在你的 HTML 中: &lt; script src =" ...

    angularjs权威教程

    本书是资深全栈工程师的代表性著作,由拥有丰富..., 双向数据绑定, 依赖注入, 作用域, 控制器, 路由, 客户端模板, 服务, 通过XHR实现动态内容, 测试, 过滤器, 定制表单验证, 深度测试, 定制指令, 专业工具, 对IE的支持

    angularjs-datatables-service:用于angular.datatables.js的AngularJS服务包装器

    angularjs-datatables-service 用于angular.datatables.js的AngularJS服务包装器 概述 这是用于angular-datatables.js的AngularJS服务包装器。 安装 npm install angularjs... 然后,您可以通过将其注入到控制器中来开

    AngularJS 依赖注入详解和简单实例

    AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或...

    mnx-date:AngularJS日期选择器指令

    AngularJS日期选择器指令 特征 Angular i18n支持 动态的最小和最大日期限制 设置 包括所需的库 &lt; link rel =" stylesheet " href =" mnx-date.css " &gt; &lt; script src =" angular.js " &gt; &lt;/ script &...

    AngularJS 依赖注入

    AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或...

Global site tag (gtag.js) - Google Analytics