AngularJs Services

Rubleen Kaur
Last Updated: May 13, 2022

Introduction

AngularJs Service is a method or object used to create variables/data that we can use outside the components in which it is explained. AngularJs provides us with 30 built-in services. We will be describing a few of the services in this article for better understanding. 

 

 

Why use Services?

AngularJs also let us create services that we can use to communicate to the backend server, through which it offers us many built-in services and lets us make our services as well. These services are injectable, which follows the dependency injection mechanism. These services are JavaScript methods that can perform some specific tasks. A few examples for built-in angular services like $location, $route, $window, and many more. 

Types of Services

 In this article, we are going to discuss a few built-in services offered by angular. A few of the most commonly used services are mentioned below:

  • $parse: This service is used to convert a regular expression into an appropriate function. 
  • $rootScope: This service provides a root scope for a variable, or we can say that it allows for a global scope to the variable. 
  • $http: This service is used to provide communication between a browser and an HTTP server. It is used to connect an HTTP server through the browser's XML request object.

Let’s consider an example to understand it, 

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl"

<p>Welcome to Coding Ninjas</p>

<h1>{{myWelcome}}</h1>

</div>

<p>This service is used to provide communication between a browser and an HTTP server. It is used to connect an HTTP server through the browser's XML request object.</p>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl'function($scope, $http) {
  $http.get("welcome.htm").then(function (response) {
      $scope.myWelcome = response.data;
  });
});
</script>

</body>
</html>

 
OUTPUT



 

  • $timeout: This service is used for setting up a delay in the execution of a function. This service is similar to the Javascript timeout function. Let’s see an example to understand it better, 
     
<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  <script src="script.js"></script>
  </head>
  <body ng-controller="timeController">
    <div>
      <div> Welcome to Coding Ninjas is displayed after 5 seconds. {{msg}}</div>
  </div>
  <script>
var sample = angular.module('myApp', []);
sample.controller('timeController'function($scope, $timeout) {
  $timeout( function(){
      $scope.msg = "Hey!";
    }, 5000 ); 
});

  </script>
  </body>
</html>


OUTPUT: 



 

  • $interval: This server is an angular wrapper version of windows.setInterval of Javascript.  Let’s observe an example to understand better,
     
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl"

<p>The time is:</p>

<h1>{{theTime}}</h1>

</div>

<p>The $interval service runs a function for each specified millisecond.</p>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl'function($scope, $interval) {
  $scope.theTime = new Date().toLocaleTimeString();
  $interval(function () {
      $scope.theTime = new Date().toLocaleTimeString();
  }, 2000);
});
</script>

</body>
</html>


OUTPUT


 

Create your custom service


Angular Js allows us to create services that we can connect to our module. 

In the given example, we will create a custom service of our own, hexagonninja which will convert a number to a hexagon number. 

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">

<p>The hexadecimal value of 255 is:</p>

<h1>{{hex}}</h1>

</div>

<p>A custom service with a method that converts a given number into a hexadecimal number.</p>

<script>
var app = angular.module('myApp', []);

app.service('hexagonninja'function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.controller('myCtrl'function($scope, hexagonninja) {
  $scope.hex = hexagonninja.myFunc(255);
});
</script>

</body>
</html>

 

OUTPUT
 


 

Frequenlty Asked Questions

  1. What is Angular Js Services?

Ans:  AngularJs Service is a method or object used to create variables/data that we can use outside the components in which it is explained.

2. Why do we use Services?

Ans: AngularJs also let us create services that we can use to communicate to the backend server, through which it offers us many built-in services and allows us to make our services as well. These services are injectable, which follows the dependency injection mechanism. These services are JavaScript methods that can perform some specific tasks.

3. Mention some built-in services.

Ans: Few of the built-in services offered in AngularJs are:

→ $parse

→ $timeout

→ $interval
→ $http

Key Takeaways

Hey everyone, so let's brief out the article. 

  • We have briefly introduced AngularJs; AngularJs Service is a method or an object used to create variables/data that we can use outside the components it is explained. AngularJs provides us with 30 built-in services.
  • We have discussed why to use Services, and these services are injectable, which follows the dependency injection mechanism. These services are JavaScript methods that can perform some specific tasks.
  • The article then covers a few built-in services, and we can even create our custom services.

 

Isn’t Web Development engaging? Building new websites and using amazing animations and different APIs, don’t be scared if you cannot grasp the hold of this vast development. We have the perfect web development course for you to make you stand out from your fellow developers. 

Happy Learning Ninjas!

 

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think