Français

Tutoriel AngularJS

Applications AngularJS

AngularJS - Application Panier

Bonjour, aspirants programmeurs ! Aujourd'hui, nous allons entreprendre un voyage passionnant pour créer une application de panier d'achat en utilisant AngularJS. En tant que votre enseignant de science informatique de quartier, je suis ravi de vous guider à travers ce processus, même si vous êtes complètement nouveau au développement. Alors, prenez une tasse de café (ou votre boisson favorite) et plongeons dedans !

AngularJS - Cart Application

Qu'est-ce que AngularJS ?

Avant de commencer à construire notre application de panier, penchons-nous un moment sur ce qu'est AngularJS. AngularJS est un puissant framework JavaScript qui nous aide à créer des applications web dynamiques. C'est comme un couteau suisse pour les développeurs web, offrant des outils pour rendre notre vie plus simple et notre code plus organisé.

Configuration de Notre Projet

Étape 1 : Création de la Structure HTML

Commençons par créer une structure HTML de base pour notre application de panier d'achat. Ne vous inquiétez pas si vous n'êtes pas familier avec HTML ; je vais expliquer chaque partie au fur et à mesure.

<!DOCTYPE html>
<html ng-app="cartApp">
<head>
<title>Mon Panier d'Achat</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="CartController">
<h1>Mon Panier d'Achat</h1>
<!-- Nous ajouterons plus de contenu ici plus tard -->
</body>
</html>

Dans cette structure HTML, nous avons fait quelques choses importantes :

  1. Nous avons inclus la bibliothèque AngularJS en utilisant un lien CDN.
  2. Nous avons lié notre propre fichier JavaScript (app.js) que nous allons créer ensuite.
  3. Nous avons ajouté ng-app="cartApp" à la balise <html>, ce qui indique à AngularJS que cet élément est la racine de notre application.
  4. Nous avons ajouté ng-controller="CartController" à la balise <body>, que nous utiliserons pour gérer la logique de notre panier.

Étape 2 : Création de l'Application AngularJS

Maintenant, créons notre fichier app.js et configurons notre application AngularJS :

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

app.controller('CartController', function($scope) {
$scope.items = [];
$scope.total = 0;

$scope.addItem = function(item) {
$scope.items.push(item);
$scope.calculateTotal();
};

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

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

Reprenons cela :

  1. Nous créons un module AngularJS nommé 'cartApp'.
  2. Nous définissons un contrôleur nommé 'CartController'.
  3. À l'intérieur du contrôleur, nous configurons un tableau vide pour nos articles et une variable total.
  4. Nous créons des fonctions pour ajouter des articles, supprimer des articles et calculer le total.

Construction de l'Interface Utilisateur

Étape 3 : Création de la Liste des Articles

Mettons à jour notre HTML pour afficher les articles dans notre panier :

<body ng-controller="CartController">
<h1>Mon Panier d'Achat</h1>
<ul>
<li ng-repeat="item in items">
{{item.name}} - ${{item.price}}
<button ng-click="removeItem($index)">Supprimer</button>
</li>
</ul>
<p>Total : ${{total}}</p>
</body>

Ici, nous utilisons des directives AngularJS :

  • ng-repeat pour boucler sur nos articles
  • {{}} pour le lien de données pour afficher les propriétés des articles
  • ng-click pour appeler notre fonction removeItem lorsque le bouton est cliqué

Étape 4 : Ajout de Nouveaux Articles

Ajoutons un formulaire pour permettre aux utilisateurs d'ajouter de nouveaux articles :

<form ng-submit="addItem(newItem)">
<input type="text" ng-model="newItem.name" placeholder="Nom de l'article" required>
<input type="number" ng-model="newItem.price" placeholder="Prix" required>
<button type="submit">Ajouter au Panier</button>
</form>

Ce formulaire utilise :

  • ng-submit pour appeler notre fonction addItem lorsque le formulaire est soumis
  • ng-model pour lier les valeurs d'entrée à notre objet newItem

Amélioration de l'Application

Étape 5 : Ajout des Quantités d'Articles

Modifions notre application pour gérer les quantités d'articles :

app.controller('CartController', function($scope) {
// ... code précédent ...

$scope.addItem = function(item) {
var existingItem = $scope.items.find(function(i) {
return i.name === item.name;
});

if (existingItem) {
existingItem.quantity += 1;
} else {
item.quantity = 1;
$scope.items.push(item);
}
$scope.calculateTotal();
$scope.newItem = {};
};

$scope.removeItem = function(index) {
var item = $scope.items[index];
item.quantity -= 1;
if (item.quantity === 0) {
$scope.items.splice(index, 1);
}
$scope.calculateTotal();
};

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

Et mettons à jour notre HTML :

<li ng-repeat="item in items">
{{item.name}} - ${{item.price}} x {{item.quantity}}
<button ng-click="removeItem($index)">Supprimer</button>
</li>

Conclusion

Félicitations ! Vous venez de construire une application de panier d'achat fonctionnelle en utilisant AngularJS. Nous avons couvert les bases de la configuration d'une application AngularJS, de la création de contrôleurs, de l'utilisation de directives pour le liaison de données et la gestion des événements, et même ajouté des fonctionnalités plus avancées comme la gestion des quantités d'articles.

Souvenez-vous, apprendre à coder est un voyage, et ceci n'est que le début. Continuez à pratiquer, expérimenter, et surtout, amusez-vous avec ça !

Voici un tableau récapitulatif des principaux concepts AngularJS que nous avons utilisés :

Concept Description Exemple
Module Conteneurs pour différentes parties d'une application angular.module('cartApp', [])
Contrôleur Contient la logique métier pour une partie de l'application app.controller('CartController', function($scope) {...})
Scope Objet qui fait référence au modèle de l'application $scope.items = []
Directives Étendent HTML avec des attributs et éléments personnalisés ng-repeat, ng-click, ng-submit
Liaison de Données Synchronise les données entre le modèle et la vue {{item.name}}

Continuez à coder, et souvenez-vous : chaque expert a déjà été un débutant. Vous allez bien !

Credits: Image by storyset

Tutoriel précédent:
AngularJS - Application de Glissement
Tutoriel suivant:
AngularJS - Application de Traduction