AngularJs’s global objects instead of native ?

AngularJs is one of the widely used open sources front-end framework because of its good architecture in place, the extensibility, a lot of interesting features and the big community too.

In this short article, we're going to showcase with a simple example why it's sometimes better to use AngularJS's inbuilt global objects and services instead of native ones.

AngularJs applications are benefiting from some great functionalities, instead of just using those necessary for frontend architecture as an AngularJs lover I strongly advice to also take advantages of the others 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 word AngularJs wrappers and services are already built to synchronized with AngularJs application, so can be used without any further tricks.

setTimeout is part of the window object, helpful to execute a function or evaluating an expression one time after a certain delay in milliseconds.

Let's setting up a basic AngularJS application with a controller:

(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 in the second place the digest could be also updated
        }
})(window.angular);

In this example, after 2 seconds the firstMessage will be updated but the secondMessage not, as shown on the following page:

setTimeout:

Here is invoked with two parameters, the function we would like to call and the delay for it to happen.

When we are using it into an AngularJs application we also need to apply the eventual scope changes to the angular digest, because the default timeout runs outside of the AngularJs life-cycle that also means our bi-directional 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(function() {
    $scope.firstMessage = 'First message updated';
    alert($scope.firstMessage);
}, 2000, false);

There are some others angular wrapper services for corresponding Javascript object that can be interesting to use instead of the native one, sometimes because of the simplicity/syntax or because of the effect as the one just described up there.

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 fill more confident to use:

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 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 AngularJs 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.