AngularJS Services & Dependency Injection

AngularJS Services & Dependency Injection
December 12, 2016 No Comments Uncategorized Minal Landge

AngularJS Services & Dependency Injection



    • Services are javascript functions and are responsible to do a specific tasks only.
    • AngularJS Services are normally injected using dependency injection mechanism of AngularJS.
    • In AngularJS you can make your own service, or use one of the many built-in services.
    • Angular services are substitutable objects that are wired together using dependency injection (DI).
    • This helps in making components reusable, maintainable and testable.


What is Dependency Injection?

Dependency Injection is a software design pattern in which an object is given its dependencies, rather than the object creating them itself. It is about removing the hard-coded dependencies and making it possible to change them whenever needed.

    • AngularJS provides many inbuilt services for example, $http, $route, $window, $location, $interval ,etc.
    • Inbuilt services are always prefixed with $ symbol.
    • Each service is responsible for a specific task.
    • For example,
      • $http is used to make ajax call to get the server data.
      • $timeout service runs a function after a sepecified number of milliseconds.
      • $route is used to define the routing information and so on.


  • Example:
    <!DOCTYPE html><html><script src=””></script>
    <body><div ng-app=”myApp” ng-controller=”myCtrl”><p>This header will change after two seconds:</p>




    var app = angular.module(‘myApp’, []);
    app.controller(‘myCtrl’, function($scope, $timeout) {
    $scope.myHeader = “Hello ..!”;

    $timeout(function () {

    $scope.myHeader = “How are you today?”;

    }, 2000);





You can make your own service in AngularJS as follows:
• .service() is a method on our module that takes a name and a function that defines the service.
app.service(‘MyService’, function () {
this.sayHello = function () {
app.controller(‘AppController’, function (MyService) {

HTTP Services

AngularJS $http service is used is use to make AJAX requests. $http is an AngularJS service for reading data from remote servers. AngularJS needs data in JSON format.

<div ng-app=”myApp” ng-controller=”myCtrl”>

<p>Today’s welcome message is:</p>




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

app.controller(‘myCtrl’, function($scope, $http) {


.then(function(response) {

$scope.myWelcome =;




  • There are several shortcut methods of the $http service:
    • $http.delete()
    • $http.get()
    • $http.head()
    • $http.jsonp()
    • $http.patch()
    • $
    • $http.put()
  • The response object has these properties:
  • data– {string|Object} – The response body transformed with the transform functions.
  • status– {number} – HTTP status code of the response.
  • headers– {function([headerName])} – Header getter function.
  • config– {Object} – The configuration object that was used to generate the request.
  • statusText– {string} – HTTP status text of the response.



  • It is a function which is used to return value.
  • .factory() is a method on our module and it also takes a name and a function, that defines the factory.
  • We can inject and use that thing exactly the same way we did with the service.

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

mainApp.factory(‘MathService’, function() {

var factory = {};

factory.multiply = function(a, b) {

return a * b


return factory;



About The Author

Leave a reply

Your email address will not be published. Required fields are marked *