Contrôleurs AngularJS avec exemple ng-Controller

⚡ Résumé intelligent

Dans AngularJS, un contrôleur contient la logique métier d'un écran. Il reçoit des données via l'objet scope, les traite et expose le résultat à la vue.ping Balise de présentation exempte de logique applicative.

(I.e. Responsabilité principale : Un contrôleur remplit l'objet scope et expose des méthodes à la vue ; il ne manipule pas le DOM.
🔗 Câblage: La directive ng-controller associe un contrôleur nommé à un élément, donnant à cet élément et à ses enfants l'accès à la portée du contrôleur.
(I.e. Reliure à double sens : ng-model associe un champ de formulaire à une propriété de portée, de sorte que les modifications apportées à la vue mettent à jour le contrôleur et inversement.
🧩 Méthodologie: Les fonctions associées à la portée séparent des éléments logiques distincts et peuvent être appelées directement depuis les expressions de vue.
🏷️ Syntaxe du contrôleur : Créer un alias pour un contrôleur et le lier à this Supprime l'ambiguïté lorsque les contrôleurs sont imbriqués les uns dans les autres.
(I.e. Séparation: Déplacer les contrôleurs dans un fichier app.js dédié permet de maintenir l'indépendance de la couche de présentation par rapport à la couche logique.

Qu’est-ce que le contrôleur dans AngularJS ?

A Contrôleur Dans AngularJS, la vue récupère les données, les traite, puis les transmet à l'utilisateur final. Le contrôleur, quant à lui, contient la logique métier principale. Il utilise le modèle de données, effectue le traitement nécessaire, puis transmet le résultat à la vue.

⚠️ Note de version : AngularJS (branche 1.x) a atteint sa fin de vie le 31 décembre 2021 et ne bénéficie plus de correctifs de sécurité. Les concepts ci-dessous restent valables pour les applications existantes ; dans Angular moderne, ce rôle est désormais assuré par une classe de composant et non plus par un contrôleur.

Savoir ce qu'est un contrôleur soulève une question : comment communique-t-il concrètement avec la vue ? La section suivante y répond.

Le rôle du contrôleur du point de vue d'Angular

Voici une définition simple du fonctionnement d'un contrôleur AngularJS :

La responsabilité principale du contrôleur est de contrôler les données transmises à la vue. La portée et la vue ont une communication bidirectionnelle.
Les propriétés et les événements de la vue peuvent appeler des fonctions sur la portée. L'extrait de code ci-dessous illustre ce point. fonction ($ scope) déclaré avec le contrôleur plus une fonction interne renvoyant $scope.firstName et $scope.lastName rejoint. Dans AngularJSUne fonction définie comme variable est une méthode.

Les données transitent du contrôleur au scope, puis font des allers-retours entre le scope et la vue.
Le scope expose le modèle à la vue. Le modèle peut être modifié via des méthodes définies dans le scope, qui sont déclenchées par des événements provenant de la vue.
Les contrôleurs ne doivent pas être utilisés pour manipuler le DOM. C'est le rôle de… directives.
Il est recommandé de baser les contrôleurs sur leur fonctionnalité. Si vous avez un formulaire de saisie nécessitant un contrôleur, créez-en un nommé « contrôleur de formulaire ».

Une fois le mécanisme compris, la section suivante construit un contrôleur à partir d'une page vide.

Comment créer un contrôleur de base dans AngularJS

Voici les étapes à suivre pour créer un contrôleur dans AngularJS.

Étape 1) Créez une page HTML de base

Avant de créer un contrôleur, la page HTML de base doit être en place. L'extrait de code ci-dessous est une page simple intitulée « Inscription à l'événement » qui fait référence à… Bootstrap et AngularJS.

Références à la Bootstrap feuille de style CSS, utilisée conjointement avec la Bootstrap bibliothèque.
Référence à la bibliothèque AngularJS. Tout ce qui sera fait avec AngularJS à partir de maintenant dépendra de ce fichier.
Une référence à la Bootstrap bibliothèque, qui rend certaines commandes réactives.

⚠️ Correction: Le code source initial chargeait jQuery et indiquait qu'AngularJS en dépendait. Or, ce n'est pas le cas. AngularJS est fourni avec jqLite, un sous-ensemble intégré de l'API jQuery, et ne passe à la version complète de jQuery que si jQuery est chargé. avant La référence a été supprimée.

Étape 2) Vérifiez les fichiers et la structure des fichiers

Les fichiers sont répartis dans deux dossiers, comme dans toute application web classique : « css » pour les feuilles de style et « lib » pour les autres. Javascénario fichiers.
Le fichier bootstrap.css se trouve dans le dossier css et donne au site son apparence et son fonctionnement.
angular.js est la bibliothèque principale, téléchargée depuis le site d'AngularJS et conservée dans le répertoire lib.
Le fichier app.js contiendra le code des contrôleurs.

Étape 3) Utilisez le code AngularJS pour afficher la sortie

L'objectif est ici d'afficher les mots « AngularJS » à la fois en texte brut et dans une zone de texte lorsque la page est ouverte dans le navigateur.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
This tutorial is {{tutorialName}}
</div>

<script src="lib/angular.js"></script>
<script>
var app = angular.module('DemoApp', []);

app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialName = "AngularJS";
}]);
</script>
</body>
</html>

Code Explication:

ng-app désigne cet élément comme la racine d'une application AngularJS. Les attributs préfixés par ng- Ce sont des directives intégrées. « DemoApp » est le nom donné à l’application.
La division transporte ng-contrôleur avec le nom « DemoController », ce qui donne à cet élément et à tout ce qu'il contient l'accès à la portée du contrôleur.
ng-modèle crée la liaison de modèle, liant la zone de texte Nom du tutoriel à la propriété de portée tutorialName.
Le module DemoApp est créé, et le contrôleur attribue la valeur par défaut « AngularJS » à tutorialName.

⚠️ Corrections apportées. L'annonce originale déclarait chrset="UTF 8", qui n'est ni un attribut valide ni un nom d'encodage valide, et a chargé AngularJS deux fois : une fois depuis le CDN et une fois depuis lib/angular.jsLe chargement de la bibliothèque à deux reprises réenregistre le système de modules et produit un comportement imprévisible. L'annotation du tableau de dépendances ['$scope', function($scope){…}] a également été ajouté, sans quoi le contrôleur cesse de fonctionner dès que le fichier est minifié.

Sortie :

Parce que tutorialName La valeur « AngularJS » a été attribuée ; elle apparaît dans la zone de texte et dans la ligne de texte brut. Une seule propriété suffit pour cette démonstration ; les contrôleurs réels exposent généralement aussi un comportement, qui sera abordé dans la section suivante.

Comment définir des méthodes dans les contrôleurs AngularJS

Normalement, on définit plusieurs méthodes dans un contrôleur pour séparer la logique métier. Si le contrôleur devait additionner deux nombres et effectuer une soustractiontracPour deux nombres, vous créeriez une méthode pour chaque opération.

L'exemple ci-dessous définit une méthode personnalisée dans un contrôleur AngularJS qui renvoie une chaîne de caractères.

<!-- The head and library references are unchanged from Step 3 -->
<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
This tutorial is {{tName()}}
</div>

<script>
var app = angular.module('DemoApp', []);

app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialName = "AngularJS";

  // A method on the scope, callable from the view as tName()
  $scope.tName = function() {
    return $scope.tutorialName;
  };
}]);
</script>

Code Explication:

Une fonction est associée à l'objet de portée en tant que membre tNameElle renvoie la valeur actuelle de tutorialName.
La vue appelle la méthode avec {{tName()}}Les parenthèses sont importantes : sans elles, l’expression affiche la fonction elle-même plutôt que son résultat.

⚠️ Correction: la méthode originale lue $scope.tName = function() { return $scope.tName; };Cette fonction renvoie elle-même, et non le nom du tutoriel ; la page affichait donc le corps de la fonction au lieu du texte. Elle renvoie maintenant $scope.tutorialName.

Sortie :

Jusqu'à présent, tout était contenu dans un seul fichier. Les applications de production séparent les contrôleurs, comme le démontre la section suivante.

Contrôleur AngularJS avec exemple de ng-Controller

L'exemple « HelloWorld » ci-dessus regroupait toutes les fonctionnalités dans un seul fichier. Il est maintenant temps de déplacer le code du contrôleur dans un fichier distinct.

Étape 1) Dans le fichier app.js, ajoutez le code suivant pour votre contrôleur.

angular.module('app', [])
  .controller('HelloWorldCtrl', ['$scope', function($scope) {
    $scope.message = "Hello World";
  }]);

Le code ci-dessus effectue les opérations suivantes :

Définit un module appelé « app » qui contient le contrôleur.
Crée un contrôleur nommé « HelloWorldCtrl » qui affiche un message « Hello World ».
Utilise l'objet scope pour transmettre des informations du contrôleur à la vue, dans ce cas une variable appelée message.

Étape 2) Dans Sample.html, ajoutez une balise div contenant la directive ng-controller et une référence à la variable membre messageN'oubliez pas de faire référence à app.js, qui contient le code source du contrôleur.

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<h1> Guru99 Global Event</h1>
<div class="container">
<div ng-controller="HelloWorldCtrl">{{message}}</div>
</div>

<script src="lib/angular.js"></script>
<script src="app.js"></script>
</body>
</html>

⚠️ Correction: app.js doit être chargé après angular.js, puisqu'il appelle angular.moduleLa version originale chargeait également la bibliothèque deux fois et contenait les mêmes informations. chrset faute de frappe.

Sortie :

Chaque exemple présenté jusqu'à présent possède des propriétés de lecture et d'écriture directement sur $scopeLa section ci-dessous présente l'alternative recommandée par l'équipe AngularJS.

Comment utiliser la syntaxe controllerAs dans AngularJS

Liaison directe à $scope Cela fonctionne, mais cela devient ambigu dès que les contrôleurs sont imbriqués. Une expression de vue telle que {{name}} ne donne aucune indication sur le contrôleur propriétaire nameEt comme les portées enfants héritent prototypalement des portées parents, un contrôleur imbriqué qui écrit dans une primitive héritée crée silencieusement sa propre copie fantôme. controllerAs La syntaxe résout les deux problèmes en attribuant un alias à chaque contrôleur.

Étape 1) Créez un alias du contrôleur dans la vue en utilisant le as mot-clé, puis préfixez chaque liaison avec cet alias.

Étape 2) Dans le contrôleur, attachez des propriétés à this plutôt que de $scope.

<div ng-controller="DemoController as demo">
Tutorial Name : <input type="text" ng-model="demo.tutorialName">
This tutorial is {{demo.tutorialName}}
</div>

<script>
app.controller('DemoController', function() {
  // 'vm' is captured so nested functions keep the right reference
  var vm = this;
  vm.tutorialName = "AngularJS";

  vm.tName = function() {
    return vm.tutorialName;
  };
});
</script>

Trois gains s'ensuivent. Les liaisons deviennent auto-documentées, car demo.tutorialName désigne son propriétaire. Les contrôleurs imbriqués cessent d'entrer en collision, puisqu'un parent est aliasé. outer et un enfant alias inner peuvent tous deux exposer nameLes valeurs sont également liées via un objet plutôt que par une primitive nue, contournementping le piège où une modification apportée à un processus enfant n'atteint jamais le processus parent.

💡 Astuce: Capture this dans une variable telle que vm en haut du contrôleur. À l'intérieur d'une fonction de rappel, this fait référence à quelque chose de complètement différent, et la référence capturée maintient la liaison correcte.

Choisir un style de liaison est une chose. Déterminer ce qui doit figurer dans un contrôleur en est une autre, et le tableau comparatif ci-dessous illustre cette distinction.

Contrôleur vs Service dans AngularJS

Les débutants surchargent souvent le contrôleur avec des tâches qui relèvent d'un service. La différence réside dans la durée de vie et la réutilisation : un contrôleur n'existe que tant que sa vue est affichée à l'écran, tandis qu'un service est un singleton qui persiste pendant toute la durée de vie de l'application.

Aspect	Contrôleur	Services
À vie	Créé et détruit avec la vue	Une seule instance pour l'ensemble de l'application
Interet	Préparer les données pour une vue	Logique partagée, état et appels au serveur
Réutilisable	Non, lié à sa vue	Oui, injectable partout
Maintient l'état entre les vues	Non, l'état est perdu en navigation	Oui, l'état persiste.
Contenu typique	Propriétés de portée et méthodes de vue	Appels HTTP, mise en cache, règles métier

Limitez la taille de vos contrôleurs. Si deux contrôleurs utilisent la même logique, ou si une valeur doit être conservée lors de la navigation entre les vues, déplacez-la dans un service et injectez ce service là où il est nécessaire. Un test pratique consiste à se demander si le code reste pertinent même avec l'écran fermé. Si la réponse est oui, il a sa place dans un service.

FAQ

Oui. AngularJS crée une instance et un contexte distincts pour chaque élément contenant la directive. Ces instances ne partagent aucun état ; une modification apportée à l’une n’est donc pas répercutée sur l’autre.

Déclarez-le dans la route lorsque le contrôleur appartient à une vue entière chargée par routageUtilisez ng-controller pour un composant qui apparaît dans une page quelle que soit la route actuelle. Ne déclarez jamais les deux, sinon le contrôleur s'exécutera deux fois.

Utilisez l'annotation de tableau, en listant les noms des dépendances sous forme de chaînes de caractères avant la fonction. Les minificateurs renomment les arguments de la fonction mais jamais les chaînes littérales ; l'injecteur résout donc toujours correctement `$scope` et les services associés.

Oui. AI Les assistants génèrent les liaisons de module, de contrôleur et de portée à partir d'une simple description de l'écran. Vérifiez toujours l'annotation de dépendance, car le code généré l'omet souvent.

Les outils d'IA réécrivent les affectations de portée sous forme de propriétés sur une variable vm capturée et préfixent chaque liaison de vue correspondante avec l'alias. RevExaminez manuellement les appels $watch et les écouteurs d'événements, car ceux-ci nécessitent toujours l'objet scope.

Contrôleurs AngularJS avec exemple ng-Controller

Qu’est-ce que le contrôleur dans AngularJS ?

Le rôle du contrôleur du point de vue d'Angular

Comment créer un contrôleur de base dans AngularJS

Comment définir des méthodes dans les contrôleurs AngularJS

Contrôleur AngularJS avec exemple de ng-Controller

Comment utiliser la syntaxe controllerAs dans AngularJS

Contrôleur vs Service dans AngularJS

FAQ

Résumez cet article avec :

Enregistrez-vous pour recevoir le bulletin d'informations