分享人:熊凡
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
大家应该知道,AngularJS是后台人员在工作之余发明的,他主要应用了后台早就存在的分层思想。所以我们得了解下分层的作用。
dao层:就是Model层,在后台时,这一层的作用,就要是写与数据库交互数据的一层,在angularJS里就主要是写ajax的。
service层:主查写逻辑代码的,但在angularJS里也可以持久化数据(充当数据容器),以供不同的controller使用。
controller层:即控制层,在angularJS里就是写控制器的。控制器里尽量不要写那些不必要的逻辑,尽量写在service层里。
所以,就有了创建自定义服务的几种方式。
app.constant('name',obj)
name为服务的名字,obj为一个对象。
app.constant('APP_KEY', 'a1s2d3f4')
constant 用于定义常量,一旦定义就不能被改变。可以被注入到任何地方,但是不能被装饰器(decorator)装饰。
app.value('name',obj)
name为服务的名字,obj为一个对象。
app.value('version', '1.0')
与 constant 一样,可以用来定义值。但与 constant 的区别是:可以被修改,可以被 decorator 装饰,不能被注入到 config 中。
app.factory('name',function(){return obj})
name为服务的名字,第二个参数传入一个函数,函数需要有一个返回值obj,返回一个对象。实际被注入的服务就是这个对象。
app.factory('myFactory', function(){
var fac = {};
fac.a = 'hello world';
fac.foo = function(){};
return fac;
})
factory服务是最常见最常用的服务类型,几乎可以满足90%的自己开发的需求,使用它可以编写一些逻辑,通过这些逻辑最后返回所需要的对象. 它和constant,value最大的区别是,factory服务是有一个处理过程,经过这个过程,才返回结果的.
app.service('name',constructor)
name为服务的名字,constructor是一个构造函数。
app.service('myService', function(){
var a = '';
this.setA = function(){};
this.getA = function(){};
this.foo = function(){};
})
service和factory的区别在于,它第二个参数传入的是一个构造函数,最后被注入的服务是这个构造函数实例化以后的结果.所以基本上使用service创建的服务的,也都可以使用factory来创建。
app.factory('name',function(){})
name为服务的名字,第二个参数接受一个函数,函数由两部分组成。第一部分的变量和函数是可以在 app.config 函数中访问的。第二部分的变量和函数是通过 $get() 函数返回的
app.provider('myProvider', function(){
var a = '';
var func = function(){};
return{
$get:function(){
foo: function(){},
a: a
}
}
})
$get方法就相当于factory服务的第二个参数,最后要返回一个对象,这个对象就是真正被注入的服务。
一些固定的参数和方法,使用constant
可能被修改的参数和方法,使用value
通过逻辑处理后得到的参数或方法,使用factory
可以使用factory的也可以使用service,反之亦然(一般就是用factory)
可以手动配置参数的服务,使用provider
decorator比较特殊,它不是 provider 。它是$provider服务的一种方法,它是用来装饰其他 provider 的,不过 constant 除外,因为constant 不是通过 provider() 方法创建的。
app.value('version', '1.0');
app.decorator('version', function ($delegate) {
return $delegate + '.1';
})
它接受两个参数,第一个参数'name',是要被装饰的服务的名字,第二个参数是一个函数,函数中注入$delegate,$delegate就是被装饰的服务的实例,然后在函数中操作$delegate,就相当于操作了该服务的实例.
app.config(function($provide){
$provide.decorator('myFactory',function($delegate){
$delegate.b = 'thank you';
return $delegate
})
});
参考一: angularjs中的几种服务的详细分析
参考二: angular五种服务详解
谢谢大家
制作人:熊凡