[AngularJS] 5 simple ways-speed up your AngularJS application

Nowdays, single page apps is becoming increasingly popular among the fornt-end developers. It is the time to say goodbye with refreshing the whole page due to clicking on a single link. It helps-to-speed up-out web application and improve we use experience. Today we ' d talk about how to speed up your AngularJS application. This article was based on AngularJS 1.3.x version.

1. Disabling the Debug info

When you use directive, Angular adds some additional debug information to the DOM.

Javascript:

App.controller (' AppController ',  function  () {  This];   = "Hello world!" ;});

Html:

< P > {{Appctrl.message}} </ P >

Once compiled, we get something like this:

<class= "ng-binding">Hello world! </ P >

This debug info was super useful when debuggin because the tools like Protractor and Batarang which can rely on the Formation. However, great things always come and cost. When we project comes to production, those information was useless to users. and additional properties and classes that's added to the DOM also come with a performance cost depending on how much is stored on the scope and DOM operations is expensive anyway.

AngularJS 1.3 enables us to switch those debug information, what are need to do to disable the Debug info:

App. Config (function($compileProvider) {    $compileProvider. debuginfoenabled (false );});

To enable it again, you can do in console:

Angular.reloadwithdebuginfo ();

2. Use $applyAsync

Configure $http service to combine processing of multiple HTTP responses received at around the same time via $rootScope. $ Applyasync. This can result in significant performance improvement for bigger applications The make many HTTP requests concurrently ( Common during Application bootstrap) [1].

Sinlge $http request triggers $digest () which can help to update application model and DOM. If you had many $http requests triggered almost at the same time and each request would run $digest () which cost a lot.

The idea to use $applyAsync are to compile multiple $http requets into one $digest. We show how to use the here:

App. Config (function($httpProvider) {    $httpProvider. Useapplyasync (true);});

3. Using One time binding

AngularJS comes up with the which is cool because you don't need to set up any event listen, it helps u Pdate the Model automaticlly.  But, as we said, the great thing comes with the cost. In order to make databinding possible, Angular uses $watch APIs to observe model mutations on the scope. Imaging If there is too many watcher, your application become heavy and slow. This is why we need one-time binding. One-time expressions would stop recalculating once they is stable, which happens after the first digest.

You can see the demo here:http://jsbin.com/dijeno/9/edit?html,css,js,output

The the-the-use one-time binding is quite simple, from our first simple of appcontroller, we know that everytime appctrl.me Ssage changes, {{appctrl.message}} would also change. If we apply the one-time expression to our example above, we change this:

< P > {{:: Appctrl.message}} </ P >

4. Using Lazy Loading

Lazy loading is very useful if you had a large application which needs to load hundred files. And among those hundred files, there is only 10% files whcih be needed to bootstrap your applcation and the other 90% are Only useful in the running time. So, on order to speed up, you don't want those 90% files loaded when the boostrap time. That's the where lazy loading comes in to handy.

There is many ways to does lazy loading, for example Requirejs, the one which I often use is called oclazyload. It is a quite easy-to-use with AngularJS.

What are need to does first is install Oclazyload:

Bower Install Oclazyload

Then inject into the application dependency:

var app = Angular.module ("Demo", ["Oc.lazyload"])

Javascript:when Click on the Appctrl, we want to load everything related to the store module.

    function ($ocLazyLoad) {        varthis;         function () {            $ocLazyLoad. Load ({                "store",                files: [                    "App/store/store.js",                     "app/store/store.tpl.html",                    "App/css/store.css"                ]}            )        }    ) 

5. Resolve Data beforehand

Let's see the parts of code first, then the talk on why resolve is good.

Controller:

function Mainctrl (someservice) {    varthis;     // unresolved     mainctrl.something;     // Resolved asynchronously    Someservice.dosomething (). Then (function(response) {        = response;    });} Angular.module (' app ', [])    . Controller (' Mainctrl ', Mainctrl);

Route Resolve:

//config with resolve pointing to relevant controllerfunctionConfig ($routeProvider) {$routeProvider. When (‘/‘, {templateurl:' Views/main.html ', Controller:' Mainctrl ', Controlleras:' Main ', Resolve:MainCtrl.resolve});}//controller as usualfunctionMainctrl (someservice) {//resolved!   This. something =someservice.something;}//Create the Resolved propertyMainctrl.resolve ={dosomething:function(someservice) {returnsomeservice.dosomething (); }};angular. Module (' App '). Controller (' Mainctrl ', Mainctrl). config (config);

For controller activate:

• Views Load right away
• The Service code executes after the controller code
• Animation can shown during the view transition

For route Resolve

• The code executes before the route via a promise
• Resolve makes the new view wait for the route to Resolve
• Animation can shown before the resolve and through the view transition

　　

Resolve happens before your controller would instantiate, and your template would load and everything would set up. It gives users a felling that they can wait less time to get the interface updated and because all the data is already resol VED (parpared) for interface.

[AngularJS] 5 simple ways-speed up your AngularJS application