Contrôleurs AngularJS avec exemple ng-Controller

Que fait le contrôleur du point de vue d'Angular ?

Voici une définition simple du fonctionnement du 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 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.
• Les fonction ($ scope) qui est défini lors de la définition du contrôleur et d'une fonction interne utilisée pour renvoyer la concaténation de $scope.firstName et $scope.lastName.
• In AngularJS, lorsque vous définissez une fonction en tant que variable, elle est appelée méthode.

• Les données passent ainsi du contrôleur à la portée, puis passent de la portée à la vue.
• La portée est utilisée pour exposer le modèle à la vue. Le modèle peut être modifié via des méthodes définies dans le scope 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.
• Idéalement, les contrôleurs ne devraient pas être utilisés pour manipuler le DOM. Cela devrait être fait par les directives que nous verrons plus tard.
• La meilleure pratique consiste à disposer de contrôleurs basés sur les fonctionnalités. 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 ».

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

Vous trouverez ci-dessous les étapes pour créer un contrôleur dans AngularJS :

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

Avant de commencer la création d’un contrôleur, nous devons d’abord mettre en place notre configuration de base de page HTML.

L'extrait de code ci-dessous est une simple page HTML qui porte le titre « Inscription à un événement » et contient des références à des bibliothèques importantes telles que Bootstrap, jquery et angulaire.

1. Nous ajoutons des références aux feuilles de style CSS bootstrap, qui seront utilisées conjointement avec les bibliothèques bootstrap.
2. Nous ajoutons des références aux bibliothèques angulaires js. Alors maintenant, tout ce que nous ferons avec angulaire.js à l'avenir sera référencé à partir de cette bibliothèque.
3. Nous ajoutons des références à la bibliothèque bootstrap pour rendre notre page Web plus réactive pour certains contrôles.
4. 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 fonctionnalités d'Angular dépendent de cette bibliothèque.

Par défaut, l'extrait de code ci-dessus sera présent dans tous nos exemples, afin que nous puissions afficher uniquement le code angulaire JS spécifique dans les sections suivantes.

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

Deuxièmement, regardons nos fichiers et leur structure de fichiers avec lesquels nous allons commencer pour la durée de notre cours.

1. Tout d’abord, nous séparons nos fichiers en 2 dossiers, comme cela se fait 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. Javascénario fichiers.
2. Le fichier bootstrap.css est placé dans le dossier CSS et il est utilisé pour ajouter une bonne apparence à notre site Web.
3. Le fichier angulaire.js est notre fichier principal qui a été téléchargé depuis le site angulaireJS et conservé dans notre dossier lib.
4. Le fichier app.js contiendra notre code pour les contrôleurs.
5. Le fichier bootstrap.js est utilisé pour compléter le fichier bootstrap.cs pour ajouter la fonctionnalité bootstrap à notre application Web.
6. Le fichier jquery sera utilisé pour ajouter une fonctionnalité de manipulation DOM à notre site.

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

Ce que nous voulons faire ici, c'est simplement afficher les mots « AngularJS » à la fois au format texte et dans une zone de texte lorsque la page est affichée dans le navigateur. Voyons un exemple sur la façon d'utiliser angulaire.js pour ce faire :

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">

	Tutorial Name : <input type="text" ng-model="tutorialName"><br>

	This tutorial is {{tutorialName}}
</div>
<script>
	var app = angular.module('DemoApp',[]);

	app.controller('DemoController', function($scope){
	$scope.tutorialName = "Angular JS";
	});
</script>

</body>
</html>

Explication du code :

1. Les ng-app Le mot-clé 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 connu comme un directive. « DemoApp » est le nom donné à notre application Angular.JS.
2. Nous avons créé une balise div et dans cette balise nous avons ajouté une directive ng-controller ainsi que le nom de notre contrôleur « DemoController ». Cela donne 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 pouvez accéder à la fonctionnalité définie dans le contrôleur.
3. Nous créons une liaison de modèle à l'aide de la directive ng-model. Cela a pour effet de lier la zone de texte du nom du didacticiel à la variable membre « tutorialName ».
4. Nous créons une variable membre appelée « tutorialName » qui sera utilisée pour afficher les informations que l'utilisateur saisit dans la zone de texte pour le nom du didacticiel.
5. Nous créons un module qui s'attachera à notre application DemoApp. Ce module fait donc désormais partie de notre application.
6. Dans le module, nous définissons une fonction qui attribue une valeur par défaut de « AngularJS » à notre variable tutorielName.

Si la commande est exécutée avec succès, la sortie suivante s'affichera lorsque vous exécutez votre code dans le navigateur.

Sortie :

Puisque nous avons attribué à la variable tutorialName la valeur « Angular JS », celle-ci s'affiche dans la zone de texte et dans la ligne de texte brut.

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

Normalement, on souhaiterait 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,

1. Effectuer l'addition de 2 nombres
2. Effectuer la soustraction de 2 nombres

Vous créeriez alors idéalement 2 méthodes à l’intérieur de votre contrôleur, 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.

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body ng-app="DemoApp">
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

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

<script>
var app = angular.module('DemoApp', []);
app.controller('DemoController', function($scope) {
    $scope.tutorialName = "Angular JS";
	$scope.tName = function() {
        return $scope.tName;
    };
});
</script>	
</body>
</html>

Explication du code :

1. 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 tutorielName.
2. Si la commande est exécutée avec succès, la sortie suivante s'affichera lorsque vous exécutez votre code dans le navigateur.

Sortie :

Contrôleur AngularJS avec exemple de ng-Controller

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 :

1. Définissez un module appelé « app » qui contiendra le contrôleur ainsi que les fonctionnalités du contrôleur.
2. Créez un contrôleur avec le nom « HelloWorldCtrl ». Ce contrôleur sera utilisé pour avoir une fonctionnalité permettant d'afficher un message « Hello World ».
3. L'objet scope est utilisé pour transmettre des informations du contrôleur à la vue. Ainsi, dans notre cas, l'objet scope sera utilisé pour contenir une variable appelée « message ».
4. Nous définissons le message variable 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.

<!DOCTYPE html>
<html ng-app="app">
<head>
	<meta chrset="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="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<script src="app.js"></script>

</body>
</html>

Si le code ci-dessus est saisi correctement, la sortie suivante s'affichera lorsque vous exécutez votre code dans le navigateur.

Sortie :

Résumé

• La responsabilité principale du contrôleur est de créer un objet scope 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 angulairejs.
• Les 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.