More info on wrappers. This article was originally posted . The full source code is available . AngularJs here over on GitHub Overview 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. AngularJs 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. Why using 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 advice to also take advantages of the others global objects and services. The case to show as an example is the famous function of the window object which has its corresponding service in AngularJs world. setTimeout javascript $timeout In simple word AngularJs wrappers and services are already built to synchronized with AngularJs application, so can be used without any further tricks. Timeout case is part of the window object, helpful to execute a function or evaluating an expression one time after a certain delay in milliseconds. setTimeout Let’s setting up a basic AngularJS application with a controller: In this example, after 2 seconds the will be updated but the not, as shown on the following page: firstMessage secondMessage 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 or . $rootScope.$apply() $rootScope.$applyAsync() and serve the same purpose but with a delay difference on the second one. $apply $applyAsync $timeout: Almost the same syntax as the previous but there are more parameters here that can be pass to its call. For example, we can also decide to call it outside of 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 to follow our function call after 2 seconds. apply In simple word, call it with false as the third parameters will call our function outside of AngularJS framework. : By default this third parameter is true. Note The documentation stated it clearly . here Others wrappers and utilities functions 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

} Others that may be good for you: : to know if a variable is a date angular.isDate : figure out if it’s an array angular.isArray : make a deep copy an object angular.copy : test an object type angular.isObject : serialize an object into JSON angular.toJson : deserialize a JSON string to an object angular.fromJson Others are listed . here Services Some AngularJs services: : wrapper for the browser window.document object $document for window.setInterval, the repeated version of setTimeout $interval to make remote HTTP call using XMLHttpRequest object or via JSONP $http for logging into the browser’s console $log 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 highlighted the timeout case. The full source code is available . over on GitHub Thanks for reading this post, recommend and share if you enjoyed it. Follow me on , , and visit my . Facebook Twitter LinkedIn blog Cheers!

Facebook

Twitter

Too Long; Didn't Read

Get free API security automated scan in minutes

Why using AngularJs’s global objects instead of native ?

Too Long; Didn't Read

Companies Mentioned

@dassiorleando

RELATED STORIES