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

[angularjs之我见] AngularJs 的DI实现

 
阅读更多
系统执行过程:
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.$injectorproviderCache.$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.providerproviderCache注册其他的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. 通过Moduleprovider()方法开始注册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.通过providerInjectorgetService('$provide')获取 $provide

6.$provideprovider()provider放入providerCache

二、整个配置运行过程

1.setupModuleLoader得到Module
2.通过Moduleconfig()方法开始配置
3.将配置模块预先放到configBlocks中,包含:
    [provider=>'$injector', method=>'invoke()',
        arguments=>'configFn'
    ]
4. runInvokeQueue 来执行 configBlocks
5.通过providerInjectorgetService('$injector')获取 $injector

6.$injectorinvoke进行 providerDI,此时的provider为注册时的[provider结构]
因此被DIprovider应该使用名字+"Provider",否则会提示错误。
    throw $injectorMinErr('unpr', "Unknown provider: {0}", path.join(' <- '));

:
$injector.get 为得到[provider结构]
$injector.invoke 为对[provider结构]DI

三、instanceCache 用来存储 [provider的实例]

1. $injectorinstanceCache.$injector = instanceInjector = createInternalInjector();

instanceInjector.invoke 进行各种 [provider实例]DI

:
$injector.get 为得到[provider实例]
$injector.invoke 为对[provider实例]DI

四、Module的创建
    通过 setupModuleLoader进行模块创建:
    参数1: 模块名称
    参数2requires
参数3: 配置函数,类似于 module.config


五、providerInjectorinstanceInjector
    providerInjector [provider结构]注入器
    instanceInjector [provider实例]注入器

2
0
分享到:
评论

相关推荐

    ssm+bootstrap+angularJs案例

    在学习这个案例时,开发者应关注如何配置Spring、SpringMVC和MyBatis的集成,理解BootStrap如何应用于页面设计,以及AngularJS如何实现前端的数据绑定和逻辑处理。同时,了解每个技术的原理和使用场景,将有助于深入...

    AngularJS之依赖注入模拟实现

    AngularJS是一个流行的前端框架,它的核心特性之一就是依赖注入(Dependency Injection,简称DI)。依赖注入是设计模式的一种,它实现了控制反转(Inversion of Control,简称IoC),使得代码之间的耦合度降低,提高...

    angularJs权威和精通angularjs

    AngularJS的依赖注入(DI)系统是另一个关键组件,它允许模块之间轻松共享服务,如HTTP通信、路由处理等。开发者无需关心对象如何创建和管理,只需声明所需的服务,框架就会自动提供。 **3. MVC架构:** AngularJS...

    AngularJS1.x快速入门

    - **依赖注入(DI)**:这是一种用于管理对象依赖关系的设计模式,AngularJS内置支持依赖注入机制,有助于简化组件之间的依赖管理。 - **强大的社区支持**:由于其广泛的应用和大量的开发者社区,AngularJS拥有...

    Angularjs_in_action

    - **依赖注入**: AngularJS通过依赖注入(DI, Dependency Injection)机制来管理组件间的依赖关系,使代码更易于组织和维护。 - **指令系统**: 指令是AngularJS的核心特性之一,它允许开发者定义新的HTML标签或属性...

    AngularJS学习 chm 文件

    1. **双向数据绑定**:AngularJS 的核心特性之一是双向数据绑定,它使得模型(model)和视图(view)之间的数据保持同步。任何一方的改变都会立即反映到另一方,大大简化了开发者的工作。 2. **指令系统**:AngularJS ...

    Pro AngularJS 英文版 源代码

    1. **双向数据绑定**:AngularJS的核心特性之一,它实现了视图和模型之间的同步更新。当模型发生变化时,视图会自动更新;反之,当用户在视图上进行交互时,模型也会相应更新。 2. **指令系统**:AngularJS扩展了...

    angularjs.zip

    1. **依赖注入**:AngularJS提供了一种强大的依赖注入(Dependency Injection,DI)机制,使得开发者可以方便地获取和管理组件间的依赖关系,无需关心具体实现细节,提高了代码的可测试性和可维护性。 2. **指令...

    AngularJS 中文手册.zip

    AngularJS的核心特性之一是双向数据绑定,它使得模型(model)和视图(view)之间的数据同步变得极其简单。通过`ng-model`指令,可以在HTML元素上直接绑定到应用程序的数据,任何一方的改变都会自动反映到另一方。 2. ...

    angularJS技术

    依赖注入(DI, Dependency Injection)是AngularJS中的另一个关键特性。它允许组件声明其依赖,而无需关心如何创建或查找这些依赖。AngularJS自动管理这些依赖的生命周期和注入,降低了组件之间的耦合度,提高了代码的...

    angularjs1.2最新

    2. **依赖注入**:AngularJS的依赖注入(DI)系统是其强大的功能之一,它自动处理对象的创建和依赖关系。在1.2中,DI进一步优化,提升了性能,同时也增强了错误检测,使得调试更加方便。 3. **数据绑定**:...

    AngularJS详细使用说明从零到高手

    - **依赖注入**:通过依赖注入(DI),AngularJS能够有效地管理对象之间的依赖关系,提高代码的可维护性和可测试性。 #### AngularJS与其他技术的区别 在构建动态Web应用时,开发者通常会采用类库或框架来弥补HTML...

    AngularJS学习手册 源代码

    AngularJS的数据绑定是其核心特性之一,它允许视图(View)和模型(Model)之间的双向通信。在AngularJS中,我们可以使用`{{ }}`双括号语法将模型数据直接展示在视图上,同时,当模型数据发生变化时,视图也会实时...

    angularjs2开发的cms系统

    5. **路由**:AngularJS 2的路由系统允许用户在不同的页面间导航,通过激活守卫和懒加载策略可以实现高效的应用结构。 6. **服务**:AngularJS 2中的服务可以提供共享功能,如数据访问、API调用等。它们可以通过DI...

    AngularJS详细使用说明从零到高

    - **依赖注入**:AngularJS使用依赖注入(Dependency Injection, DI)机制来管理组件间的依赖关系,使得组件更加独立和易于测试。 - **指令(Directives)**:AngularJS允许开发者定义自己的指令来扩展HTML的功能,...

    AngularJS 中文版 入门 基础 教程

    - **依赖注入**:AngularJS的另一个关键特性是依赖注入(Dependency Injection,DI),它允许开发者声明所需的对象和服务,而无需关心它们如何被创建或管理,从而降低了代码的耦合度。 2. **指令系统** - **...

    Professional AngularJS

    1. **双向数据绑定**:AngularJS的核心特性之一,使得视图和模型之间的数据自动保持同步,无需手动操作DOM。 2. **指令系统**:AngularJS扩展HTML的机制,如ng-repeat、ng-if等,用于创建可重用的UI组件。 3. **...

    angularjs资源

    AngularJS的核心特点之一是它的双向数据绑定。这一特性使得视图和模型之间的数据保持同步,当模型发生变化时,视图会自动更新,反之亦然。双向数据绑定大大简化了开发者的工作,减少了手动同步视图和模型状态的代码...

    基于AngularJS的学生信息管理系统实例.zip

    2. **双向数据绑定**:AngularJS的核心特性之一,它使得视图和模型之间的数据可以自动同步。当模型发生变化时,视图会自动更新;反之,当用户在视图中操作时,模型也会相应更新。 3. **指令系统**:AngularJS提供了...

    angularjs+boorstrap视频教程

    - **依赖注入**:依赖注入(Dependency Injection, DI)是AngularJS的一个关键特性,它帮助开发者管理对象之间的依赖关系,提高了代码的可测试性和可重用性。 3. **开发环境搭建**: - **安装Node.js**:Node.js...

Global site tag (gtag.js) - Google Analytics