Angular Core Dependency: 1.3.x
Added by: Sam Deering
$injectorAMD module is gone
$injectoris now exposed as AMD module; it is no longer a promise.
module.config()for lazy Angular modules. THIS IS UNTESTED AND EXPERIMENTAL FOR THE TIME BEING.
This is an example application for keeping track of personal/family expenses. This is still work in progress and open for discussion. Its main purpose is to demonstrate the mixing of Angular and require-lazy, not to be functionally complete, at least at this stage.
nodeexecutable must be in
PATHfor the build scripts to work.
node app.jsto run the server
http://localhost:8110/app.html(this is the unbuilt-development version of the application)
(Steps 1 & 2 above are prerequisites)
(NOTE: There used to be a standalone script based build system; this was deprecated and removed in favor of Grunt.)
grunt-cliis installed and the
gruntcommand is in PATH.
gruntto compile everything
http://localhost:8110/app-built.html(this is the built version of the application)
karma start --single-run.
This application is set up to load only the scripts it needs for the current view. When the view changes, only the scripts necessary for the new view are loaded.
To observe this behaviour open Firebug to the network tab, then load the unbuilt-development version of the application.
Observe the scripts being loaded:
ng-grid-XXX.js is not needed and not loaded.
Navigate to the "Expenses" view (top menu).
ng-grid-XXX.js and the application scripts required for this view are loaded just in time.
The scripts needed for each view are packed together into "bundle" files, when the application is built. So for the expenses view
ng-grid-2.0.7-debug.js are bundled into one script file (i.e.
expenses-built.js) and the file is loaded with a cache-breaking
hash (something like a
?v=e1974633ea3017db85324f449bc6479f request parameter). This process is using r.js
The noteworthy points are:
ngGrid(see the "Expenses" view).
currentModuleAMD module (see
app/modules/that contains a
main.jsscript and a
main.metadata.jsoncan automatically appear in the menu (see
build-scripts/discoverModules.js). This is used both by the build process and by the server. The discovery mechanism can be implemented by any server-side technology: you need to auto-generate the
r.jsstandard configuration and require-lazy; no further configuration is needed.
$compileProvider) are captured from a
configfunction called from
bootstrap.js. This function is defined in
module()method with a proxy that can handle lazy loaded modules (see
"templateCache!path/to/my.html") and registered with Angular's
$templateCachewith the correct name (here
currentModule. This is a proxy to the currently loading Angular module, providing the familiar API (some methods are still under development).
WebContent/scripts/app/modules/to see the implementation of a view; this is the actual code a developer would write, i.e. application code, not framework code.
grunt test to run the test suite.
grunt coverage to make the test coverage report. The output will be in
and the HTML version under
To have Sonar analyze the project, execute the coverage report first and then, run
sure it is in the
I believe both RequireJS and AngularJS are very useful libraries/frameworks. I am surprized that Angular does not cooperate smoothly with RequireJS out of the box, so I have been experimenting with this implementation.
I believe this can be further improved and I hope it will contribute to a solution bridging the worlds of AMD and Angular modules.
The providers capturing technique (implemented in
is based heavily on angularjs-requirejs-lazy-controllers.
Module stats last updated: 2017-03-24 16:00:02