Overview
AngularJs is one of the widely used open-source front-end frameworks because of its good architecture in place, its extensibility, a lot of interesting features, and the big community around it.
In this short article, we’re going to showcase a simple example of why it’s sometimes better to use AngularJS’s inbuilt global objects and services instead of native ones.
Why use Angular Wrappers?
AngularJs applications are benefiting from some great functionalities, instead of just using those necessary for frontend architecture as an AngularJS lover I strongly advise also taking advantage of the other global objects and services.
The case to show as an example is the famous setTimeout function of the JavaScript window object, which has its $timeout corresponding service in AngularJS world.
In simple words, AngularJS wrappers and services are already built to synchronize with AngularJ applications, so can be used without any further tricks.
Timeout Usage
setTimeout is part of the window object, helpful to execute a function or evaluate an expression one time after a certain delay in milliseconds.
Let’s set up a basic AngularJS application with a controller:
/** * Simple script to show how to solve the scrope update * When using the native js TimeOut call * * @author dassiorleando */ (function (angular) { 'use strict'; angular .module('myApp', []) // Define our angular app .controller('IndexController', IndexController); // We setup the controller IndexController.$inject = ['$scope', '$timeout']; function IndexController($scope, $timeout) { $scope.firstMessage = 'First message'; $scope.secondMessage = 'Second message'; // Let's update the first message after 2 seconds // Angular $timeout service $timeout(function() { $scope.firstMessage = 'First message updated'; alert($scope.firstMessage); }, 2000); // Let's update the second message after 2 seconds // Native implementation setTimeout(function() { $scope.secondMessage = 'Second message updated'; alert($scope.secondMessage); }, 2000); // Be aware that if the $timeout was called at the second place the digest could be also updated // That means both messages will be updated despite the use of setTimeout. } })(window.angular);
In this example, after 2 seconds the firstMessage will be updated but the secondMessage not, as shown on the following page:

setTimeout:
It is invoked with two parameters, the function we would like to call and the delay for it to happen.
When we are using it in an AngularJS application we also need to apply the eventual scope changes to the angular digest, because the default timeout runs outside the AngularJS life-cycle which also means our bidirectional binding will not render the update.
That is why it’s needed here to refresh the AngularJS scope with the call of $rootScope.$apply() or $rootScope.$applyAsync().
$apply and $applyAsync serve the same purpose but with a delay difference on the second one.
$timeout:
We almost have the same syntax as the previous one, but there are more parameters to pass to its call.
For example, we can also decide to call it outside the life cycle:
$timeout(function() { $scope.firstMessage = 'First message updated'; alert($scope.firstMessage); }, 2000, false);
Here we see that one more parameter can be added to this service, it’s a boolean to say if yes or no we want the apply to follow our function call after 2 seconds.
In simple words, call it with false as the third parameter will call our function outside of the AngularJS life-cycle.
Note: By default, this third parameter is true.
The documentation states it clearly here.
Other Wrappers and Utilities Functions
There are more AngularJS wrapper services for specific JavaScript objects that can be interesting to use instead of the native ones, sometimes because of the simplicity/syntax or because of the effect as the one just described up here.
Functions
Let’s see another example, where the intent is to know if a variable hasn’t been declared or has the value undefined.
Here I feel more confident using:
if(angular.isDefined(variable)) { }
Instead of:
if(typeof variable != 'undefined') { }
Others that may be good for you:
- angular.isDate: to know if a variable is a date
- angular.isArray: figure out if it’s an array
- angular.copy: make a deep copy of an object
- angular.isObject: test an object type
- angular.toJson: serialize an object into JSON
- angular.fromJson: deserialize a JSON string to an object
Others are listed here.
Services
Some AAngularJS services:
- $document: wrapper for the browser window.document object
- $interval for window.setInterval, the repeated version of setTimeout
- $http to make remote HTTP call using XMLHttpRequest object or via JSONP
- $log for logging into the browser’s console
More services are available in the documentation.
Conclusion
To resume, in this article, we have seen why sometimes it’s better to use AngularJS wrappers instead of native implementations while highlighting the timeout use case.
The full source code is available over on GitHub.