刚开始看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
相关推荐
├最新AngularJS开发宝典—第044讲 自定义过滤器之手机加星过滤器实例.mp4 ├最新AngularJS开发宝典—第045讲 SPA应用与自定义指令使用场景应用场景分析.mp4 ├最新AngularJS开发宝典—第046讲 自定义指令directive...
并通过丰富的开发实例向读者展示了构建复杂应用的完整过程,包括学习使用AngularJS特有的基于DOM的模板系统,实现复杂的后端通信,创建漂亮的表单,制作导航,使用依赖注入系统,提高Web应用的安全性,使用Jasmine...
基本功能,包括模块、作用域、控制器、表达式、指令、路由、依赖注入等,重要的是书中对每一个概念 的讲解都配合了恰如其分的示例和代码,让读者通过动手实践,切身体会到这些概念的含义和价值。本书 后半部分深入到...
本书是资深全栈工程师的代表性著作,由拥有丰富..., 双向数据绑定, 依赖注入, 作用域, 控制器, 路由, 客户端模板, 服务, 通过XHR实现动态内容, 测试, 过滤器, 定制表单验证, 深度测试, 定制指令, 专业工具, 对IE的支持
AngularJS开发指南29:将服务注入到控制器中 | AngularJS中文社区AngularJS开发指南29:将服务注入到控制器中发表:130329
优雅的 AngularJS 表单验证注入器这个怎么运作此模块仅在未定义时从 JSON 对象优雅地注入 Angular 验证规则。 例如,验证规则为{minlength:1} , 这个输入会变成<input name="foo" /> <input name="foo" ng...
全书 35 章,由浅入深地讲解了 AngularJS 的基本概念和 基本功能,包括模块、作用域、控制器、表达式、指令、路由、依赖注入等,重要的是书中对每一个概念 的讲解都配合了恰如其分的示例和代码,让读者通过动手实践,切身...
AngularJS提供了一个至高无上的依赖注入机制。它提供了一个可注入彼此依赖下列核心组件。 值 工厂 服务 提供者 常值 值 值是简单的JavaScript对象,它是用来将值传递过程中的配置相位控制器。 //define a ...
全书35章,由浅入深地讲解了AngularJS的基本概念和基本功能,包括模块、作用域、控制器、表达式、指令、路由、依赖注入等,重要的是书中对每一个概念的讲解都配合了恰如其分的示例和代码,让读者通过动手实践,切身...
angularjs作为一个全ajax的框架,对于请求,如果页面上不做任何操作的话,在结果反回来之前,页面是没有任何响应的,不像普通的HTTP请求,会有进度条之类
Services / Factories 这些核心服务集可通过依赖注入(DI)来供你的应用使用。 例如:$compile, $http, $location… Filters 这些ng模块中的核心过滤器用于在指令和表达式被渲染前转换模板数据。 例如:filter, ...
angular2 的依赖注入包含了太多的内容,其中的一个重点就是注入器,而注入器又非常难理解,今天我们不深入介绍注入器的内容,可以参考官方文档,我们今天来说注入器的层级。 也就是组件获取服务的容器会选择具体哪一...
本地化设置和AngularJS过滤器275 102处理翻译277 翻译AngularJS模板中的字符串277 使用过滤器278 使用指令279 翻译JavaScript代码中的字符串280 103范式、秘诀和技巧282 按照设定的地区初始化应用282 将地区...
在本文中,我们将学习在AngularJS控制器中实现依赖注入。
AngularJS 过滤器将句子和特别是团队名称大写。 分叉和大量修改 安装(尚未发布) 您可以使用安装过滤器: $ bower install yk.filters.capitalize 然后你必须将它包含在你的 HTML 中: < script src =" ...
本书是资深全栈工程师的代表性著作,由拥有丰富..., 双向数据绑定, 依赖注入, 作用域, 控制器, 路由, 客户端模板, 服务, 通过XHR实现动态内容, 测试, 过滤器, 定制表单验证, 深度测试, 定制指令, 专业工具, 对IE的支持
angularjs-datatables-service 用于angular.datatables.js的AngularJS服务包装器 概述 这是用于angular-datatables.js的AngularJS服务包装器。 安装 npm install angularjs... 然后,您可以通过将其注入到控制器中来开
AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或...
AngularJS日期选择器指令 特征 Angular i18n支持 动态的最小和最大日期限制 设置 包括所需的库 < link rel =" stylesheet " href =" mnx-date.css " > < script src =" angular.js " > </ script &...
AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或...