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

1. v
Florian Fesseler
RIA Architect
ffesseler@kapit.fr
@ffesseler
How AngularJS modules are loaded
23/06/2014

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
• 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
Example
http://t.co/dkcYIH3nHu

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
• 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
• 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
• 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. v
Florian Fesseler
RIA Architect
ffesseler@kapit.fr
@ffesseler
Merci !
23/06/2014
http://www.kapit.fr