Subscribe via RSS Feed

What is Angular Service? Why and where should we use it?

May 5, 2015 0 Comments

By definition services in AngularJS are Javascript functions that are responsible to do only specific tasks. Services can be used to organize and share code across an application. Here sharing refers to sharing of data and functions. It keeps data across the lifetime of an Angular app. Controller communication can be done using services in a consistent way. Angular services are substitutable objects that are wired together using dependency injection (DI). Angular services are : Lazily instantiated : A service is instantiated only using the $injector when an application component depends on it. Singletons : Each component dependent on a service gets a reference to the single instance generated by the service factory. AngularJs provides some inbuid services like $http, $route, $location etc. and each of them perform a specific task. air max 2017 goedkoop For example $http is used to make ajax call to the server to get data, $route is used for routing application and so on. nike air max pas cher We can also create our own service for our purpose depending on the needs.

Creating service

Service can be created in several ways. They are :

  • using service() method
  • using factory() method
  • using provide() method
  • using constant() method
  • using value() method
  • In this article we are going to use the service() method. Using service() method we first define a service and then assign method to the service. Let’s take look at the following example. [javascript] var app = angular.module(‘myApp’,[]); app.service(‘myService’,function(){ this.getLength=function(element){ return element.length; }; }); [/javascript] Here we have created a service for myApp application named ‘myService’. Nike Air Max 2016 Goedkoop The service has its own method getLength() that returns length of passed element. It’s very simple, right? Now let’s see how to use this service as well as the function within it. [javascript] app.controller(‘myController’,function($scope,myService){ $scope.showLength=function(element){ $scope.len=myService.getLength(element); }; }); [/javascript]


    In the above code snippet we are defining a controller for our application and injecting our myService in it. Then in $scope’s showLength() function (to be called from the template) we are using getLength() function of our service ‘myService’. As a result view is updated with the length. Let’s look at the view now. HTML Template [javascript] <html lang="en" ng-app="myApp"> <head> <script src=""></script> <script src="js/script.js"></script> </head> <body> <div ng-controller="myController"> <div ng-view> <div> <input type="text" ng-model="text1" ng-change="showLength(text1)" /> </div> <div> Length : {{len}} </div> </div> </div> </body> </html> [/javascript] By now it is clear how we are calling the controller’s showLength() method. So we get the length of the textbox whenever we type or erase something in the input box.


    Services can have their own dependencies. fjallraven kanken pas cher We can declare dependencies by specifying them in the service’s factory function signature like we use to do in controller. A simple example would be [javascript] app.service(‘myService’, [‘$interval’, function($interval) { … … $interval(function(){…},5000); … nike air max 2016 goedkoop }]); [/javascript] Here we have used $interval for dependency injection in our service and using it for performing some action to be taken place in an interval of 5 seconds. If you find this article helpful, you can connect us in Google+ and Twitter.

    Leave a Reply

    You must be logged in to post a comment.