As I mentioned in my earlier blog A Structural Framework for Dynamic Web Applications [Part 1], AngularJS is an open source web application framework to build large scale and high performance web applications while keeping them easy to maintain. It provides developers options to write client-side application in a clean Model View Controller (MVC) architecture. AngularJS automatically handles JavaScript code suitable for different browsers and so, the developer does not have to make his JavaScript application cross-browser compliant.
In my previous blog A Structural Framework for Dynamic Web Applications [Part 1], I focused on Controller and Directives. In this blog I will delve into Dependency Injection and Services.
Dependency Injection
AngularJS has a built-in dependency injection subsystem, which lets the developer to specify the dependencies as parameter to the controller. Dependency injection takes care of injecting the specified dependency and makes the developer’s job easier.
There are many AngularJS core services which can be accessed by injecting to the controller as parameter. AngularJS will detect that you need that service and provide you an instance of it. In the following example $http, $location are dependencies injected to the controller MyController.
angular.module (“myApp”,[]).controller(“MyController”,function($scope, $location){
// body of the controller
});Services
Services are JavaScript functions which are used to perform a particular task. Services are injected into the controllers using AngularJS’s dependency injection mechanism. Services are individual entity which is easily maintainable and testable. AngularJS provides many built-in services, for example $http to make AJAX call to the server, $route to define routing configuration, etc. Let’s understand this with an example.
Step-1: Create a template
<div ng-app=" myApp" ng-controller="MyController">
<p>Enter a number: <input type="number" ng-model="number" /></p>
<button ng-click="getSquare()">Square</button>
<p>Result: {{result}}</p>
</div>Step-2: Create a service
var app = angular.module('myApp', []);
app .service('MathService', function(){
this.square = function(a) {
return a * a;
}
});The above service has a method “square” which accepts a number and returns its square.
Step-3: Inject the above service to the controller
var app = angular.module('myApp', []);
app .controller('MyController', function($scope, MathService) {
$scope.getSquare = function(){
$scope.result = MathService.square($scope.number);
}
});Result
In the above controller MathService is injected and square method is called using this injector which returns square of a given number.
