We now have a youtube channel. Subscribe!

AngularJS | Services

AngularJS | Services


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.

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;
});


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.

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



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.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2022 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain