Sharing Top Content from the Angular-sphere.

AngularJS in Patterns (Part 2). Services. – Minko Gechev’s blog

  • When given dependency is required by any component, AngularJS resolves it using the following algorithm:

    We can take better look at the AngularJS’ source code, which implements the method :

    We can think of each service as a singleton, because each service is instantiated no more than a single time.

  • Each service, filter, directive and controller has a provider (i.e. object which factory method, called ), which is responsible for creating the component’s instance.
  • We can dig a little bit deeper in AngularJS’ implementation:

    From the example above we can notice how the method is actually used:

    The snippet above calls the method of with the factory method (i.e. ) of given service, as first argument.

  • In the callback the method is called with first argument , which is the name of the service, we want to decorate and second argument factory function, which implements the actual decoration.
  • This way we can use the constructor function and its static methods by:

    The code above will immediately return an empty object and keep reference to it.


This publication aims to provide a more theoretical overview of some of the AngularJS components in order to show you how the things you are already familiar with (like different Object-Oriented Design Patterns) fit in the picture.


@mgechev: AngularJS in Patterns. Singleton, Factory Method, Decorator, Facade, Proxy and Active Record

This publication aims to provide a more theoretical overview of some of the AngularJS components in order to show you how the things you are already familiar with (like different Object-Oriented Design Patterns) fit in the picture.

Link to the first part of the series.

This blog post continues the series “AngularJS in Patterns”. You can find the original GitHub repository, which contains all the information at github.com/mgechev/angularjs-in-patterns. If you like my work you can follow me at github.com/mgechev.

In this sub-chapter we are going to take a look at the design and architectural patterns used in AngularJS’ services.

Note: Some of the described patterns are used in other components as well but their usage is almost equivalent so they are explained here.

The singleton pattern is a design pattern that restricts the instantiation of a class to one object. This is useful when exactly one object is needed to coordinate actions across the system. The concept is sometimes generalized to systems that operate more efficiently when only one object exists, or that restrict the instantiation to a certain number of objects.

In the UML diagram below the singleton design pattern is illustrated.

When given dependency is required by any component, AngularJS resolves it using the following algorithm:

This way the services are actually singletons but not implemented through the Singleton pattern, which provides a few advantages over the standard implementation:

For further discussion on this topic Misko Hevery’s article in the Google Testing blog could be considered.

The factory method pattern is a creational pattern, which uses factory methods to deal with the problem of creating objects without specifying the exact class of object that will be created. This is done by creating objects via a factory method, which is either specified in an interface (abstract class) and implemented in implementing classes (concrete classes); or implemented in a base class, which can be overridden when inherited in derived classes; rather than by a constructor.

Lets consider the following snippet:

. Since in JavaScript we don’t have interfaces and the language is duck-typed there is a convention to name the factory method of the providers that way.

), which is responsible for creating the component’s instance.

We can dig a little bit deeper in AngularJS’ implementation:

method is actually used:

If we think in terms of the UML diagram above, we can call the provider a “ConcreteCreator” and the actual component, which is being created a “Product”.

There are a few benefits of using the factory method pattern in this case, because of the indirection it creates. This way the framework can take care of the boilerplates during the instantiation of new components like:

you can create “wrapper” of any service you have previously defined or used by a third-party:

method with the appropriate context.

Using this pattern is especially useful when we need to modify the functionality of third party services. In cases when multiple similar decorations are required (like performance measurement of multiple methods, authorization, logging, etc.), we may have a lot of duplications and violate the DRY principle. In such cases it is useful to use aspect-oriented programming. The only AOP framework for AngularJS I’m aware of could be found at github.com/mgechev/angular-aop.

There are a few facades in AngularJS. Each time you want to provide higher level API to given functionality you practically create a facade.

POST request:

service we can:

or we can even:

The second option provides pre-configured version, which creates a HTTP POST request to the given URL.

service. We will take a further look at this service in Active Record and Proxy sections.

We can distinguish three different types of proxy:

In this sub-chapter we are going to take a look at AngularJS’ implementation of Virtual Proxy.

makes the GET request, it returns an empty object and keeps reference to it. We can think of this object as virtual proxy (a simple placeholder), which would be populated with the actual data once the client receives response by the server.

How does this works with AngularJS? Well, lets consider the following snippet:

, which will lead to update of the view.

The Active Record object is an object, which carries both data and behavior. Usually most of the data in these objects is persistent, responsibility of the Active Record object is to take care of the communication with the database in order to create, update, retrieve or delete the data. It may delegate this responsibility to lower level objects but calls to instance or static methods of the active record object cause the database communication.

. In the current version of AngularJS (1.2+) it is being distributed in module outside of the AngularJS’ core.

is:

could be used:

will create a constructor function for our model instances. Each of the model instances will have methods, which could be used for the different CRUD operations.

This way we can use the constructor function and its static methods by:

The code above will immediately return an empty object and keep reference to it. Once the response has been successfully returned and parsed, AngularJS will populate this object with the received data (see proxy).

The magic of $resource and AngularJS’ documentation.

does not implement exactly the Active Record pattern, since it communicates with RESTful service instead of the database. Anyway, we can consider it as “Active Record like RESTful communication”.

AngularJS in Patterns (Part 2). Services. – Minko Gechev’s blog

Comments are closed, but trackbacks and pingbacks are open.