当前位置: 移动技术网 > IT编程>脚本编程>AngularJs > AngularJS的依赖注入实例分析(使用module和injector)

AngularJS的依赖注入实例分析(使用module和injector)

2018年05月03日  | 移动技术网IT编程  | 我要评论

本文实例分析了angularjs的依赖注入。分享给大家供大家参考,具体如下:

依赖注入(di)的好处不再赘言,使用过spring框架的都知道。angularjs作为前台js框架,也提供了对di的支持,这是javascript/jquery不具备的特性。angularjs中与di相关有angular.module()、angular.injector()、 $injector、$provide。对于一个di容器来说,必须具备3个要素:服务的注册、依赖关系的声明、对象的获取。比如spring中,服务的注册是通过xml配置文件的<bean>标签或是注解@repository、@service、@controller、@component实现的;对象的获取可以applicationcontext.getbean()实现;依赖关系的声明,即可以在xml文件中配置,也可以使用@resource等注解在java代码中声明。在angular中,module和$provide相当于是服务的注册;injector用来获取对象(angular会自动完成依赖的注入);依赖关系的声明在angular中有3种方式。下面从这3个方面,介绍下angular的di。

1、angular.module()创建、获取、注册angular中的模块

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);

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

angular.module(name, [requires], [configfn]);
name:字符串类型,代表模块的名称;
requires:字符串的数组,代表该模块依赖的其他模块列表,如果不依赖其他模块,用空数组即可;
configfn:用来对该模块进行一些配置。

现在我们知道如何创建、获取模块了,那么模块究竟是什么呢?官方的developer guide上只有一句话:you can think of a module as a container for the different parts of your app – controllers, services, filters, directives, etc.现在我还不太理解,大致就是说模块是一些功能的集合,如控制器、服务、过滤器、指令等子元素组成的整体。现在解释不了,先遗留。

2、$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个隐含的服务。但1.2.25版本中,感觉没有办法获取injector中的$provide。不知道这是为什么?一般来说也不需要显示使用这个服务,直接使用module中提供的api即可。

var injector = angular.injector();
alert(injector.has("$provide"));//false
alert(injector.has("$injector"));//true

3、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);

如果加载了多个模块,那么通过返回的injector可以获取到多个模块下的服务。这个例子中如果只加载了mymoudle,那么得到的injector就不能访问hermoudle下的服务。这里特别需要注意下:angular.injector()可以调用多次,每次都返回新建的injector对象。

var injector1 = angular.injector(["mymodule","hermodule"]);
var injector2 = angular.injector(["mymodule","hermodule"]);
alert(injector1 == injector2);//false

4、angular中三种声明依赖的方式

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

// 创建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);}]);

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

更多关于angularjs相关内容感兴趣的读者可查看本站专题:《angularjs入门与进阶教程》及《angularjs mvc架构总结

希望本文所述对大家angularjs程序设计有所帮助。

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网