marlou knowledge base

# AngularJS - app init

# Bootstrap d'une app web

  1. Le browser lève l'event DOMContentLoaded durant ce step. Le moment exact est aléatoire, il n'attend pas le chargement des ressources liées à la page (css et images), le html et les js associés sont chargés cependant, on passe direct au point 3, le point 2 se joue en parallèle.

  2. Le browser lève l'event load en fin de step. Toutes les dépendances (de la page d'index) ont été téléchargées (non bloquant pour le démarrage angular).

  3. Démarrage Angular

  • la méthode angularInit(element, bootstrap) est exécutée. Elle cherche la directive ng-app et son paramètre (le module racine de l'application).

  • la méthode bootstrap(element, bootstrap) est exécutée. Elle détermine si le bootstrap de l'app doit se faire maintenant ou si il est délayé. Si il n'est pas délayé elle crée l'injecteur via createInjector(modulesToLoad, strictDi)

  • création de l'injecteur via createInjector(modulesToLoad, strictDi) Tous les modules angular et leurs sous modules (modules optionnels comme ngLocale) sont chargés. Un cache des composants est créé (les services sont des singletons, s'ils ne sont pas instanciés ils le sont et sont ajoutés au cache, à chaque nouvel appel le cache est vérifié et si angular trouve quelque chose il sert l'élément présent dans le cache et ne fait pas de nouvelle instanciation). Viennent ensuite toutes les dépendances déclarées sur le module principal. Durant cette phase tout l'arbre des dépendance est parsé. Une liste des config() à exécuter est constituée ainsi qu'une liste de run() Les config() de tous les modules sont ensuite exécutés dans l'ordre inverse de l'arbre. Seuls les services de type provider et constant peuvent être injectés. puis run() de tous les modules dans le même ordre que pour config() Les provider sont interdits à ce stade (pas de config de provider au runtime.

  • L'injecteur a été créé. Tous les modules ont joué leur config() puis leur run() en terminant par celui du module principal de l'app. L'injecteur crée le $rootScope puis compile l'app sur la base de ng-app qui sert de racine. Si une directive ng-controller est rencontrée, l'injecteur est appelé pour instancier le controller associé.

  • La webapp est rendue, elle attend une interaction de l'utilisateur.

# Exemple ordre d'exécution des modules au bootstrap

Ex, on a la hiérarchie suivante :

app
app.moduleA
app.moduleA.subModuleA1
app.moduleB
1
2
3
4

l'ordre d'exécution sera :

app.moduleB
app.moduleA.subModuleA1
app.moduleA
app
1
2
3
4

ou

app.moduleA.subModuleA1
app.moduleA
app.moduleB
app
1
2
3
4

mais jamais

app.moduleA
app.moduleA.subModuleA1
app.moduleB
app
1
2
3
4

# Documentation à check

# knowing when the a view has finished loading

not possible because of MVVM pattern

# others topics

← AngularJS - knowledge overview →