Services in angularjs

AngularJS Services

In Angular JS , Service is a function or object and which have properties and methods, just like JavaScript object .Service provides some sort of inbuilt services that can be reused within an angular application.

These are only used to do specific tasks, so that easy to maintain and testing. Services are injected using Dependency Injection Mechanism. AngularJS has around 30 Built-in services.

Why use Services:

Persist and share data between Controllers.

If we assign data to controller, the data will be discarded once we change controller. This problem can be solved by using $rootscope but, that is not the best way. If we keep the data inside service, that can be accessible for all the controllers.

DRY (Don’t repeat yourself)

We have a series of functions that we need in different controllers, without the service we would have to repeat our code in each controller, with a service you can create a single API for this functions and inject it in every Controller or Directive or Service you need.

Creating Service:

Application developers are allowed to customize their own Services by enrolling the services name and service factory function, with an AngularJS module.

The service factory function generates a single object or function that speaks to the support of the remainder of the application. The object or function returned by the service is infused into any segment (controller, service, filter or directive) that indicates a reliance on the service.

Dependencies:

Services can have their own dependencies. Much the same as proclaiming dependencies in a controller, you announce dependencies by indicating them in the service’s factory functioning signature.

Types of Services:

  1. Built-In Services:AngularJS  have default services, such as  $http, $log, $location, $timeout etc. Inbuilt one’s are prefixed with $ symbol.
  2. Custom-Services:These services are developed to achieve certain business logic in the form of service. We can create these services in 3 ways.
  1. Factory
  2. Service
  3. Provider
  4. Constant
  5. Value.

At first, create a main module named app using this syntax.

var app= angular.module(‘myApp’, []);

Factory:

It can be injected into components like controller, service, filter or directive.

We use the factory method to create an object, add properties to it and return the same object.

AngularJS can create a service by using the Module’s Factory API.

The general syntax for using Factory service.

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

return factoryObj;

});

Service:

Service is similar to the factory service. The only difference between factory and service is that service object declaration. Here we don’t need to create an object, Angular takes care of – how member function gets instantiate and send to the controller as a parameter.

The general syntax for using Service.

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

Provider:

Providers are used when we want to provide module-wide configuration for our service object before making it available. The provider has a lot of customization options compared to both services and factory.

It returns value by using $get() function. Providers are the only service you can pass into your .config() function.

The  syntax for creating and configuring a Provider.

// syntax for creating a provider

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

//syntax for configuring a provider

app.config(function(providerNameProvider){});

Note: Use Provider only when you need to instantiate some sort of configuration information otherwise use factory/service.

Constant:

As its name depicts it provides a way for declaring constants facility in our application and we can use them anywhere needed by just adding it as a dependency. There are many areas of our application where we want to use constants such as some base urls, application name, some configurations, etc. So we just define them once and use them where ever we need. This technique lets us define at one place, so that a later any change of value doesn’t have us change on all places, we simply just change the value of constant only.  Below is how we can define/create constants:

app.constant(‘applicationName’, ‘Service Tutorials’);

It is simple in creation, as for using we just add dependency where we want to use it.

Value:

This is the simplest service, which we can create and use. It is just like a key value pair/ like a variable that has some value. It just stores a single value. Assume we have a service that displays user name. Let us see how we can create this service.

var app=angular.module(“app”,[]);

app.value(“username”,”John”);

Using Value:

We can use the service anywhere by injecting, for simplicity we are injecting in a controller and using it, here is how it looks like:

app.controller(“MainController”,function($scope, username){

$scope.username=username;

});

In this above example we have created a username value service and used it in MainController.

 Summary:

Here we had gone through different AngularJS service types provided by Angular. Each of them has their own use cases, pros and cons. But the most commonly used is Factory service as it meets all our needs, the other ones can also be used depending on the requirements.

For AngularJS Course Details Click Here

This Post Has One Comment

  1. Thank for sharing this nice Information to learn AngularJS course.

Leave a Reply

Close Menu