Angular Service Recipes


Warning: Illegal string offset 'filter' in /var/sites/t/theproactiveprogrammer.com/public_html/wp-includes/taxonomy.php on line 1409

In last week’s post we looked at Angular services, and saw how they can be instantiated using the Factory recipe. Although the Factory recipe is appropriate in most scenarios, there are an additional four recipes which can be used for creating services. These are the Service, Value, Provider and Constant recipes.

It is worth mentioning up front that all these recipes are shorthand versions of the Provider recipe. Or as the Angular website states, the other four recipes “are just syntactic sugar on top of a provider recipe”.

The Factory Recipe

Let’s briefly remind ourselves of the Factory recipe for creating services.

Plunker

The important thing to note here, when comparing the Factory recipe with other recipes, is that we need to provide a factory function as an argument, which returns our service instance (hence the name “factory recipe”).

The Service Recipe

The Service recipe is similar to the Factory recipe, in that we can inject an object into clients (e.g. controllers or other services) which want to use our service. However, rather than providing a factory function which will return an instance of the service, we provide a constructor function.

Plunker

This is really just another case of syntactic sugar, as we can achieve the same result by using the Factory recipe and instantiating our constructor in the normal way.

Plunker

A natural consequence of using the Service recipe is that you must return a JavaScript object, rather than a primitive, as your service instance. Using the Factory recipe, you could return a primitive as your service, although as we will see with the Value and Constant recipes, there are neater ways to do this.

The Value Recipe

The Value recipe allows us to inject simple objects into clients. The value may be, for example, a password or some other “magic string” which we want to avoid duplicating across our application (think ‘key-value pair’).

As with the Service recipe, we could achieve the same thing using the Factory recipe, but by using the Value recipe we can write simpler and easier-to-read code.

Using the Factory recipe:

Plunker

Using the Value recipe:

Plunker

We could also return an object using the Value recipe, however two important limitations when doing this are that it is not possible to inject other services into our Value service, and it is not possible to perform initialization code.

The Provider Recipe

As mentioned earlier, all service recipes are built on the Provider recipe – it is the grand-daddy of service recipes (a little like the .ajax() function in jQuery).

The Provider Recipe is similar to the Factory recipe in that we need to define a factory function which returns an instance of our service. However, rather than passing our factory function to the provider function, we pass an object which has a special $get property, to which we assign our factory function. This is probably best demonstrated with an example.

Plunker

So why would we ever want to do this?

To answer this question, we need to understand a little about Angular’s application life-cycle. Specifically, we need to know that the life-cycle is split into the configuration phase, and the run phase.

The configuration phase runs first. During this phase, the config function runs, and all providers are configured and instantiated. However, no services are available during this phase, as no providers have been created, and in order to instantiate services we need providers!

By using the Provider recipe, and having our object expose functions which can be called during the configuration phase, we allow providers to be configured by calls to the config function. Typically we would only want to do this when creating reusable services, whose behaviour we want to configure differently between applications (in other words, not very often).

Plunker

The Constant Recipe

The Constant recipe is similar to the Value recipe, in that it allows us to define simple values which can be shared across our application. The one important difference is that values defined using the Constant recipe are available during the configuration phase of the application life-cycle.

Final Words

We have seen that there are five recipes for creating services in Angular. If you want to know which one best suits your needs, the best way to decide is to understand the differences between them.

In short, the recipes can be divided into two categories: those for creating traditional services (i.e. services which provide functions), and those for creating simple values.

For traditional services we have the Factory, Service and Provider recipes. The Factory recipe will meet your needs unless you need your service to be available during the configuration phase. Under these circumstances you will need to use the Provider recipe. The Service recipe is simply a neat alternative to the Factory recipe for circumstances when you have a constructor function which creates your service.

For simple values we have the Value and Constant recipes. The Value recipe will meet your needs unless you need it to be accessible during the configuration phase. Under these circumstances you will need to use the Constant recipe.

Share Buttonvar hupso_services_t=new Array(“Twitter”,”Facebook”,”Google Plus”,”Linkedin”,”Digg”,”Reddit”);var hupso_background_t=”#EAF4FF”;var hupso_border_t=”#66CCFF”;var hupso_toolbar_size_t=”medium”;var hupso_image_folder_url = “”;var hupso_url_t=””;var hupso_title_t=”Angular Service Recipes”;http://static.hupso.com/share/js/share_toolbar.js
Share Button