系统执行过程:
1.创建Module
2.注册Provider
3.配置Provider
4.RUN
一、providerCache 用来存储 [provider结构]
预先存储
1.$provide
providerCache.$provide = {
provider: supportObject(provider),
factory: supportObject(factory),
service: supportObject(service),
value: supportObject(value),
constant: supportObject(constant),
decorator: decorator
}
2.$injector: providerCache.$injector = providerInjector = createInternalInjector() = {
invoke: invoke,
instantiate: instantiate,
get: getService,
annotate: createInjector.$$annotate,
has: function (name) {
return providerCache.hasOwnProperty(name + providerSuffix) || cache.hasOwnProperty(name);
}
}
3. 通过$provide.provider向providerCache注册其他的provider
function provider(name, provider_) {
assertNotHasOwnProperty(name, 'service');
if (isFunction(provider_) || isArray(provider_)) {
provider_ = providerInjector.instantiate(provider_);
}
if (!provider_.$get) {
throw $injectorMinErr('pget', "Provider '{0}' must define $get factory method.", name);
}
return providerCache[name + providerSuffix] = provider_;
}
整个注册过程:
1. setupModuleLoader得到Module
2. 通过Module的provider()方法开始注册provider
3. 将provider预先放到invokeQueue中,包含:
[provider=>'$provide', method=>'provider(),service(),factory()',
arguments=>'recipeName, factoryFunction'
]
4. runInvokeQueue 来执行 invokeQueue
function runInvokeQueue(queue) {
var i, ii;
for (i = 0, ii = queue.length; i < ii; i++) {
var invokeArgs = queue[i],
provider = providerInjector.get(invokeArgs[0]);
provider[invokeArgs[1]].apply(provider, invokeArgs[2]);
}
}
5.通过providerInjector的getService('$provide')获取 $provide
6.$provide的provider()将provider放入providerCache
二、整个配置运行过程
1.setupModuleLoader得到Module
2.通过Module的config()方法开始配置
3.将配置模块预先放到configBlocks中,包含:
[provider=>'$injector', method=>'invoke()',
arguments=>'configFn'
]
4. runInvokeQueue 来执行 configBlocks
5.通过providerInjector的getService('$injector')获取 $injector
6.$injector的invoke进行 provider的DI,此时的provider为注册时的[provider结构]
因此被DI的provider应该使用名字+"Provider",否则会提示错误。
throw $injectorMinErr('unpr', "Unknown provider: {0}", path.join(' <- '));
注:
$injector.get 为得到[provider结构]
$injector.invoke 为对[provider结构]的DI
三、instanceCache 用来存储 [provider的实例]
1. $injector:instanceCache.$injector = instanceInjector = createInternalInjector();
instanceInjector.invoke 进行各种 [provider实例]的 DI
注:
$injector.get 为得到[provider实例]
$injector.invoke 为对[provider实例]的DI
四、Module的创建
通过 setupModuleLoader进行模块创建:
参数1: 模块名称
参数2: requires
参数3: 配置函数,类似于 module.config
五、providerInjector和instanceInjector
providerInjector [provider结构]注入器
instanceInjector [provider实例]注入器
分享到:
相关推荐
在学习这个案例时,开发者应关注如何配置Spring、SpringMVC和MyBatis的集成,理解BootStrap如何应用于页面设计,以及AngularJS如何实现前端的数据绑定和逻辑处理。同时,了解每个技术的原理和使用场景,将有助于深入...
AngularJS是一个流行的前端框架,它的核心特性之一就是依赖注入(Dependency Injection,简称DI)。依赖注入是设计模式的一种,它实现了控制反转(Inversion of Control,简称IoC),使得代码之间的耦合度降低,提高...
AngularJS的依赖注入(DI)系统是另一个关键组件,它允许模块之间轻松共享服务,如HTTP通信、路由处理等。开发者无需关心对象如何创建和管理,只需声明所需的服务,框架就会自动提供。 **3. MVC架构:** AngularJS...
- **依赖注入(DI)**:这是一种用于管理对象依赖关系的设计模式,AngularJS内置支持依赖注入机制,有助于简化组件之间的依赖管理。 - **强大的社区支持**:由于其广泛的应用和大量的开发者社区,AngularJS拥有...
- **依赖注入**: AngularJS通过依赖注入(DI, Dependency Injection)机制来管理组件间的依赖关系,使代码更易于组织和维护。 - **指令系统**: 指令是AngularJS的核心特性之一,它允许开发者定义新的HTML标签或属性...
1. **双向数据绑定**:AngularJS 的核心特性之一是双向数据绑定,它使得模型(model)和视图(view)之间的数据保持同步。任何一方的改变都会立即反映到另一方,大大简化了开发者的工作。 2. **指令系统**:AngularJS ...
1. **双向数据绑定**:AngularJS的核心特性之一,它实现了视图和模型之间的同步更新。当模型发生变化时,视图会自动更新;反之,当用户在视图上进行交互时,模型也会相应更新。 2. **指令系统**:AngularJS扩展了...
1. **依赖注入**:AngularJS提供了一种强大的依赖注入(Dependency Injection,DI)机制,使得开发者可以方便地获取和管理组件间的依赖关系,无需关心具体实现细节,提高了代码的可测试性和可维护性。 2. **指令...
AngularJS的核心特性之一是双向数据绑定,它使得模型(model)和视图(view)之间的数据同步变得极其简单。通过`ng-model`指令,可以在HTML元素上直接绑定到应用程序的数据,任何一方的改变都会自动反映到另一方。 2. ...
依赖注入(DI, Dependency Injection)是AngularJS中的另一个关键特性。它允许组件声明其依赖,而无需关心如何创建或查找这些依赖。AngularJS自动管理这些依赖的生命周期和注入,降低了组件之间的耦合度,提高了代码的...
2. **依赖注入**:AngularJS的依赖注入(DI)系统是其强大的功能之一,它自动处理对象的创建和依赖关系。在1.2中,DI进一步优化,提升了性能,同时也增强了错误检测,使得调试更加方便。 3. **数据绑定**:...
- **依赖注入**:通过依赖注入(DI),AngularJS能够有效地管理对象之间的依赖关系,提高代码的可维护性和可测试性。 #### AngularJS与其他技术的区别 在构建动态Web应用时,开发者通常会采用类库或框架来弥补HTML...
AngularJS的数据绑定是其核心特性之一,它允许视图(View)和模型(Model)之间的双向通信。在AngularJS中,我们可以使用`{{ }}`双括号语法将模型数据直接展示在视图上,同时,当模型数据发生变化时,视图也会实时...
5. **路由**:AngularJS 2的路由系统允许用户在不同的页面间导航,通过激活守卫和懒加载策略可以实现高效的应用结构。 6. **服务**:AngularJS 2中的服务可以提供共享功能,如数据访问、API调用等。它们可以通过DI...
- **依赖注入**:AngularJS使用依赖注入(Dependency Injection, DI)机制来管理组件间的依赖关系,使得组件更加独立和易于测试。 - **指令(Directives)**:AngularJS允许开发者定义自己的指令来扩展HTML的功能,...
- **依赖注入**:AngularJS的另一个关键特性是依赖注入(Dependency Injection,DI),它允许开发者声明所需的对象和服务,而无需关心它们如何被创建或管理,从而降低了代码的耦合度。 2. **指令系统** - **...
1. **双向数据绑定**:AngularJS的核心特性之一,使得视图和模型之间的数据自动保持同步,无需手动操作DOM。 2. **指令系统**:AngularJS扩展HTML的机制,如ng-repeat、ng-if等,用于创建可重用的UI组件。 3. **...
AngularJS的核心特点之一是它的双向数据绑定。这一特性使得视图和模型之间的数据保持同步,当模型发生变化时,视图会自动更新,反之亦然。双向数据绑定大大简化了开发者的工作,减少了手动同步视图和模型状态的代码...
- **依赖注入**:依赖注入(Dependency Injection, DI)是AngularJS的一个关键特性,它帮助开发者管理对象之间的依赖关系,提高了代码的可测试性和可重用性。 3. **开发环境搭建**: - **安装Node.js**:Node.js...
- **依赖注入(Dependency Injection,DI)**:AngularJS的核心特性之一,自动管理对象之间的依赖关系,使得代码更加模块化,易于测试和维护。 - **双向数据绑定(Two-Way Data Binding)**:AngularJS中的数据模型...