AngularJS: Factory, Service and Provider

Posted on

Tallerconcepts & Angularjs

AngularJS: Factory, Service and Provider

Introduction:

AngularJS is a powerful JavaScript framework which is widely used for SPA (Single Page Application) projects. The library of this framework is written in JavaScript and distributes as a JavaScript file which can be added into a webpage by using script tag. It extends the HTML DOM with additional attributes and allows the pages to become more responsive to user actions. AngularJS library is completely free, open source and very much popular JavaScript library among all. The library is being used by thousands of developers and applications as well.

In AngularJS, there are some keywords used for different purposes such as Controllers, Service, Factory and Provider etc. The controller is used to handle the connection, request and responses made through your application and must be light. It means most of the persistent data and business logic of your application must be stored in a service. Services in AngularJS holds the data around for the application lifetime and can be easily accessed through different controllers. AngularJS library offers developers with three different ways to register their own services – Factory, Service and Provider.

Services:

The syntax for a service is as follows:

app.service(‘serviceName’, function() {});

AngularJS instantiates services in the background of your application with a ‘new’ keyword. This is why developers can use the property ‘this’ and the relevant service will return the expected value of ‘this’. If you pass the service into your controller then all the properties and attributes of ‘this’ will now be available on that controller through your defined service.

When you are declaring serviceName as an injectable argument then you’ll be provided with the instance of a function passed to app.service. The services of AngularJS could be useful while sharing utility function that are useful to invoke by simply appending () to the injected reference of a function.

Factories:

The syntax for factories in AngularJS is as follows:

app.factory(‘factoryName’, function() {} );

You simply create an object when you are using a factory. It means you add properties and attributes to it and then return the same object. When you pass your factory object into your controller then all the defined attributes and properties on the object will now be available in that controller through your defined factory.

When your are declaring factoryName as an injectable argument then you’ll be provided the value that is returned by calling the function reference passed to app.factory. These factories could be useful for returning a ‘class’ function that can then be ready to generate an instance using ‘new’ keyword.

Providers:

The syntax for providers in AngularJS is as follows:

app.provider(‘providerName’, function() {

});

app.config(function (providerNameProvider) {

// define your config here for this provider

});

The providers in AngularJS is the only service which can be passed into your .config() function. It exposes the API for the application-wide configuration that must be prepared before the start of your application. The providers are used when developer want to provide module-wide configuration for a service object before making it available.

Conclusion:

The single page applications are composed to objects that collaborate to get request response done as expected for end-users. All these objects must be instantiated when they required and wired together in order to function properly. In AngularJS so far we learn that these objects are instantiated and wired together automatically by a variety of injector services such as Services, Factories and Providers. The applications developed using AngularJs library are very much lighter and highly responsive for your targeted users.