ng-app |
AngularJS |
|---|---|
| JavaScript | |
Syntaxe
|
<element ng-app="modulename"> ... </element> |
Paramètres
| Nom | Description |
|---|---|
| element | Ce paramètre permet d'indiquer une balise. |
| modulename | Ce paramètre permet d'indiquer un nom de module à charger avec l'application. |
Description
Cette directive permet d'indiquer l'élément racine d'une application.
Remarques
- Point d'entrée de l'application AngularJS : La directive ng-app définit le point d'entrée d'une application AngularJS. Elle permet de lier une portion du DOM à un module AngularJS spécifique. Sans cette directive, AngularJS ne sait pas quelle partie de la page doit être contrôlée.
- Placement dans le DOM : Elle est généralement placée au niveau de l'élément <html> ou <body> pour couvrir toute la page. Cependant, elle peut aussi être utilisée sur un élément spécifique pour limiter l'application AngularJS à une section précise.
- Association avec un module : En attribuant un nom de module à la directive, comme ng-app="myApp", AngularJS instancie ce module comme le principal pour cette application. Si aucun module n'est spécifié, un module par défaut est créé automatiquement.
- Une seule instance par page : Une page HTML ne peut contenir qu'une seule directive ng-app. Si plusieurs sont déclarées, AngularJS ne saura pas laquelle utiliser, ce qui pourrait entraîner des comportements inattendus.
- Initialisation automatique : Lorsqu'AngularJS détecte la directive ng-app, il initialise automatiquement l'application, charge le module associé et compile les directives contenues dans l'élément DOM.
- Problèmes avec des scripts tiers : Si vous utilisez des bibliothèques ou scripts tiers modifiant le DOM avant qu'AngularJS ne soit initialisé, cela peut interférer avec ng-app. Dans ces cas, il est recommandé d'utiliser angular.bootstrap() pour initialiser manuellement l'application.
- Impact sur les performances : Lorsqu'elle est placée trop haut dans le DOM (comme sur <html>), AngularJS analyse tout le contenu, même celui non lié à l'application. Pour améliorer les performances, vous pouvez limiter son étendue au strict nécessaire.
- Alternative pour des applications multiples : Bien que ng-app soit conçu pour une seule application par page, il est possible de gérer plusieurs applications AngularJS sur la même page en initialisant manuellement chaque application avec angular.bootstrap() au lieu d'utiliser cette directive.
Dernière mise à jour : Dimanche, le 9 décembre 2018