How AngularJS modules are loaded


Published on

This explains how an app is bootstrapped before angular parses the DOM and look for directives.

Basically, how modules are "loaded" and how services are instanciated and when they can be injected

Published in: Software, Technology, Art & Photos
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

How AngularJS modules are loaded

  1. 1. v Florian Fesseler RIA Architect @ffesseler How AngularJS modules are loaded 23/06/2014
  2. 2. 2 • Explains how angularjs modules are loaded and how it relates with the DI system • Prerequisites • Knowing difference between factory, service, providers. • Knowing how DI is done in Angular Goal
  3. 3. 3 • Provide a way/container to organize various parts of your app • Provide an API to register various components of a module • service • factory • constant • … • A module can depend on other modules • -> Application can be pictured as a tree of modules • Tip #1 : If your app have only one module, you’re probably doing it wrong Angular module
  4. 4. 4 Example
  5. 5. 5 • In the context of AngularJS, module loading means bootstrapping • All JS scripts are already loaded when AngularJS « starts » • Bootstrap = • discover all modules • identify missing or circular dependencies • Configure providers • Run module • Module loading is done at application startup • Application startup/bootstrap consists in 2 main steps : • Create the injector (basically instanciating the DI system) • Compile the main element (usually the top level document) • Modules are loaded during the first step When modules are loaded ?
  6. 6. 6 • Angular inspects the dependency tree and goes from leafs modules to node modules. • For each module, in this order : • Execute existing provider() methods • Execute existing config() methods • Execute exiting run() methods • Reminder : provider are used to configure a service before it’s instancied ($routeProvider for the $route service) • See demo What’s happening when modules are loaded
  7. 7. 7 • Config methods allows you to configure a provider juste before they are added to the DI system. 2 consequences : • provider should be instanciated before the config method is executed so they can be passed to the config() method • In the config method, no services has been yet instanciated so they can’t be injected • When all configs methods have been executed, service can be instanciated and injected • Run methods are executed last and thus can be injected • Good place to initialize things related to the module • Run methods are executed before the document is « compiled » Why that order
  8. 8. 8 • When a service is never needed, it’s never instanciated (see myService2 in the demo) • Service is instanciated when needed the first time • Afterwards cached and the cached instance will be used for all other things that need it • When a service is instanciated, it’s available EVERYWHERE. • Can be injected in non dependant modules • AngularJS 2.0 will solve this • Only unit tests can detect that your forgot a module dependency declaration • It’s bad practice to do work in a service constructor • When you refactor your app, the service could be instanciated in a totally different time • Prefer an init method that you will call from a run method • Before your modules are bootstrapped, another module is processed : the ‘ng’ module • Only after all run methods have been executed, angular starts compiling your app Some details/tips
  9. 9. v Florian Fesseler RIA Architect @ffesseler Merci ! 23/06/2014