Where is AngularJS heading with regards to lazy loading of modules ?

[RichardAlan]

I have a SPA application.  When the index.html loads I load AngularJS and all of the javascript my application users will use.  This means that even the basic users also get the javascript for admin users loaded to their PCs. What I would like to do is to load some modules at a later time after I have determined if the user is authorized as a basic, editing or admin user.

From what I understand lazy loading is something that is planned for a future release of AngularJS. 

Can anyone give me an update on the status of this. Has anyone been suggesting if the lazy loading will be based on an exisiting framework ?  Also any suggestions on how I could best do lazy loading until AngularJS comes up with a solution?

[Juri Strumpflohner]

Awesome question, just wanted to post a similar one. We have a similar need. We're aiming to build a larger application that is based upon "plugins", meaning that depending on the kind of user a set of (angular) modules are (lazily) loaded.

I'm interested as well in the best practices approach of achieving such a scenario with Angular. What I found so far is this:

• https://github.com/ifyio/angularjs-lazy-loading-with-requirejs/
  
• https://github.com/ifyio/angularjs-lazy-loading-with-requirejs-optimisation
  
• https://github.com/matys84pl/angularjs-requirejs-lazy-controllers
  

Is this the way to go till Angular has build-in support for lazy loading of modules??

Thx for any help.

[Brian Lenzo]

I am also creating a large application with a need for dynamic loading of full modules.

I would add these as possible solutions:

Full module loading after application bootstrap: https://github.com/ocombe/ocLazyLoad

Lazy loading of particular controllers, directives, etc. - http://www.bennadel.com/blog/2554-loading-angularjs-components-with-requirejs-after-application-bootstrap.htm

Hope that helps

Brian

[Daphne Maddox]

There are a ton of renditions on the theme of lazy loading that involve using requirejs and hanging on to config-time providers in order to sneak late-registration of components into a running angular app.

As to the future, a good place to start is Brad Green's blog entry: http://blog.angularjs.org/2014/03/angular-20.html

There are various documents linked from that one in various stages of development, some already outdated, however you can find the meeting notes document to keep track of the team if you really want to keep your finger on the pulse.  Of course there are also links to the code for Angular 2.0 in github as it evolves.

All that said, basically the future is ES6 modules which are due to support asynchronous loading much as requirejs does today, but with the ES6 module syntactic sugar to make it much more straightforward.  As far as I know dependency injection in 2.0 will be capable of accessing modules that are defined at runtime -- in fact, there will be no distinction between runtime and config time, so lazy loading should flow from that feature.

As to a timeline, your guess is as good as mine :) 

If I'm misstating anything here I hope someone will correct me!  It's tough to keep up with the Angular team despite their openness -- they move quickly! :)

[Marcos Lin]

I had a similar need so I created an open source package called angularAMD that make it slightly easier to do lazy loading with AngularJS.  Here is the demo website with link to github repo:

http://marcoslin.github.io/angularAMD/

Hope this helps.

[RichardAlan]

Thanks for the link. I did see your code before but what I would really like to understand is the advantages that it gives. Hopefully written in a way that I as a (not so expert) javascript guy can understand. I have also checked this link out: http://ify.io/lazy-loading-in-angularjs/  Can you explain to me what angularAMD offers that can't be done with using some code like in the link from ify. 

Thanks very much

[Marcos Lin]

Richard,

angularAMD is a wrapper around mechanism described in the ify article but uses RequireJS instead of $script.js to perform the actual loading.  Take a look at this Gist and compare it to the post and you should see that complexity of caching of providers and loading of controller is abstracted away.  A unique feature of angularAMD is to perform on-demand loading of existing module via a RequireJS plugin called ngload.  In the angularAMD sample website, the Picture tab loads ui-bootstrap package only when that tab is selected.  

As an open source package, users raises issues and bugs that make it a more stable implementation.  Take a look at the latest release note with different bugs that was raised and fixed:

https://github.com/marcoslin/angularAMD/blob/master/CHANGELOG.md#011-2014-05-28

Finally, there is also sample code in the repo that show you how you can perform unit and e2e testing for a RequireJS module coded for AngularJS.

Having said that, this is not a framework for people just staring with AngularJS as you would also need to understand how RequireJS works in order to get everything up and running correctly.

Hope this helps,

Marcos

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/kJEgckFT19Y/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.