【转】 定义模板和服务

1.模块和服务的概念与关系

总的来说，模块是组织业务的一个框框，在一个模块当中定义多个服务。当你引入了一个模块的时候，就可以使用这个模块提供的一种或多种服务了。

比如 AngularJS 本身的一个默认模块叫做 ng ，它提供了 $http ， $q 等等服务。

服务只是模块提供的多种机制中的一种，其它的还有命令（ directive ），过滤器（ filter ），及其它配置信息。

然后在额外的 js 文件中有一个附加的模块叫做 ngResource ， 它提供了一个 $resource 服务。

定义时，我们可以在已有的模块中新定义一个服务，也可以先新定义一个模块，然后在新模块中定义新服务。

使用时，服务是需要显式地的声明依赖（引入）关系的，而服务则可以让 ng 自动地做注入，然后直接使用。

2.定义模块

定义模块的方法是使用

angular.module

。调用时声明了对其它模块的依赖，并定义了“初始化”函数。

[javascript] view plaincopy





var my_module = angular.module('MyModule', [], function(){

console.log('here');

});

这段代码定义了一个叫做

MyModule

的模块，

my_module

这个引用可以在接下来做其它的一些事，比如定义服务。

3.定义服务

服务本身是一个任意的对象。但是 ng 提供服务的过程涉及它的依赖注入机制。在这里呢，就要先介绍一下叫 provider 的东西。

简单来说， provider 是被“注入控制器”使用的一个对象，注入机制通过调用一个 provider 的 $get() 方法，把得到的东西作为参数进行相关调用（比如把得到的服务作为一个 Controller 的参数）。

在这里“服务”的概念就比较不明确，对使用而言，服务仅指 $get() 方法返回的东西，但是在整体机制上，服务又要指提供了 $get() 方法的整个对象。

[javascript] view plaincopy





//这是一个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 了：

[javascript] view plaincopy





var app = angular.module('Demo', [], function($provide){

$provide.factory('PP', function(){

return {'hello': '123'};

});

});

app.controller('TestCtrl', function($scope, PP){ console.log(PP) });

在 module 中使用：

[javascript] view plaincopy





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

，后者可以是一个数字或字符串。它们的关系大概是：

[javascript] view plaincopy





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 方法的使用就很简单了：

[javascript] view plaincopy





var app = angular.module('Demo', [], function(){ });

app.service('PP', function(){

this.abc = '123';

});

app.controller('TestCtrl', function($scope, PP){ console.log(PP) });

4.引入模块并使用服务

结合上面的“定义模块”和“定义服务”，我们可以方便地组织自己的额外代码：

[javascript] view plaincopy





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