Other AngularJS Services

$interval Service

AngularJS includes $interval service which performs the same task as setInterval() method in JavaScript. The $interval is a wrapper for setInterval() method, so that it will be easy to override, remove or mocked for testing.

The $interval service executes the specified function on every specified milliseconds duration.

Syntax: $interval(fn, delay, [count], [invokeApply], [Pass]);

The following example demonstrates $interval service that displays a counter on each 1000 milliseconds.

Example

<!DOCTYPE html>

<html >

<head>

<script src=”~/Scripts/angular.js”></script>

</head>

<body ng-app=”myApp”>

<div ng-controller=”myController”>

{{counter}}

</div>

<script>

var myApp = angular.module(‘myApp’, []);

myApp.controller(“myController”, function ($scope, $interval) {

$scope.counter = 0;

var increaseCounter = function () {

$scope.counter = $scope.counter + 1;

}

$interval(increaseCounter, 1000);

});

</script>

</body>

</html>

In the above example, $interval service calls increaseCounter() function on every 1000 milliseconds. The increaseCounter() function increases the $scope.counter property by 1. Thus, counter increases on every milliseconds.

Specify count:

The $interval service also executes the specified function for the specified number of times as count parameter.

Example

<!DOCTYPE html>

<html >

<head>

<script src=”~/Scripts/angular.js”></script>

</head>

<body ng-app=”myApp”>

<div ng-controller=”myController”>

{{counter}}

</div>

<script>

var myApp = angular.module(‘myApp’, []);

myApp.controller(“myController”, function ($scope, $interval) {

$scope.counter = 0;

var increaseCounter = function () {

$scope.counter = $scope.counter + 1;

}

$interval(increaseCounter, 1000, 10);

});

</script>

</body>

</html>

In the above example, increaseCounter() method will be executed on each 1000 milliseconds but not more than 10 times.

Cancel execution: The $interval service returns an object of HttpPromise which can be used to stop the counter by using $interval.cancel(promise) method.

Example: $interval.cancel()

<!DOCTYPE html>

<html >

<head>

<script src=”~/Scripts/angular.js”></script>

</head>

<body ng-app=”myApp”>

<div>

<div ng-controller=”myController”>

{{counter}} <br /><br />

<button ng-click=”cancel()”>Cancel</button>

</div>

</div>

<script>

var myApp = angular.module(‘myApp’, []);

myApp.controller(“myController”, function ($scope, $interval) {

$scope.counter = 0;

var increaseCounter = function () {

$scope.counter = $scope.counter + 1;

}

var promise = $interval(increaseCounter, 1000);

$scope.cancel = function () {

$interval.cancel(promise);

$scope.counter = “Cancelled!”;

};

});

</script>

</body>

</html>

$window Service

AngularJs includes $window service which refers to the browser window object.

In the JavaScript, window is a global object which includes many built-in methods like alert(), prompt() etc.

The $window service is a wrapper around window object, so that it will be easy to override, remove or mocked for testing. It is recommended to use $window service in AngularJS instead of global window object directly.

Example: $window

<!DOCTYPE html>

<html>

<head>

<script src=”~/Scripts/angular.js”></script>

</head>

<body ng-app=”myApp” ng-controller=”myController”>

<button ng-click=”DisplayAlert(‘Hello World!’)”>Display Alert</button>

<button ng-click=”DisplayPrompt()”>Display Prompt</button>

<script>

var myApp = angular.module(‘myApp’, []);

myApp.controller(“myController”, function ($scope, $window) {

$scope.DisplayAlert = function (message) {

$window.alert(message);

}

$scope.DisplayPrompt = function () {

var name = $window.prompt(‘Enter Your Name’);

$window.alert(‘Hello ‘ + name);

}

 

});

</script>

</body>

</html>

$resource

$resource is used for the same purpose as $http Service but the key difference between them is that $resource is based on a RESTful architecture and is used to access Restful Web Services. For using $resource Service, you just need to add Angular-resource script file after AngularJS and dependency of ngResource into Angular module, as shown in the syntax given below.

$q

$q service is used to handle the promises and the deferred objects. Promises are the pending results of the asynchronous calls and deferred objects returns promises and the results of asychronous operation after its completion to the calling code.

How $q works

  • Step 1 – The client sends asynchronous call to the Service.
  • Step 2 – The Service receives the call and create a deferred object by using $q Service.
  • Step 3 – The deferred object returns the promise to the client.
  • Step 4 – The client uses this promise to write callback functions.
  • Step 5 – The Service performs the work and return the status of the function, which is either successfully completed or rejected through deferred object to the client.
  • Step 6 – The client executes success or an error callback function, which is based on the result return from the Service.

Get industry recognized certification – Contact us

Menu