How is modularity softened in AngularJS?

Question

I play with the seed application for AngularJS, and I noticed that most of the dependencies (controllers, directives, filters, services) for the application are loaded from the front. I was wondering how to modulate an Angular application into smaller bytes, where dependencies do not load if it is not required.

For example, if I had a large application with a cart, add / change the delivery address, search results, product information, product lists, etc. The user on the shopping site will never encounter any of these types, but it seems that (from the seed application) that the code for all these views is loaded at startup.

How is modularity softened in AngularJS?

Answer 1

Recently, I have been playing with the required modules and angular, and I have implemented lazy loading of scores and controllers.

This can be easily done without any changes 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 Fulnecki.

Answer 2

This modularity question is often asked here in the SO and google group. I am not part of the core team, but my understanding is as follows:

• You can easily load partial parts (snippets of HTML / templates) upon request by including them (ngInclude) or by referencing them in directives / routes. So at least you don’t need to load all the partial parts up (although you can do this, see another question here: Is there a way to do partial loads of AngularJS at the beginning, and not if necessary? )

• When it comes to JavaScript (controller, directives, filters, etc. - basically everything that is defined in AngularJs modules), I believe that at present there is no support for loading modules on demand in AngularJS. This problem is closed by the main command testifies to this: https://github.com/angular/angular.js/issues/1382

The lack of load on demand of AngularJS modules may seem like a big limitation, but:

• when it comes to productivity, you cannot be sure until everything is measured; therefore, I would suggest just measuring if this is a real problem for you.
• usually the code written with AngularJS is really small, I mean, really small. This small base code base and gzipped can lead to a valid small artifact to load

Now, since this question comes back so often, I'm sure the AngularJS team knows about it. In fact, I recently saw some experimental commits ( https://github.com/mhevery/angular.js/commit/1d674d5bfc47d18dc4a14ee0feffe4d1f77ea23b#L0R396 ), suggesting that the support could be executed (or at least there are some experiments with it )

Answer 3

All we need to do is put this code in our application configuration, like this:

application.config [ "$provide", "$compileProvider", "$controllerProvider", "$routeProvider" , ($provide, $compileProvider, $controllerProvider, $routeProvider) -> application.controller = $controllerProvider.register application.provider = $provide.provider application.service = $provide.service application.factory = $provide.factory application.constant = $provide.constant application.value = $provide.value application.directive = -> $compileProvider.directive.apply application, arguments _when = $routeProvider.when $routeProvider.when = (path, route) -> loaded = off route.resolve = new Object unless route.resolve route.resolve[route.controller] = [ "$q", ($q) -> return loaded if loaded defer = $q.defer() require [ route.controllerUrl ], (requiredController) -> defer.resolve() loaded = on defer.promise ] _when.call $routeProvider, path, route 

To use, add the required components to the modules we need (supplier, constant, directive, etc.). For example:

 define [ "application" "services/someService" ], ( application ) -> application.controller "chartController", [ "$scope", "chart", "someService" , ($scope, chart, someService) -> $scope.title = chart.data.title $scope.message = chart.data.message ] 

file someService.coffee:

 define [ "application" ], ( application ) -> application.service "someService", -> @name = "Vlad" 

And add to controllerUrl our path to the controller for routing:

  application.config [ "$routeProvider" , ($routeProvider) -> $routeProvider .when "/table", templateUrl: "views/table.html" controller: "tableController" controllerUrl: "controllers/tableController" resolve: table: ($http) -> $http type: "GET" url: "app/data/table.json" ] 

tableController.coffee file:

 define [ "application" "services/someService" ], ( application ) -> application.controller "tableController", [ "$scope", "table" , ($scope, table) -> $scope.title = table.data.title $scope.users = table.data.users ] 

And all components have a “lazy” load where we need it.