CHICAGO, USA

318 West Adams Street, Chicago
IL 60606
USA
Tel: +1 512 999 5796

CLEVELAND, USA

675 Alpha Dr, Suite E, Highland Heights,
OH – 44143
Cleveland, Ohio
Tel: +1 512 999 5796

KOCHI, INDIA

#102, First Floor Lulu Cyber Tower
Infopark, Kochi – 682 042
Kerala, India
Tel: +91 484 404 5555

×

CONTACT US

INDIA

+914844045555

USA

+1 512 999 5796

Contact

5-Tips-to-improve-performance-in-angular-js

The developer world knows it well - the cordova applications are at a hype than ever before. But ever thought of the performance constraints that it put forward? This exactly is where the new structural frameworks that supports dynamic web apps come in. Make no doubt, AngularJS is the most preferred name among the other cross platform tools. However, to derive the best possible results out of it, it is inevitable that a developer is shrewd enough. Here are a few points that one need to consider while using this tool. Avoid bootstrapping the application in index.html. Listen for deviceready event in index.js and and then proceed to bootstrap the app. angular.module('myApp', []); var onDeviceReady = function() {    angular.bootstrap( document, ['myApp']); } document.addEventListener('deviceready', onDeviceReady); Choose between $broadcast and $emit As per the documentation: $emit The event life cycle starts at the scope on which $emit was called. All listeners listening for name event on this scope get notified. Afterwards, the event traverses upwards toward the root scope and calls all registered listeners along the way. The event will stop propagating if one of the listeners cancels it. $broadcast Dispatches an event name downwards to all child scopes (and their children) notifying the registered $rootScope.Scope listeners. The event life cycle starts at the scope on which $broadcast was called. All listeners listening for name event on this scope get notified. Afterwards, the event propagates to all direct and indirect scopes of the current scope and calls all registered listeners along the way. The event cannot be canceled $destroy event broadcasted when a scope and its children are being destroyed Listening for the $destroy event is an opportunity to halt the timer. One approach is to cancel the promise returned by $timeout. $scope.$on("$destroy", function() {        if (timer) {           //cancel timers        }    }); To avoid the propagation of event to further scopes, destroy it after handling. angular    .module('Testapp')    .controller('TestappCtrl', function($scope, testService) {            var destory = $scope.$on('eventtolisten', function(){                console.log('work done');            });            $scope.$on('$destroy', destory);        }    ]); Start using ngResource As per the documentation, the ngResource module provides interaction support with RESTful services via the $resource service. - service in module ngResource $resource is a factory which creates a resource object that lets you interact with RESTful server-side data sources. The returned resource object has action methods which provide high-level behaviors without the need to interact with the low level $http service. Optimizations a) Filter data early instead of template filters when possible b) Use two-way databinding when needed only c) Use 'safeApply' method that checks the current phase before executing your function, instead of $apply d) use ngClick. Whatever ever click in mobile browser will take a time delay for detecting which kind of tap is done by the user. If we use Fastclick.js it will eliminate the time delay. To use fastclick in our app is just to add this line in ondeviceready() function and include the fastclick.js in index.html. FastClick.attach(doccument.body); e)To resolve jerk issues for long contents, and complex divs, add this css attribute in div.     -webkit-overflow-scrolling:touch;   To sum it up, AngularJS is one technology we can rely on hugely owing to its numerous advantages. However, it is the proper utility patterns that can help us to churn out maximum results out of it. Perhaps, a holistic approach towards AngularJS would help us develop applications that are competent enough with its native counterparts.

SHARE THIS BLOG ON

STAY UP-TO-DATE WITH US

Subscribe to our newsletter and know all that’s happening at Cabot.

SHARE