Français

Tutoriel AngularJS

Applications AngularJS

AngularJS - Formulaire de commande : Un guide pour les débutants

Bonjour à tous, futurs magiciens d'AngularJS ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde des formulaires de commande AngularJS. Ne vous inquiétez pas si vous n'avez jamais écrit une ligne de code auparavant - nous allons commencer par les bases et progresser pas à pas. À la fin de ce tutoriel, vous serez capable de créer des formulaires de commande dynamiques comme un pro !

AngularJS - Order Form

Qu'est-ce qu'AngularJS ?

Avant de plonger dans les formulaires de commande, penchons-nous un instant sur ce qu'est AngularJS. Imaginez que vous construisez une maison. HTML est comme les briques et le mortier, CSS est la peinture et les décorations, et AngularJS ? Eh bien, c'est comme le système domotique intelligent qui rend tout interactif et dynamique.

AngularJS est un framework JavaScript qui étend HTML avec de nouvelles attributs, le rendant parfait pour créer des applications web dynamiques. C'est comme donner des superpouvoirs à votre HTML statique !

Configuration de notre projet

Premiers soins, configurons notre projet. Nous devons inclure la bibliothèque AngularJS dans notre fichier HTML. Voici comment on fait :

<!DOCTYPE html>
<html ng-app="orderApp">
<head>
<title>Mon formulaire de commande AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- Notre formulaire ira ici -->
<script src="app.js"></script>
</body>
</html>

Dans ce code, nous faisons quelques choses importantes :

  1. Nous avons ajouté ng-app="orderApp" à la balise <html>. Cela indique à AngularJS que cet élément est la racine de notre application.
  2. Nous avons inclus la bibliothèque AngularJS à l'aide d'une balise <script>.
  3. Nous avons également inclus notre propre fichier JavaScript (app.js) où nous écrirons notre code AngularJS.

Création de notre module et contrôleur AngularJS

Maintenant, créons notre fichier app.js et configurons notre module et contrôleur AngularJS :

var app = angular.module('orderApp', []);

app.controller('OrderController', function($scope) {
$scope.order = {
items: [],
total: 0
};
});

Voici ce qui se passe :

  1. Nous créons un module AngularJS nommé 'orderApp'.
  2. Nous définissons un contrôleur nommé 'OrderController'.
  3. À l'intérieur du contrôleur, nous initialisons un objet order sur le $scope. Cet objet contiendra nos articles de commande et le total.

Construction du formulaire de commande

Maintenant, créons notre formulaire de commande dans le HTML :

<div ng-controller="OrderController">
<h2>Passer votre commande</h2>
<form>
<label>Nom de l'article : <input type="text" ng-model="newItem.name"></label><br>
<label>Prix : $<input type="number" ng-model="newItem.price"></label><br>
<button ng-click="addItem()">Ajouter l'article</button>
</form>

<h3> Résumé de la commande </h3>
<ul>
<li ng-repeat="item in order.items">
{{item.name}} - ${{item.price}}
<button ng-click="removeItem($index)">Supprimer</button>
</li>
</ul>
<p>Total : ${{order.total}}</p>
</div>

Reprenons cela :

  1. Nous utilisons ng-controller pour associer cette section à notre OrderController.
  2. Nous avons des champs d'entrée pour le nom de l'article et le prix, en utilisant ng-model pour les lier à newItem.name et newItem.price.
  3. Nous avons un bouton "Ajouter l'article" qui appelle la fonction addItem() lorsque vous cliquez dessus.
  4. Nous utilisons ng-repeat pour afficher chaque article de la commande.
  5. Chaque article a un bouton "Supprimer" qui appelle la fonction removeItem().
  6. Nous affichons le montant total de la commande.

Implémentation de la logique du contrôleur

Maintenant, ajoutons les fonctions nécessaires à notre contrôleur :

app.controller('OrderController', function($scope) {
$scope.order = {
items: [],
total: 0
};

$scope.newItem = {name: '', price: ''};

$scope.addItem = function() {
$scope.order.items.push({
name: $scope.newItem.name,
price: parseFloat($scope.newItem.price)
});
$scope.calculateTotal();
$scope.newItem = {name: '', price: ''};
};

$scope.removeItem = function(index) {
$scope.order.items.splice(index, 1);
$scope.calculateTotal();
};

$scope.calculateTotal = function() {
$scope.order.total = $scope.order.items.reduce(function(sum, item) {
return sum + item.price;
}, 0);
};
});

Voici ce que fait chaque fonction :

  1. addItem(): Ajoute un nouvel article à la commande, calcule le nouveau total et réinitialise les champs d'entrée.
  2. removeItem(): Supprime un article de la commande et recalcul le total.
  3. calculateTotal(): Additionne les prix de tous les articles de la commande.

Amélioration de l'expérience utilisateur

Pour rendre notre formulaire plus convivial, ajoutons une validation :

<form name="orderForm" ng-submit="addItem()" novalidate>
<label>Nom de l'article : <input type="text" ng-model="newItem.name" required></label><br>
<label>Prix : $<input type="number" ng-model="newItem.price" min="0" step="0.01" required></label><br>
<button type="submit" ng-disabled="orderForm.$invalid">Ajouter l'article</button>
</form>

Et mettons à jour notre contrôleur :

$scope.addItem = function() {
if ($scope.orderForm.$valid) {
$scope.order.items.push({
name: $scope.newItem.name,
price: parseFloat($scope.newItem.price)
});
$scope.calculateTotal();
$scope.newItem = {name: '', price: ''};
$scope.orderForm.$setPristine();
}
};

Ces changements :

  1. Ajoutent une validation de formulaire pour s'assurer que tous les champs sont remplis et que le prix est un nombre positif.
  2. Désactivent le bouton "Ajouter l'article" lorsque le formulaire est invalide.
  3. Ajoutent l'article uniquement si le formulaire est valide.
  4. Réinitialisent le formulaire à son état initial après l'ajout d'un article.

Conclusion

Félicitations ! Vous venez de construire un formulaire de commande fonctionnel avec AngularJS. Nous avons couvert les bases d'AngularJS, y compris les modules, les contrôleurs, le lien bidirectionnel des données et la validation des formulaires. Souvenez-vous, la pratique rend parfait, alors n'ayez pas peur d'expérimenter et d'étendre ce formulaire. Peut-être ajouter une fonctionnalité de réduction ou la capacité de sauvegarder les commandes ? Les possibilités sont infinies !

Voici un tableau récapitulatif des principales directives AngularJS que nous avons utilisées :

Directive Objectif
ng-app Définit la racine d'une application AngularJS
ng-controller Spécifie un contrôleur pour une section de l'application
ng-model Crée un lien bidirectionnel des données
ng-click Spécifie une fonction à exécuter lors d'un clic sur un élément
ng-repeat Répète un élément pour chaque item dans une collection
ng-submit Spécifie une fonction à exécuter lors de la soumission d'un formulaire
ng-disabled Désactive un élément en fonction d'une condition

Bonne programmation, et souvenez-vous - chaque expert a déjà été un débutant. Continuez à pratiquer, et vous deviendrez un maître d'AngularJS en un rien de temps !

Credits: Image by storyset

Tutoriel précédent:
AngularJS - Menu de commutation
Tutoriel suivant:
AngularJS - Onglet de recherche