Lazy-loading modules

[Nate Abele]

Hi all,

I've seen a lot of talk in various corners of the community about using Require.js with Angular, and more generally, being able to lazy-load modules. I see this being primarily relevant to two use-cases:

- 'Traditional' multi-page web apps, where different pages require different modules.

- Large-scale single-page apps built on ui-router, where different modules control different parts of the site, and loading all modules at once is not desirable

What I've come up with here is a (very) hacky first draft at enabling module lazy-loading: https://gist.github.com/nateabele/5610305

As you can see, this doesn't really even cover my second use case, but hopefully it's enough to get a conversation started with any interested parties.

Side note: is it just me, or are some of Angular's internals obtuse to the point of being impenetrable? I wish they could be as simple and beautiful (and extensible!) as the public API.

[Tony Polinelli]

Looks interesting - could you make a plunkr?

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, 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?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
Tony Polinelli
http://touchmypixel.com

[Nate Abele]

http://plnkr.co/edit/Gv4YOk5p3wtXqdz5vdnr?p=preview

[Stu Salsbury]

I just tried to start a similar topic, so I'll abandon that one and join this one :)

I'm with you in spirit.  In addition to what you've layed out, it would be great to figure out something like a component architecture whereby the lazily loaded (and lazily referenced) modules could supply their own templates which would be embedded within the larger application without that application needing to know anything about them specifically.  The major issues that come to mind are eventing and layout... both of which might be hackable with jquery, but what I picture is pretty ugly.

[Stu Salsbury]

https://github.com/afterglowtech/angular-couchPotato is a simple provider/service to lazy load components. It's taken from some other sample code on the web, but adapted to work as a provider/service and to support dependencies of dependencies.  It relies on requirejs (or some other AMD loader).

I haven't gotten it to work with ui-router, yet.  It implements promise resolution differently.  I'm developing a derivation of ui-router to support lazy routing, and I'll be sure to support lazy components in that.  So far, I've made the router editable at runtime, but have not yet implemented the lazy loading of routes.  Lazy routing, unlike the other components, really requires some server-side involvement to be useful, so it's a bit more complicated.  I'll write back when I have something online.  The goal is to make it possible to, as you state, develop big sites, and one of the benefits of lazy routing is that the main application won't need to know about every route under its hierarchy.

[Samuel Roldan]

And the unit tests? 

[Stu Salsbury]

Unit test? What's a unit test?

No seriously, I haven't written any unit tests for it yet. Wasn't trying to distract from Nate's discussion... just pointing out a work in progress that seemed relevant to the topic.