Syntaxe
<element ng-controller="expression"></element>
|
Paramètres
| Nom |
Description |
| element |
Ce paramètre permet d'indiquer une balise. |
| expression |
Ce paramètre permet d'indiquer le nom du contrôleur. |
Description
Cette directive permet de définir l'objet de contrôleur pour l'application.
Remarques
- Rôle et utilisation principale : La directive ng-controller sert à définir un contrôleur dans une portée spécifique de l'application AngularJS. Elle
permet de lier une vue (HTML) avec une logique métier définie dans une fonction
JavaScript ou une classe contrôleur. Cela facilite l'initialisation des données et des méthodes pour une partie spécifique
de la page.
- Portée locale : Lorsqu'un contrôleur est déclaré avec ng-controller, une nouvelle portée enfant (scope) est créée dans le contexte AngularJS.
Cette portée permet d'isoler les données et les comportements du contrôleur, ce qui est utile pour gérer des composants indépendants.
- Problèmes de maintenabilité : L'utilisation de ng-controller directement dans le code HTML peut rendre
l'application difficile à maintenir dans de grands projets. Il est généralement conseillé de privilégier des approches comme les directives personnalisées ou les composantes
avec AngularJS 1.5 et ses éléments basés sur des contrôleurs isolés.
- Bonne pratique : contrôleur "mince" : Les contrôleurs définis avec ng-controller doivent rester "minces" (thin controllers) et ne pas contenir de
logique métier complexe. Ils devraient uniquement servir à gérer l'interaction entre la vue et les services, en déléguant les calculs ou traitements aux services AngularJS.
- Portée globale et collision potentielle : Lorsque plusieurs contrôleurs sont définis sur une même page avec ng-controller, des problèmes de collision ou de
confusion de portée peuvent survenir. Une gestion rigoureuse des dépendances est essentielle pour éviter ce genre de problème.
- Risque de couplage étroit avec la vue : La directive ng-controller peut conduire à un couplage étroit entre le contrôleur et la vue. Pour minimiser ce
problème, il est recommandé d'utiliser Controller as pour rendre les contrôleurs plus modulaires et réduire la dépendance au $scope.
- Migration vers Angular (version 2+ et suivantes) : Avec l'évolution vers Angular moderne (Angular 2+), l'approche ng-controller est obsolète.
Angular utilise désormais des composantes combinant logique et vue sous forme modulaire, rendant l'architecture plus maintenable et testable.
- Initialisation des données : ng-controller est souvent utilisé pour initialiser des données dynamiques au chargement de la page. Cela peut inclure des
appels à des services pour récupérer des données via HTTP ou définir des valeurs par défaut dans le $scope. Il est cependant conseillé de limiter l'initialisation à
ce qui est strictement nécessaire.
Dernière mise à jour : Dimanche, le 9 décembre 2018
