Qu'est-ce que Controller dans AngularJs?
Un Controller dans AngularJs prend les données de la vue, traite les données, puis envoie ces données à la vue qui est affichée à l'utilisateur final. Le contrôleur aura votre logique métier principale.
Le contrôleur utilisera le modèle de données, effectuera le traitement requis, puis transmettra la sortie à la vue qui à son tour est affichée à l'utilisateur final.
Dans ce didacticiel, vous apprendrez-
- Ce que fait le contrôleur du point de vue d'Angular
- Comment construire un contrôleur de base
- Comment définir des méthodes dans le contrôleur
- Utilisation de ng-controller dans des fichiers externes
- La responsabilité principale du contrôleur est de contrôler les données qui sont transmises à la vue. La portée et la vue ont une communication bidirectionnelle.
- Les propriétés de la vue peuvent appeler des "fonctions" sur la portée. De plus, les événements sur la vue peuvent appeler des "méthodes" sur la portée. L'extrait de code ci-dessous donne un exemple simple de fonction.
- La fonction ($ scope) qui est définie lors de la définition du contrôleur et une fonction interne qui est utilisée pour renvoyer la concaténation des $ scope.firstName et $ scope.lastName.
- Dans AngularJS, lorsque vous définissez une fonction en tant que variable, elle est connue sous le nom de méthode.
- Les données de cette manière passent du contrôleur à la portée, puis les données passent dans les deux sens de la portée à la vue.
- L'étendue est utilisée pour exposer le modèle à la vue. Le modèle peut être modifié via des méthodes définies dans la portée qui pourraient être déclenchées via des événements de la vue. Nous pouvons définir une liaison de modèle bidirectionnelle de la portée au modèle.
- Les contrôleurs ne devraient idéalement pas être utilisés pour manipuler le DOM. Cela devrait être fait par les directives que nous verrons plus tard.
- La meilleure pratique consiste à avoir un contrôleur basé sur la fonctionnalité. Par exemple, si vous avez un formulaire de saisie et que vous avez besoin d'un contrôleur pour cela, créez un contrôleur appelé «contrôleur de formulaire».
- Nous ajoutons des références aux feuilles de style CSS bootstrap, qui seront utilisées en conjonction avec les bibliothèques bootstrap.
- Nous ajoutons des références aux bibliothèques angularjs. Alors maintenant, tout ce que nous faisons avec angular.js sera référencé à partir de cette bibliothèque.
- Nous ajoutons des références à la bibliothèque bootstrap pour rendre notre page Web plus réactive pour certains contrôles.
- Nous avons ajouté des références aux bibliothèques jquery qui seront utilisées pour la manipulation du DOM. Ceci est requis par Angular car certaines des fonctionnalités d'Angular dépendent de cette bibliothèque.
- Tout d'abord, nous séparons nos fichiers dans 2 dossiers comme c'est le cas avec n'importe quelle application Web conventionnelle. Nous avons le dossier "CSS". Il contiendra tous nos fichiers de feuilles de style en cascade, puis nous aurons notre dossier "lib" qui contiendra tous nos fichiers JavaScript.
- Le fichier bootstrap.css est placé dans le dossier CSS et il est utilisé pour ajouter une bonne apparence à notre site Web.
- Le fichier angular.js est notre fichier principal qui a été téléchargé à partir du site angularJS et conservé dans notre dossier lib.
- Le fichier app.js contiendra notre code pour les contrôleurs.
- Le fichier bootstrap.js est utilisé pour compléter le fichier bootstrap.cs pour ajouter des fonctionnalités d'amorçage à notre application Web.
- Le fichier jquery sera utilisé pour ajouter des fonctionnalités de manipulation DOM à notre site.
Ce que fait le contrôleur du point de vue d'Angular
Voici une définition simple du fonctionnement de Angular JS Controller.
Comment construire un contrôleur de base
Avant de commencer la création d'un contrôleur, nous devons d'abord mettre en place notre configuration de page HTML de base.
L'extrait de code ci-dessous est une simple page HTML qui a un titre de «Enregistrement d'événement» et a des références à des bibliothèques importantes telles que Bootstrap, jquery et Angular.
Par défaut, l'extrait de code ci-dessus sera présent dans tous nos exemples, afin que nous puissions afficher uniquement le code angularJS spécifique dans les sections suivantes.
Deuxièmement, regardons nos fichiers et la structure de fichiers avec lesquels nous allons commencer pour la durée de notre cours.
Voyons un exemple sur la façon d'utiliser angular.js,
Ce que nous voulons faire ici est simplement d'afficher les mots «AngularJS» à la fois au format texte et dans une zone de texte lorsque la page est affichée dans le navigateur.
Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Explication du code:
- Le mot - clé ng-app est utilisé pour indiquer que cette application doit être considérée comme une application angulaire. Tout ce qui commence par le préfixe «ng» est appelé une directive. "DemoApp" est le nom donné à notre application Angular.JS.
- Nous avons créé une balise div et dans cette balise, nous avons ajouté une directive ng-controller avec le nom de notre contrôleur "DemoController". Cela rend essentiellement notre balise div la possibilité d'accéder au contenu du contrôleur de démonstration. Vous devez mentionner le nom du contrôleur sous la directive pour vous assurer que vous êtes en mesure d'accéder à la fonctionnalité définie dans le contrôleur.
- Nous créons une liaison de modèle à l'aide de la directive ng-model. Cela lie la zone de texte pour que le nom du didacticiel soit lié à la variable membre "tutorialName".
- Nous créons une variable membre appelée "tutorialName" qui sera utilisée pour afficher les informations que l'utilisateur tape dans la zone de texte pour le nom du didacticiel.
- Nous créons un module qui s'attachera à notre application DemoApp. Ce module fait donc désormais partie de notre application.
- Dans le module, nous définissons une fonction qui attribue une valeur par défaut de "AngularJS" à notre variable tutorialName.
Si la commande est exécutée avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.
Production:
Puisque nous avons attribué à la variable tutorialName la valeur "Angular JS", cela s'affiche dans la zone de texte et dans la ligne de texte brut.
Comment définir des méthodes dans le contrôleur
Normalement, on voudrait définir plusieurs méthodes dans le contrôleur pour séparer la logique métier.
Par exemple, supposons que si vous vouliez que votre contrôleur fasse 2 choses de base,
- Effectuer l'addition de 2 nombres
- Effectuer la soustraction de 2 nombres
Vous créeriez alors idéalement 2 méthodes à l'intérieur de votre contrôleur, l'une pour effectuer l'addition et l'autre pour effectuer la soustraction.
Voyons un exemple simple de la façon dont vous pouvez définir des méthodes personnalisées dans un contrôleur Angular.JS. Le contrôleur renverra simplement une chaîne.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Explication du code:
- Ici, nous définissons simplement une fonction qui renvoie une chaîne de "AngularJS". La fonction est attachée à l'objet scope via une variable membre appelée tutorialName.
- Si la commande est exécutée avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.
Production:
Utilisation de ng-controller dans des fichiers externes
Regardons un exemple de "HelloWorld" où toutes les fonctionnalités ont été placées dans un seul fichier. Il est maintenant temps de placer le code du contrôleur dans des fichiers séparés.
Suivons les étapes ci-dessous pour ce faire.
Étape 1) Dans le fichier app.js, ajoutez le code suivant pour votre contrôleur
angular.module('app',[]).controller('HelloWorldCtrl',function($scope){$scope.message = "Hello World"});
Le code ci-dessus fait les choses suivantes,
- Définissez un module appelé «application» qui contiendra le contrôleur avec la fonctionnalité du contrôleur.
- Créez un contrôleur avec le nom "HelloWorldCtrl". Ce contrôleur sera utilisé pour avoir une fonctionnalité pour afficher un message "Hello World".
- L'objet scope est utilisé pour transmettre des informations du contrôleur à la vue. Donc dans notre cas, l'objet scope sera utilisé pour contenir une variable appelée "message".
- Nous définissons la variable message et lui attribuons la valeur "Hello World".
Étape 2) Maintenant, dans votre fichier Sample.html, ajoutez une classe div qui contiendra la directive ng-controller puis ajoutez une référence à la variable membre "message"
N'oubliez pas non plus d'ajouter une référence au fichier de script app.js qui contient le code source de votre contrôleur.
Event Registration Guru99 Global Event
{{message}}
Si le code ci-dessus est entré correctement, la sortie suivante sera affichée lorsque vous exécutez votre code dans le navigateur.
Production:
Résumé
- La responsabilité principale du contrôleur est de créer un objet de portée qui à son tour est transmis à la vue
- Comment créer un contrôleur simple à l'aide des directives ng-app, ng-controller et ng-model
- Comment ajouter des méthodes personnalisées à un contrôleur qui peuvent être utilisées pour séparer diverses fonctionnalités au sein d'un module angularjs.
- Des contrôleurs peuvent être définis dans des fichiers externes pour séparer cette couche de la couche View. Il s'agit normalement d'une bonne pratique lors de la création d'applications Web.