多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
### 14.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()` 为例,过程相当于: 1. 创建一个空对象 obj 1. 把 obj 绑定到 a 函数的上下文当中(即 a 中的 this 现在指向 obj ) 1. 执行 a 函数 1. 返回 obj _service_ 方法的使用就很简单了: var app = angular.module('Demo', [], function(){ }); app.service('PP', function(){ this.abc = '123'; }); app.controller('TestCtrl', function($scope, PP){ console.log(PP) });