Hello folks! welcome back to a new edition of our tutorial on AngularJS. In this tutorial, we will studying about AngularJS Services.
Services are JavaScript functions, which are responsible to perform only specified tasks. This makes them distinct entities which are maintainable. Controllers and filters can call them when required. Services are generally injected via dependency injection technique of AngularJS.
AngularJS provides many built-in services. For example, $timeout, $window, $location, $http, $interval, $route, $animate, $compile, $controller, etc. Each service is responsible for a specific task such as the $http is used to make Ajax call to get the server data, the $route is used to define routing information, etc. The inbuilt services are always prefixed with $ symbol.
Services are JavaScript functions, which are responsible to perform only specified tasks. This makes them distinct entities which are maintainable. Controllers and filters can call them when required. Services are generally injected via dependency injection technique of AngularJS.
AngularJS provides many built-in services. For example, $timeout, $window, $location, $http, $interval, $route, $animate, $compile, $controller, etc. Each service is responsible for a specific task such as the $http is used to make Ajax call to get the server data, the $route is used to define routing information, etc. The inbuilt services are always prefixed with $ symbol.
Methods of Creating a Service
There are two methods to create a service -
- Factory Method
- Service Method
Using Factory Method
Utilizing this method, we must first define a factory and then assign method to it.
var mainApp = angular.module("mainApp", []);
mainApp.factory('MathService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b
}
return factory;
});
READ: AngularJS | Scopes
Using Service Method
In this method, we define a service and then assign method to the service. We also inject an already available service to it.
mainApp.service('CalcService', function(MathService) {
this.square = function(a) {
return MathService.multiply(a,a);
}
});
Example
The following example below illustrates the use of all the above mentioned directives -
Create a file testAngularJS.html.
Create a file testAngularJS.html.
<html> <head> <title>Angular JS Services</title> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script> </head> <body> <h2>AngularJS Sample Application</h2> <div ng-app = "mainApp" ng-controller = "CalcController"> <p>Enter a number: <input type = "number" ng-model = "number" /></p> <button ng-click = "square()">X<sup>2</sup></button> <p>Result: {{result}}</p> </div> <script> var mainApp = angular.module("mainApp", []); mainApp.factory('MathService', function() { var factory = {}; factory.multiply = function(a, b) { return a * b } return factory; }); mainApp.service('CalcService', function(MathService) { this.square = function(a) { return MathService.multiply(a,a); } }); mainApp.controller('CalcController', function($scope, CalcService) { $scope.square = function() { $scope.result = CalcService.square($scope.number); } }); </script> </body> </html>
Output
Open tge file testAngularJS.html in any web browser to see the result -
AngularJS Sample Application
Enter a number:
Result:
READ: AngularJS | Views
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we are going to be studying about AngularJS Dependency Injection.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.