Français

Tutoriel AngularJS

Applications AngularJS

AngularJS - Contrôleurs : Un Guide Pour Les Débutants

Bonjour, aspirants développeurs web ! Aujourd'hui, nous allons plonger dans le monde passionnant des contrôleurs AngularJS. Ne vous inquiétez pas si vous êtes nouveau dans la programmation - je serai votre guide amical à travers ce voyage, en expliquant tout étape par étape. Alors, prenez une tasse de café, et c'est parti !

AngularJS - Controllers

Qu'est-ce Que les Contrôleurs AngularJS ?

Avant de sauter dans le code, comprenons ce que sont les contrôleurs dans AngularJS. Pensez aux contrôleurs comme au cerveau de votre application. Ils sont responsables de la gestion des données et du comportement de votre page web. Juste comme un régulateur de circulation gère le flux de véhicules, les contrôleurs AngularJS gèrent le flux de données dans votre application.

Le Rôle des Contrôleurs

Les contrôleurs dans AngularJS servent plusieurs objectifs importants :

  1. Ils initialisent les données de l'objet $scope.
  2. Ils ajoutent du comportement à l'objet $scope.
  3. Ils agissent comme un pont entre la vue (ce que l'utilisateur voit) et le modèle (les données).

Maintenant, voyons comment nous pouvons créer et utiliser des contrôleurs dans AngularJS.

Votre Premier Contrôleur AngularJS

Commençons par un exemple simple pour nous mettre en jambe.

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Mon Premier Contrôleur AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyFirstController">
<h2>{{ salutation }}</h2>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('MyFirstController', function($scope) {
$scope.salutation = "Bonjour, AngularJS!";
});
</script>
</body>
</html>

Décomposons cela :

  1. Nous définissons une application AngularJS en utilisant ng-app="myApp".
  2. Nous créons un contrôleur nommé MyFirstController en utilisant ng-controller.
  3. Dans notre JavaScript, nous définissons le contrôleur et mettons une propriété salutation sur le $scope.
  4. Dans notre HTML, nous utilisons {{ salutation }} pour afficher la valeur de salutation.

Lorsque vous exécutez ce code, vous verrez "Bonjour, AngularJS!" affiché sur la page. Excitant, n'est-ce pas ?

Ajouter du Comportement aux Contrôleurs

Les contrôleurs ne sont pas seulement pour afficher des données ; ils peuvent également ajouter du comportement à votre application. Commençons par un exemple plus interactif :

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Contrôleur AngularJS Interactif</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="CounterController">
<h2>Compte : {{ count }}</h2>
<button ng-click="increment()">Incrémenter</button>
<button ng-click="decrement()">Décrémenter</button>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('CounterController', function($scope) {
$scope.count = 0;

$scope.increment = function() {
$scope.count++;
};

$scope.decrement = function() {
$scope.count--;
};
});
</script>
</body>
</html>

Dans cet exemple :

  1. Nous créons un CounterController qui initialise une variable count à 0.
  2. Nous définissons deux fonctions : increment() et decrement().
  3. Nous utilisons ng-click pour lier ces fonctions aux clics sur les boutons.

Maintenant, lorsque vous cliquez sur le bouton "Incrémenter", le compteur monte, et lorsque vous cliquez sur "Décrémenter", il descend. C'est comme avoir un petit calculateur directement dans votre page web !

Travailler avec des Formulaires

Les contrôleurs sont particulièrement utiles lors de la gestion des formulaires. Créons un simple formulaire qui salue l'utilisateur :

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Contrôleur de Formulaire AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="GreetingController">
<form ng-submit="salue()">
<input type="text" ng-model="name" placeholder="Entrez votre nom">
<button type="submit">Salue-moi !</button>
</form>
<h2>{{ salutation }}</h2>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('GreetingController', function($scope) {
$scope.name = '';
$scope.salutation = '';

$scope.salue = function() {
if ($scope.name) {
$scope.salutation = 'Bonjour, ' + $scope.name + '!';
} else {
$scope.salutation = 'Veuillez entrer un nom.';
}
};
});
</script>
</body>
</html>

Voici ce qui se passe :

  1. Nous utilisons ng-model="name" pour lier le champ d'entrée à la propriété name dans notre contrôleur.
  2. La fonction salue() est appelée lorsque le formulaire est soumis.
  3. Si un nom est entré, nous créons un salut personnalisé. Sinon, nous demandons un nom.

Cet exemple montre comment les contrôleurs peuvent gérer les entrées utilisateur et mettre à jour la vue en conséquence.

Méthodes des Contrôleurs

Résumons les principales méthodes que nous avons utilisées dans nos contrôleurs :

Méthode Description
$scope.variableName Utilisé pour définir des variables accessibles dans la vue
$scope.functionName = function() {...} Utilisé pour définir des fonctions que l'on peut appeler depuis la vue
ng-click="functionName()" Utilisé dans HTML pour appeler une fonction lors d'un clic sur un élément
ng-model="variableName" Utilisé pour lier un champ d'entrée à une variable dans le contrôleur
ng-submit="functionName()" Utilisé pour appeler une fonction lorsque le formulaire est soumis

Conclusion

Félicitations ! Vous avez刚刚 fait vos premiers pas dans le monde des contrôleurs AngularJS. Nous avons couvert les bases de la création de contrôleurs, de l'ajout de comportement et de la gestion des formulaires. Souvenez-vous, la pratique rend parfait, donc n'ayez pas peur d'expérimenter avec ces concepts.

Dans mes années d'enseignement, j'ai découvert que le meilleur moyen d'apprendre est de faire. Alors, voici un défi amusant pour vous : essayez de créer une application simple de liste de tâches en utilisant ce que vous avez appris sur les contrôleurs. Commencez par ajouter des éléments, puis essayez de mettre en œuvre des fonctionnalités comme marquer des éléments comme terminés ou les supprimer.

While you continue your AngularJS journey, you'll discover that controllers are just the tip of the iceberg. There's so much more to explore, from services to directives and beyond. But for now, pat yourself on the back – you're well on your way to becoming an AngularJS expert!

Happy coding, and remember: in the world of programming, every error is just an opportunity to learn something new!

Credits: Image by storyset

Tutoriel précédent:
AngularJS - Expressions
Tutoriel suivant:
AngularJS - Filtres