1.模块和服务的概念与关系
总的来说,模块是组织业务的一个框框,在一个模块当中定义多个服务。当你引入了一个模块的时候,就可以使用这个模块提供的一种或多种服务了。
比如 AngularJS 本身的一个默认模块叫做 ng ,它提供了 $http , $q 等等服务。
服务只是模块提供的多种机制中的一种,其它的还有命令( directive ),过滤器( filter ),及其它配置信息。
然后在额外的 js 文件中有一个附加的模块叫做 ngResource , 它提供了一个 $resource 服务。
定义时,我们可以在已有的模块中新定义一个服务,也可以先新定义一个模块,然后在新模块中定义新服务。
使用时,服务是需要显式地的声明依赖(引入)关系的,而服务则可以让 ng 自动地做注入,然后直接使用。
2.定义模块
定义模块的方法是使用 angular.module
。调用时声明了对其它模块的依赖,并定义了“初始化”函数。
- var my_module = angular.module('MyModule', [], function(){
- console.log('here');
- });
这段代码定义了一个叫做 MyModule
的模块, my_module
这个引用可以在接下来做其它的一些事,比如定义服务。
3.定义服务
服务本身是一个任意的对象。但是 ng 提供服务的过程涉及它的依赖注入机制。在这里呢,就要先介绍一下叫 provider 的东西。
简单来说, provider 是被“注入控制器”使用的一个对象,注入机制通过调用一个 provider 的 $get() 方法,把得到的东西作为参数进行相关调用(比如把得到的服务作为一个 Controller 的参数)。
在这里“服务”的概念就比较不明确,对使用而言,服务仅指 $get() 方法返回的东西,但是在整体机制上,服务又要指提供了 $get() 方法的整个对象。
- //这是一个provider
- var pp = function(){
- this.$get = function(){
- return {'haha': '123'};
- }
- }
- //我在模块的初始化过程当中, 定义了一个叫 PP 的服务
- var app = angular.module('Demo', [], function($provide){
- $provide.provider('PP', pp);
- });
- //PP服务实际上就是 pp 这个 provider 的 $get() 方法返回的东西
- app.controller('TestCtrl',
- function($scope, PP){
- console.log(PP);
- }
- );
上面的代码是一种定义服务的方法,当然, ng 还有相关的 shortcut, ng 总有很多 shortcut 。
第一个是 factory 方法,由 $provide 提供, module 的 factory 是一个引用,作用一样。这个方法直接把一个函数当成是一个对象的 $get() 方法,这样你就不用显式地定义一个 provider 了:
- var app = angular.module('Demo', [], function($provide){
- $provide.factory('PP', function(){
- return {'hello': '123'};
- });
- });
- app.controller('TestCtrl', function($scope, PP){ console.log(PP) });
在 module 中使用:
- var app = angular.module('Demo', [], function(){ });
- app.factory('PP', function(){return {'abc': '123'}});
- app.controller('TestCtrl', function($scope, PP){ console.log(PP) });
第二个是 service 方法,也是由 $provide 提供, module 中有对它的同名引用。 service 和 factory 的区别在于,前者是要求提供一个“构造方法”,后者是要求提供 $get() 方法。意思就是,前者一定是得到一个 object
,后者可以是一个数字或字符串。它们的关系大概是:
- var app = angular.module('Demo', [], function(){ });
- app.service = function(name, constructor){
- app.factory(name, function(){
- return (new constructor());
- });
- }
这里插一句,js 中 new 的作用,以 new a()
为例,过程相当于:
- 创建一个空对象 obj
- 把 obj 绑定到 a 函数的上下文当中(即 a 中的 this 现在指向 obj )
- 执行 a 函数
- 返回 obj
service 方法的使用就很简单了:
- var app = angular.module('Demo', [], function(){ });
- app.service('PP', function(){
- this.abc = '123';
- });
- app.controller('TestCtrl', function($scope, PP){ console.log(PP) });
4.引入模块并使用服务
结合上面的“定义模块”和“定义服务”,我们可以方便地组织自己的额外代码:
-
- angular.module('MyModule', [], function($provide){
- $provide.factory('S1', function(){
- return 'I am S1';
- });
- $provide.factory('S2', function(){
- return {see: function(){return 'I am S2'}}
- });
- });
- var app = angular.module('Demo', ['MyModule'], angular.noop);
- app.controller('TestCtrl', function($scope, S1, S2){
- console.log(S1)
- console.log(S2.see())
- });
from :http://blog.csdn.net/violet_day/article/details/16918673