Angular JS Services (An Overview)

AngularJS services are objects or functions that can hold state across the whole application. Unlike controllers that can be destroyed and created anytime, together with the states and values they hold, services can hold data across your application and can be reused across controllers. AngularJS services usually contain business logic and are used to make server calls and fetch data. They are also usually independent of the views.

Screen Shot 2015-06-14 at 8.44.47 PM

Found above is a service that provides the add and subtract methods. A service is defined with:

.service(‘ServiceName’, [function( ) {

// service definition here

}]);

AngularJS services can come in three forms: Factories, Services, and Providers. They are all services and just differ in the way they are constructed and the values they return.

Let’s see the same service above in the form of a factory:

Screen Shot 2015-06-14 at 9.07.21 PM

A factory is defined with .factory instead of .service. As we can see, in a factory, the methods it provide are returned as part of the return object. We first declared the variable factory to be an empty hash, added methods to it, and eventually have it as our return value. In a service, the methods are defined on the service itself (using this as seen above).

Services in AngularJS are lazy loaded meaning they are only instantiated the first time they are needed in the angular application. Services are also singletons meaning the same instance that was instantiated during the first call, is the same instance that is passed everytime the service is needed.

Dependency Injection

Services are also heavily related with AngularJS Dependency Injection. Services can depend on other services too. To specifiy a dependency of a service you may do it like this:Screen Shot 2015-06-14 at 8.54.53 PM

Here in our MathService service, we injected BasicOperationsService as a dependency and pass it as a parameter to our function definition for use in our methods. In both our square and cube methods, we invoked the multiple function of BasicOperationService.

Most of the time you will find yourself needing a service in your controller which can be injected the same way:

Screen Shot 2015-06-14 at 8.56.56 PM

Here we have injected several dependencies, $scope, BasicOperationsService, MathService, and BasicOperationsServiceV2 into our controller and pass them as parameters for use inside our controller.

As you may have noticed, here we used the safe style of injecting dependencies and that is listing first the dependencies and then passing them as parameters to the function. More on Dependency Injection in my next post. 🙂

For the complete source code of the services and factories used in this post, you may refer to the ng-calc repository at my Github page at https://github.com/apfestin/ng-calc. 🙂 It basically is a calculator that does the basic math operations (add, subtract, multiply, and divide) together with squares and cubes and is implemented using AngularJS services and factories.

Happy coding!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s