AngularJS Services & Dependency Injection

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

AngularJS Services & Dependency Injection

"AngularJS

Services

    • 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=”https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
    <body><div ng-app=”myApp” ng-controller=”myCtrl”><p>This header will change after two seconds:</p>

    <p>{{myHeader}}</p>

    </div>

    <script>

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

    $timeout(function () {

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

    }, 2000);

    });

    </script>

    </body>

    </html>

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.
Example:
app.service(‘MyService’, function () {
this.sayHello = function () {
console.log(‘hello’);
};
});
app.controller(‘AppController’, function (MyService) {
MyService.sayHello();
});

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.

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

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

<p>{{myWelcome}}</p>

</div>

<script>

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

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

    $http.get(“welcome.html”)

.then(function(response) {

$scope.myWelcome = response.data;

});

});

</script>

  • There are several shortcut methods of the $http service:
    • $http.delete()
    • $http.get()
    • $http.head()
    • $http.jsonp()
    • $http.patch()
    • $http.post()
    • $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.

 

Factory

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

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

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

var factory = {};

factory.multiply = function(a, b) {

return a * b

}

return factory;

});

 

Tags
About The Author

Leave a reply

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