Last update: June 2014. I have partially rewritten this article to provide more technical details and also to show their differences more clearly.


Angular comes with different types of services. Each one with its own use cases.

Something important that you have to keep in mind is that the services are always singleton, it doesn’t matter which type you use. This is the desired behavior.

NOTE: A singleton is a design pattern that restricts the instantiation of a class to just one object. Every place where we inject our service, will use the same instance.

Provider

Provider is the parent of almost all the other services (all but constant) and it is also the most complex but more configurable one.

Let’s see a basic example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
app.provider('foo', function() {

  return {

    $get: function() {
var thisIsPrivate = "Private";
function getPrivate() {
return thisIsPrivate;
} return {
variable: "This is public",
getPrivate: getPrivate
};
} }; });

provider on its simplest form, just needs to return a function called $get which is what we inject on the other components. So if we have a controller and we want to inject this foo provider, what we inject is the $get function of it.

Why should we use a provider when a factory is much simple? Because we can configure a provider in the config function. We can do something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
app.provider('foo', function() {

  var thisIsPrivate = "Private";

  return {

    setPrivate: function(newVal) {
thisIsPrivate = newVal;
}, $get: function() {
function getPrivate() {
return thisIsPrivate;
} return {
variable: "This is public",
getPrivate: getPrivate
};
} }; }); app.config(function(fooProvider) {
fooProvider.setPrivate('New value from config');
});

Here we moved the thisIsPrivate outside our $get function and then we created a setPrivate function to be able to change thisIsPrivate in a config function. Why do we need to do this? Won’t it be easier to just add the setter in the $get? This has a different purpose.

Imagine we want to create a generic library to manage our models and make some REST petitions. If we hardcode the endpoints URLs, we are not making it any generic, so the idea is to be able to configure those URLs and to do so, we create a provider and we allow those URLs to be configured on a config function.

Notice that we have to put nameProvider instead of just name in our config function. To consume it, we just need to use name.

Seeing this we realize that we already configured some services in our applications, like $routeProvider and $locationProvider, to configure our routes and html5mode respectively.

Providers have two different places to make injections, on the provider constructor and on the $get function. On the provider constructor we can only inject other providers and constants (is the same limitation as the config function). On the $get function we can inject all but other providers (but we can inject other provider’s $get function).

Remember: To inject a provider you use: name + ‘Provider’ and to inject its $get function you just use name

Try it


Factory

Provider are good, they are quite flexible and complex. But what if we only want its $getfunction? I mean, no configuration at all. Well, in that cases we have the factory. Let’s see an example:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
app.factory('foo', function() {
var thisIsPrivate = "Private";
function getPrivate() {
return thisIsPrivate;
} return {
variable: "This is public",
getPrivate: getPrivate
};
}); // or.. app.factory('bar', function(a) {
return a * 2;
});

As you see, we moved our provider $get function into a factory so we have what we had on the first provider example but with a much simpler syntax. In fact, internally a factory is a provider with only the $get function.

As I said before, all types are singleton, so if we modify foo.variable in one place, the other places will have that change too.

We can inject everything but providers on a factory and we can inject it everywhere except on the provider constructor and config functions.

Try it


Value

Factory is good, but what if I just want to store a simple value? I mean, no injections, just a simple value or object. Well angular has you covered with the value service:

Example:

1
app.value('foo', 'A simple value');

Internally a value is just a factory. And since it is a factory the same injection rules applies, AKA can’t be injected into provider constructor or config functions.

Try it


Service

So having the complex provider, the more simple factory and the value services, what is the service service? Let’s see an example first:

Example:

1
2
3
4
5
6
7
app.service('foo', function() {
var thisIsPrivate = "Private";
this.variable = "This is public";
this.getPrivate = function() {
return thisIsPrivate;
};
});

The service service works much the same as the factory one. The difference is simple: The factory receives a function that gets called when we create it and the servicereceives a constructor function where we do a new on it (actually internally is uses Object.create instead of new).

In fact, it is the same thing as doing this:

1
2
3
4
5
6
7
8
9
10
11
12
app.factory('foo2', function() {
return new Foobar();
}); function Foobar() {
var thisIsPrivate = "Private";
this.variable = "This is public";
this.getPrivate = function() {
return thisIsPrivate;
};
}

Foobar is a constructor function and we instantiate it in our factory when angular processes it for the first time and then it returns it. Like the service, Foobar will be instantiated only once and the next time we use the factory it will return the same instance again.

If we already have the class and we want to use it in our service we can do that like the following:

1
app.service('foo3', Foobar);

If you’re wondering, what we did on foo2 is actually what angular does with services internally. That means that service is actually a factory and because of that, same injection rules applies.

Try it


Constant

Then, you’re expecting me to say that a constant is another subtype of provider like the others, but this one is not. A constant works much the same as a value as we can see here:

Example:

1
2
3
4
app.constant('fooConfig', {
config1: true,
config2: "Default config2"
});

So… what’s the difference then? A constant can be injected everywhere and that includes provider constructor and config functions. That is why we use constant services to create default configuration for directives, because we can modify those configuration on our config functions.

You are wondering why it is called constant if we can modify it and well that was a design decision and I have no idea about the reasons behind it.

Try it


Bonus 1: Decorator

So you decided that the foo service I sent to you lacks a greet function and you want it. Will you modify the factory? No! You can decorate it:

1
2
3
4
5
6
7
8
9
app.config(function($provide) {
$provide.decorator('foo', function($delegate) {
$delegate.greet = function() {
return "Hello, I am a new function of 'foo'";
}; return $delegate;
});
});

$provide is what Angular uses internally to create all the services. We can use it to create new services if we want but also to decorate existing services. $provide has a method called decorator that allows us to do that. decorator receives the name of the service and a callback function that receives a $delegate parameter. That $delegate parameter is our original service instance.

Here we can do what we want to decorate our service. In our case, we added a greetfunction to our original service. Then we return the new modified service.

Now when we consume it, it will have the new greet function as you will see in the Try it.

The ability to decorate services comes in handy when we are consuming 3rd party services and we want to decorate it without having to copy it in our project and then doing there the modifications.

Note: The constant service cannot be decorated.

Try it


Bonus 2: Creating new instances

Our services are singleton but we can create a singleton factory that creates new instances. Before you dive deeper, keep in mind that having singleton services is the way to go and we don’t want to change that. Said that, in the rare cases you need to generate new instances, you can do that like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// Our class
function Person( json ) {
angular.extend(this, json);
} Person.prototype = {
update: function() {
// Update it (With real code :P)
this.name = "Dave";
this.country = "Canada";
}
}; Person.getById = function( id ) {
// Do something to fetch a Person by the id
return new Person({
name: "Jesus",
country: "Spain"
});
}; // Our factory
app.factory('personService', function() {
return {
getById: Person.getById
};
});

Here we create a Person object which receives some json to initialize the object. Then we created a function in our prototype (functions in the prototype are for the instances of the Person) and a function directly in Person (which is like a class function).

So we have a class function that will create a new Person object based on the id that we provide (well, it will in real code) and every instance is able to update itself. Now we just need to create a service that will use it.

Every time we call personService.getById we are creating a new Person object, so you can use this service in different controllers and even when the factory in a singleton, it generates new objects.

Kudos to Josh David Miller for his example.

Try it


Bonus 3: Coffeescript

Coffeescript can be handy with services since they provide a prettier way to create classes. Let’s see an example of the Bonus 2 using Coffeescript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
app.controller 'MainCtrl', ($scope, personService) ->
$scope.aPerson = personService.getById(1) app.controller 'SecondCtrl', ($scope, personService) ->
$scope.aPerson = personService.getById(2)
$scope.updateIt = () ->
$scope.aPerson.update() class Person constructor: (json) ->
angular.extend @, json update: () ->
@name = "Dave"
@country = "Canada" @getById: (id) ->
new Person
name: "Jesus"
country: "Spain" app.factory 'personService', () ->
{
getById: Person.getById
}

It is prettier now in my humble opinion.

Try it


NOTE: This last one, being Coffeescript seems to fail a little bit with JSbin. Go to the Javascript tab and select Coffeescript to make it work.

Conclusion

Services are one of the coolest features of Angular. We have a lot of ways to create them, we just need to pick the correct one for our use cases and implement it.

If you found any issue or you think that this can be improved, please leave an issue or pull request at Github. In any case, a comment will be appreciated :).

http://angular-tips.com/blog/2013/08/understanding-service-types/

Understanding Service Types的更多相关文章

  1. 浅析Kubernrtes服务类型(Service Types)

    先上图 在Kubernetes集群中,service通过标签选择器选着对应的pod,然后对请求进行转发,看个动画,能直接了当体会到便签选择器 pod,endpoints,service三者关系 1.举 ...

  2. Learning WCF Chapter1 Generating a Service and Client Proxy

    In the previous lab,you created a service and client from scratch without leveraging the tools avail ...

  3. Learning WCF Chapter1 Exposing Multiple Service Endpoints

    So far in this chapter,I have shown you different ways to create services,how to expose a service en ...

  4. Service Fabric Cluster Manager

    作者:潘罡 (Van Pan)@ Microsoft 我们回到Service Fabric最底层的话题,谈谈Service Fabric是怎么工作的. 首先,我们回到下面的文档,看看Service F ...

  5. service fabric docker 安装

    1. 镜像拉取 docker pull microsoft/service-fabric-onebox 2. 配置docker(daemon.json) { "ipv6": tru ...

  6. F#之旅2 - 我有特别的学F#技巧

    原文地址:https://swlaschin.gitbooks.io/fsharpforfunandprofit/content/learning-fsharp/ Learning F#Functio ...

  7. WCF服务与WCF数据服务的区别

    问: Hi, I am newbie to wcf programming and a little bit confused between WCF Service and WCF Data  Se ...

  8. wcf中的File-less Activation

    File-less Activation Although .svc files make it easy to expose WCF services, an even easier approac ...

  9. Eclipse MAT: Understand Incoming and Outgoing References

    引用:http://xmlandmore.blogspot.hk/2014/01/eclipse-mat-understand-incoming-and.html?utm_source=tuicool ...

随机推荐

  1. WP8_读写XML

    /// <summary> /// WP手机,XML读写类 /// </summary> public class WPXmlRW { /// <summary> ...

  2. Windows server 2008R2部署服务批量安装Windows7教程

    利用Windows server 2008 R2下的Windows部署服务可以批量安装Windows 7,以下简称WDS. WDS需要用到域和dhcp.DNS服务,所以,基础环境必须要有域控制器,dh ...

  3. eclipse 导入jar包

    我们在用Eclipse开发程序的时候,经常想要用到第三方的jar包.这时候我们就需要在相应的工程下面导入这个jar包.以下配图说明导入jar包的步骤. 1.右击工程的根目录,点击Properties进 ...

  4. ASP.NET中@Page指令中的AutoEventWireup

    AutoEventWireup:指示控件的事件是否自动匹配 (Autowire).如果启用事件自动匹配,则为 true:否则为 false.默认值为 true.如果设为false,则事件不可用.有关更 ...

  5. NetCat使用手册

    简介:   在网络工具中有“瑞士军刀”美誉的NetCat(以下简称nc),在我们用了N年了至今仍是爱不释手.因为它短小精悍(这个用在它身上很适合,现在有人已经将其修改成大约10K左右,而且功能不减少) ...

  6. jQuery打造用户注册时获取焦点文本框出现提示jquery表单特效

    jQuery打造用户注册时获取焦点文本框出现提示效果的jquery表单特效 当获取焦点时,会分别的弹出相应的信息提示框,失去焦点就会隐藏提示信息. 效果兼容性很高,适用浏览器:IE6.IE7.IE8. ...

  7. android中常用菜单(menu)的基本知识

    (一)选项菜单 1.简单的创建菜单: @Override public boolean onCreateOptionsMenu(Menu menu) { super.onCreateOptionsMe ...

  8. ASP.NET MVC4学习笔记路由系统实现

    一.路由实现 路由系统实际是一个实现了ASP.NET IHttpModule接口的模块,通过注册HttpApplication的PostResolveRequestCache 事件对Url路由处理.总 ...

  9. C# A窗口内容显示在B窗口中的方法

    HeScripts script = new HeScripts(); //A窗口中实例化B窗口 string okscripts = "test"; //设置字段内容 scrip ...

  10. 下一代NoSQL:最终一致性的末日

    相比关系型数据库,NoSQL解决方案提供了shared-nothing.容错和可扩展的分布式架构等特性,同时也放弃了关系型数据库的强数据一致性和隔离性,美其名曰:"最终一致性". ...