AngularJS Services

AngularJS is a very comprehensive framework. It comes with a tool set that can be used to perform almost all the client side functionalities. One of the most amazing features of AngularJS is the Angular services. AngularJS services are basically functions that perform particular tasks. AngularJS fosters separation of concerns via Services. Both controllers as well as filters can call AngularJS services. There are a total of about 30 AngularJS services. $route, $window, $http, $location are some of them. Services are limited to AngularJS application in which it is created. Let’s have a look at a very simple example of AngularJS services.

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

<div ng-app="newApp" ng-controller="newCtrl">
<p>The Absolute url of this page is:</p>
<h1>{{absUrl}}</h1>
</div>



<script>
var myapp = angular.module('newApp', []);
myapp.controller('newCtrl', function($scope, $location) {
    $scope.absUrl = $location.absUrl();
});
</script>

</body>
</html>

Download the code Try the code

Open the above page in the browser. You should see absolute URL of the page in h1 heading. Now take a close look at the script section inside the code. Here we are passing the “$location” parameter to the controller function. To use a built-in service inside a controller, you have to pass it as a parameter to the controller function. Next inside the controller we create a variable that stores the absolute URL of the current page. To get the absolute URL, simply call absUrl() function the $location service.

Timeout Service

Timeout service is another extremely useful AngularJS service. $Timeout service can be used to update model data at any time. Take a look at the following example to see what $timeout service does.

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

<div ng-app="newApp" ng-controller="newCtrl">

<p>Header text will change in three seconds:</p>

<h1>{{newHeader}}</h1>

</div>


<script>
var timerapp = angular.module('newApp', []);
timerapp.controller('newCtrl', function($scope, $timeout) {
  $scope.newHeader = "Knowledge hills!";
  $timeout(function () {
      $scope.newHeader = "Best tutorial site!";
  }, 3000);
});
</script>

</body>
</html>

Download the code Try the code

Open the above page in the browser. You will see an h1 heading with some random text. Now wait for three seconds. After three seconds the text in the heading will change. Have a close look at the code. In the script section, we pass the $timeout service to a controller. The $timeout service further takes two parameters. The first one is the function to execute. And the second parameter is time in milliseconds after which the function executes.Therefore when you open the page, the value of the header changes after three seconds.

Next article explains the process of creating custom services. Happy coding!

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .