zoukankan      html  css  js  c++  java
  • Angular JS中的依赖注入

    依赖注入DI

    angularjs中与DI相关有angular.module()、angular.injector()、 $injector$provide

    DI 容器3要素:服务的注册、依赖关系的声明、对象的获取。

    依赖注入

    Spring中的DI

    AngularJS中的DI

    服务注册

    通过xml配置文件的<bean>标签或是注解@Repository、@Service、@Controller、@Component实现的

    module和$provide相当于是服务的注册;

    依赖关系声明

    可以在xml文件中配置,也可以使用@Resource等注解在java代码中声明

    依赖关系的声明在angular中有3种方式,如下介绍

    对象获取

    ApplicationContext.getBean()实现

    injector用来获取对象(angular会自动完成依赖的注入)

    angular依赖关系声明的三种方式

    angular提供了3种获取依赖的方式:inference、annotation、inline方式。

    其中annotation和inline方式,对于函数参数名称没有要求,是推荐的做法;inference方式强制要求参数名称和服务名称一致,如果JS代码经过压缩或者混淆,那么功能会出问题,不建议使用这种方式。

    // 创建myModule模块、注册服务
    var myModule = angular.module('myModule', []);
    myModule.service('myService', function() {
         this.my = 0;
    });
    
    // 获取injector
    var injector = angular.injector(["myModule"]);
    
    // 第一种inference
    injector.invoke(function(myService){alert(myService.my);});
    
    // 第二种annotation
    function explicit(serviceA) {alert(serviceA.my);};
    explicit.$inject = ['myService'];
    injector.invoke(explicit);
    
    // 第三种inline
    injector.invoke(['myService', function(serviceA){alert(serviceA.my);}]);

    如何理解module?

    The angular.module() is a global place for creating, registering and retrieving Angular modules.When passed two or more arguments, a new module is created. If passed only one argument, an existing module (the name passed as the first argument to module) is retrieved。

    该函数既可以创建新的模块,也可以获取已有模块,是创建还是获取,通过参数的个数来区分。

    // 传递参数不止一个,代表新建模块;空数组代表该模块不依赖其他模块
    var createModule = angular.module("myModule", []);
    
    // 只有一个参数(模块名),代表获取模块
    // 如果模块不存在,angular框架会抛异常
    var getModule = angular.module("myModule");
    
    // true,都是同一个模块
    alert(createModule == getModule);

    那么模块究竟是什么呢?

    官方的Developer Guide上只有一句话:You can think of a module as a container for the different parts of your app – controllers, services, filters, directives, etc.

    就是说模块是一些功能的集合,如控制器、服务、过滤器、指令等子元素组成的整体。

    $provide和模块的关系

    The $provide service has a number of methods for registering components with the $injector. Many of these functions are also exposed on angular.Module.

    之前提到过:module和provide是用来注册服务到injector中的。查看官方的API,可以看到$provide提供了provide()、constant()、value()、factory()、service()来创建各种不同性质的服务;angular.Module中也提供了这5个服务注册方法。其实2者功能是完全一样的,就是用来向DI容器注册服务到injector中。

    官方API下的auto有$provide 和 $injector,Implicit module which gets automatically added to each $injector.按照字面意思是说,每一个injector都有这2个隐含的服务。

    angular.injector()

    使用angular.injector();也能获取到注入器,但是没有和模块绑定。这种做法是没有意义的,相当于是你创建了一个空的DI容器,里面都没有服务别人怎么用呢。正确的做法是,在创建注入器的时候,指定需要加载的模块。

    // 创建myModule模块、注册服务
    var myModule = angular.module('myModule', []);
    myModule.service('myService', function() {
                this.my = 0;
    });
    
    // 创建herModule模块、注册服务
    var herModule = angular.module('herModule', []);
    herModule.service('herService', function() {
                this.her = 1;
    });
    
    // 加载了2个模块中的服务
    var injector = angular.injector(["myModule","herModule"]);
    alert(injector.get("myService").my);
    alert(injector.get("herService").her);

    特别需要注意下:angular.injector()可以调用多次,每次都返回新建的injector对象

    var injector1 = angular.injector(["myModule","herModule"]);
    var injector2 = angular.injector(["myModule","herModule"]);
    
    alert(injector1 == injector2);//false
    参考:http://www.mamicode.com/info-detail-247448.html
  • 相关阅读:
    Swift入门篇-Hello World
    Swift入门篇-swift简介
    Minecraft 插件 world edit 的cs 命令
    搭建本地MAVEN NEXUS 服务
    MC java 远程调试 plugin 开发
    企业内部从零开始安装docker hadoop 提纲
    javascript 命令方式 测试例子
    ca des key crt scr
    JSF 抽象和实现例子 (函数和属性)
    form 上传 html 代码
  • 原文地址:https://www.cnblogs.com/dorothychai/p/4739604.html
Copyright © 2011-2022 走看看