I’ve been playing with the seed app for AngularJS and I noticed that most dependencies (controllers, directive, filters, services) for the app are loaded up front. I was wondering how to modularize an Angular app into smaller bytes, where dependencies aren’t loaded unless required.
For example, if I had a large application that had a cart, add/edit shipping address, search results, product details, product lists, etc… A user on a shopping site may never encounter any of these views, but it looks like (from the seed app) that the code for these all views are loaded in at startup.
How is modularity mitigated in AngularJS?
I’ve been playing lately with require modules and angular and I’ve implemented lazy loading of partials and controllers.
It can be easily done without any modifications to Angular sources (version 1.0.2).
Repository: https://github.com/matys84pl/angularjs-requirejs-lazy-controllers .
There is also an implementation that uses yepnope (https://github.com/cmelion/angular-yepnope) made by Charles Fulnecky.