Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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

Subscribe in a reader

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. For example $http is used to make ajax call to the server to get data, $route is used for routing application and so on. 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.

    var app = angular.module('myApp',[]);
    		return element.length;

    Here we have created a service for myApp application named ‘myService’. 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.



    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

    <html lang="en" ng-app="myApp">
    <script src=""></script>
    <script src="js/script.js"></script>
    <div ng-controller="myController">
    	<div ng-view>
    			<input type="text" ng-model="text1" ng-change="showLength(text1)" />
    			Length : {{len}}

    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. 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

    app.service('myService', ['$interval', function($interval) {

    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.

    Enter your email address:

    Delivered by FeedBurner


    This post first appeared on Technical Blogs - Blog About Small Technical Know Hows : Technical Blogs, please read the originial post: here

    Share the post

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


    Subscribe to Technical Blogs - Blog About Small Technical Know Hows : Technical Blogs

    Get updates delivered right to your inbox!

    Thank you for your subscription