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
  • 相关阅读:
    SublimeText3下的Python开发环境配置
    从Evernote迁移到Wiz
    读书笔记---《即学即用财务常识120例》
    MC700 安装双系统
    Python3.5 + django1.8.5 安装”import pymysql pymysql.install_as_MySQLdb()”的解决方法
    7z压缩文件时排除指定的文件
    安装.NET Framework后程序无法启动的错误处理
    重拾Blog
    X240s安装Win7 以及如何启用ExpressCache
    新玩具---Amazon Kindle PaperWhite 2
  • 原文地址:https://www.cnblogs.com/dorothychai/p/4739604.html
Copyright © 2011-2022 走看看