Understanding Service Types
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 |
|
A 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 |
|
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 $get
function? I mean, no configuration at all. Well, in that cases we have the factory
. Let’s see an example:
Example:
1 |
|
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 |
|
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 |
|
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 service
receives 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 |
|
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 |
|
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 |
|
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 |
|
$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 greet
function 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 |
|
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 |
|
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的更多相关文章
- 浅析Kubernrtes服务类型(Service Types)
先上图 在Kubernetes集群中,service通过标签选择器选着对应的pod,然后对请求进行转发,看个动画,能直接了当体会到便签选择器 pod,endpoints,service三者关系 1.举 ...
- 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 ...
- 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 ...
- Service Fabric Cluster Manager
作者:潘罡 (Van Pan)@ Microsoft 我们回到Service Fabric最底层的话题,谈谈Service Fabric是怎么工作的. 首先,我们回到下面的文档,看看Service F ...
- service fabric docker 安装
1. 镜像拉取 docker pull microsoft/service-fabric-onebox 2. 配置docker(daemon.json) { "ipv6": tru ...
- F#之旅2 - 我有特别的学F#技巧
原文地址:https://swlaschin.gitbooks.io/fsharpforfunandprofit/content/learning-fsharp/ Learning F#Functio ...
- WCF服务与WCF数据服务的区别
问: Hi, I am newbie to wcf programming and a little bit confused between WCF Service and WCF Data Se ...
- wcf中的File-less Activation
File-less Activation Although .svc files make it easy to expose WCF services, an even easier approac ...
- Eclipse MAT: Understand Incoming and Outgoing References
引用:http://xmlandmore.blogspot.hk/2014/01/eclipse-mat-understand-incoming-and.html?utm_source=tuicool ...
随机推荐
- WP8_读写XML
/// <summary> /// WP手机,XML读写类 /// </summary> public class WPXmlRW { /// <summary> ...
- Windows server 2008R2部署服务批量安装Windows7教程
利用Windows server 2008 R2下的Windows部署服务可以批量安装Windows 7,以下简称WDS. WDS需要用到域和dhcp.DNS服务,所以,基础环境必须要有域控制器,dh ...
- eclipse 导入jar包
我们在用Eclipse开发程序的时候,经常想要用到第三方的jar包.这时候我们就需要在相应的工程下面导入这个jar包.以下配图说明导入jar包的步骤. 1.右击工程的根目录,点击Properties进 ...
- ASP.NET中@Page指令中的AutoEventWireup
AutoEventWireup:指示控件的事件是否自动匹配 (Autowire).如果启用事件自动匹配,则为 true:否则为 false.默认值为 true.如果设为false,则事件不可用.有关更 ...
- NetCat使用手册
简介: 在网络工具中有“瑞士军刀”美誉的NetCat(以下简称nc),在我们用了N年了至今仍是爱不释手.因为它短小精悍(这个用在它身上很适合,现在有人已经将其修改成大约10K左右,而且功能不减少) ...
- jQuery打造用户注册时获取焦点文本框出现提示jquery表单特效
jQuery打造用户注册时获取焦点文本框出现提示效果的jquery表单特效 当获取焦点时,会分别的弹出相应的信息提示框,失去焦点就会隐藏提示信息. 效果兼容性很高,适用浏览器:IE6.IE7.IE8. ...
- android中常用菜单(menu)的基本知识
(一)选项菜单 1.简单的创建菜单: @Override public boolean onCreateOptionsMenu(Menu menu) { super.onCreateOptionsMe ...
- ASP.NET MVC4学习笔记路由系统实现
一.路由实现 路由系统实际是一个实现了ASP.NET IHttpModule接口的模块,通过注册HttpApplication的PostResolveRequestCache 事件对Url路由处理.总 ...
- C# A窗口内容显示在B窗口中的方法
HeScripts script = new HeScripts(); //A窗口中实例化B窗口 string okscripts = "test"; //设置字段内容 scrip ...
- 下一代NoSQL:最终一致性的末日
相比关系型数据库,NoSQL解决方案提供了shared-nothing.容错和可扩展的分布式架构等特性,同时也放弃了关系型数据库的强数据一致性和隔离性,美其名曰:"最终一致性". ...