Français

Tutoriel AngularJS

Applications AngularJS

AngularJS - Directives: A Guide for Beginners

Bonjour là-bas, futurs magiciens d'AngularJS ! Aujourd'hui, nous allons entreprendre un voyage passionnant à la découverte des directives AngularJS. Ne vous inquiétez pas si vous êtes nouveaux dans le domaine de la programmation - je serai votre guide amical, expliquant tout pas à pas. Alors, prenez une tasse de café (ou de thé, si c'est votre truc), et plongeon dans l'aventure !

AngularJS - Directives

Qu'est-ce que les Directives ?

Avant de commencer, comprenons ce que sont les directives. Pensez aux directives comme des instructions spéciales que nous donnons à HTML. Elles sont comme des sorts magiques qui rendent nos pages web vivantes avec un contenu et un comportement dynamiques. Génial, non ?

Maintenant, explorons quelques-unes des directives les plus couramment utilisées dans AngularJS.

Directive ng-app

La directive ng-app est comme la fondation de notre maison AngularJS. Elle dit à AngularJS : "Hey, c'est là que mon application commence !"

Exemple :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app>
<p>Bienvenue dans mon application AngularJS !</p>
</body>
</html>

Dans cet exemple, nous avons ajouté ng-app à la balise <body>. Cela indique à AngularJS que tout ce qui se trouve à l'intérieur de <body> fait partie de notre application AngularJS.

Directive ng-init

La directive ng-init est comme le chapeau du magicien - elle nous permet d'initialiser des variables directement dans notre HTML. C'est génial pour des démos simples, mais dans des applications réelles, nous initialisons généralement les données dans un contrôleur.

Exemple :

<div ng-app ng-init="firstName='John'; lastName='Doe'">
<p>Le nom est {{ firstName + " " + lastName }}</p>
</div>

Ici, nous utilisons ng-init pour définir les valeurs de firstName et lastName. Ensuite, nous affichons ces valeurs en utilisant les expressions AngularJS (ces accolades doubles).

Directive ng-model

La directive ng-model est comme une route à double sens entre votre HTML et vos données d'application. Elle peut :

  1. Lier un champ input, une selects ou une textarea à une propriété sur le scope
  2. Fournir une validation de type pour les données de l'application
  3. Définir des classes CSS pour l'élément
  4. Lier les éléments HTML à la validation du formulaire

Exemple :

<div ng-app>
<input type="text" ng-model="name">
<p>Salut, {{ name }} !</p>
</div>

Dans cet exemple, tout ce que vous tapez dans le champ input apparaîtra immédiatement après "Salut," dans le paragraphe ci-dessous. C'est comme de la magie, mais c'est juste la puissance de ng-model !

Directive ng-repeat

La directive ng-repeat est comme une photocopieuse pour les éléments HTML. Elle peut répéter un ensemble d'éléments HTML pour chaque élément dans un tableau. C'est super utile pour créer des listes ou des tableaux dynamiquement.

Exemple :

<div ng-app ng-init="fruits=['Apple', 'Banana', 'Orange']">
<ul>
<li ng-repeat="fruit in fruits">
{{ fruit }}
</li>
</ul>
</div>

Cela créera une liste de fruits. La directive ng-repeat répétera l'élément <li> pour chaque fruit dans notre tableau.

Un Exemple Complet

Maintenant, mettons tout cela ensemble dans un exemple plus complexe :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app ng-init="students=[
{name:'John Doe', grade: 85},
{name:'Jane Smith', grade: 92},
{name:'Bob Johnson', grade: 78}
]">
<h2>Trackeur de Notes des Étudiants</h2>
<table border="1">
<tr>
<th>Nom</th>
<th>Note</th>
</tr>
<tr ng-repeat="student in students">
<td>{{ student.name }}</td>
<td>{{ student.grade }}</td>
</tr>
</table>
<br>
<h3>Ajouter un Nouvel Étudiant</h3>
<form>
Nom: <input type="text" ng-model="newName"><br>
Note: <input type="number" ng-model="newGrade"><br>
<button ng-click="students.push({name:newName, grade:newGrade})">Ajouter Étudiant</button>
</form>
</body>
</html>

Décomposons cela :

  1. Nous commençons avec ng-app dans la balise <body> pour initialiser notre application AngularJS.
  2. Nous utilisons ng-init pour créer un tableau initial d'étudiants.
  3. Nous utilisons ng-repeat pour créer des lignes de tableau pour chaque étudiant.
  4. Nous utilisons ng-model pour lier les champs d'entrée aux variables.
  5. Nous utilisons ng-click (une nouvelle directive !) pour ajouter un nouvel étudiant à notre tableau lorsque le bouton est cliqué.

Cet exemple démontre comment ces directives travaillent ensemble pour créer une application web dynamique et interactive. Vous pouvez ajouter de nouveaux étudiants, et ils apparaîtront immédiatement dans le tableau !

Conclusion

Félicitations ! Vous avez刚刚 fait vos premiers pas dans le monde des directives AngularJS. Nous avons couvert les bases de ng-app, ng-init, ng-model, et ng-repeat. Ce ne sont que quelques-unes des nombreuses directives que propose AngularJS, mais elles sont un excellent point de départ.

N'oubliez pas, apprendre la programmation est comme apprendre une nouvelle langue. Ça prend du temps et de la pratique, mais avant que vous ne vous en rendiez compte, vous parlerez couramment AngularJS ! Continuez à expérimenter avec ces directives, essayez de les combiner de différentes manières, et surtout, amusez-vous !

Bonne programmation, futurs maîtres d'AngularJS !

Credits: Image by storyset

Tutoriel précédent:
AngularJS - Première application
Tutoriel suivant:
AngularJS - Expressions