Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Angular
Code

Créer un simple panier d'achat avec AngularJS : Partie 1

by
Difficulty:IntermediateLength:MediumLanguages:

French (Français) translation by Florence Bertic (you can also view the original English article)

Dans cette série de tutoriels, nous verrons comment faire pour créer un simple panier d'achat avec AngularJS. Cette série de tutoriels va traiter de l'utilisation des directives d'AngularJS. Les directives d'AngularJS sont la partie centrale d'AngularJS et elles communiquent des comportements spéciaux au HTML. Dans la documentation officielle:

A un haut niveau, les directives sont les marqueurs sur un élément DOM (comme un attribut, un nom d'élément, un commentaire ou une classe CSS) qui dit au compilateur HTML d' AngularJS ( $compile ) d'attacher un comportement spécifique à cet élément DOM ou même de transformer l'élément DOM en ses enfants.

Faire le design de la Page du Panier d'achat

Nous allons utiliser Bootstrap pour faire le design de notre page. Une fois que nous aurons terminé le design de notre page avec Bootstrap, nous l'intégrerons dans notre application AngularJS. Pendant le design de notre page nous n'entrerons pas trop dans les détails de Bootstrap, mais nous nous concentrerons sur certains points critiques.

Crée une page appelée index.html Télécharge et inclus les fichiers Bootstrap dans index.html

A l'intérieur de la div .container, crée une div .row

Dans la page index.html, nous aurons deux colonnes. Une des colonnes affichera une liste d'éléments avec les prix, et l'autre colonne aura une div Total. Donc créons les deux colonnes.

Maintenant, dans la première colonne ajoutons quelques éléments et options.

Dupliquer le code HTML ci-dessus quelques fois dans la première colonne afin d'avoir plus d'éléments. Dans la deuxième colonne, ajoute le code HTML suivant pour montrer la somme du prix des éléments sélectionnés.

Enregistre les changements et lance index.html dans le navigateur. Voilà à quoi ça devrait ressembler:

Simple Shopping Cart

Ça a l'air bien. Mais il y a une chose que nous devons arranger, c'est mettre la div Total en position fixed afin qu'elle ne bouge pas quand on fait défiler le scroll du navigateur. Pour arranger cela, nous allons utiliser le composant JavaScript de Bootstrap, Affix.

Tout d'abord assurez-vous que vous avez inclus le fichier JavaScript de Bootstrap. Pour ajouter le comportement affix, ajoute simplement l'attribut data-spy="affix" à la div Total. Eventuellement, on peut aussi spécifier à affix la position qu'on veut, nous allons donc le laisser à une certaine hauteur du haut en ajoutant data-offset-top="20". Maintenant, si vous lancez index.html dans le navigateur et que vous essayez de faire défiler le scroll vers le bas, le total reste en haut et est toujours visible.

Créer l'App du Panier d'achat

Créer le Serveur Node

Pendant la création de l'app AngularJS, nous allons utiliser la directive ngView pour changer les vues. Donc nous allons avoir besoin de lancer l'application AngularJS en utilisant un serveur. D'où l'utilisation d'un serveur Node.js

Commençons par la création d'un dossier ShoppingCart pour notre projet.  A l'intérieur de ShoppingCart crée un fichier appelé server.js. Nous utiliserons Express, un framework d'application web NodeJS, pour le rendu des pages. Donc installe express en utilisant npm.

Une fois qu'express est bien installé, ouvre server.js, exige express et crée une app.

Nous allons garder nos fichiers AngularJS dans un dossier séparé appelé public. Créer un dossier appelé public. A l'intérieur de server.js définis les chemins /public et /node_modules.

Ensuite, lie l'application à un port d'adresse local.

Maintenant lance le serveur Node.js et tu devrais obtenir le message de serveur démarré dans le terminal.

Mais si tu tapes http://localhost:3000 dans le navigateur tu auras l'erreur Cannot GET / parce que nous n'avons pas encore défini les routes.

Créer une App AngularJS

Dans le dossier public créer une page appelée main.html Ça nous servira de fichier template de base. Copie simplement la page index.html que nous avons créé plus tôt et renomme-la main.html. Dans main.html enlève le contenu à l'intérieur du body.

Télécharge AngularJS et inclus-le dans main.html. Ajoute la directive ngApp en haut de la balise HTML.

Dans le corps de main.html, ajoute une div avec la directive ngView. Après avoir fait les changements ci-dessus, voici à quoi ressemblemain.html :

Maintenant, définissons la page par défaut qui devra être rendue quand on démarre le serveur node. Ouvre ShoppingCart/server.js et ajoute l'application route suivante pour rediriger vers la page main.html.

Enregistre les changements et relance le serveur node. Fais aller le navigateur sur http://localhost:3000 et tu devrais être capable de voir une page blanche, pas comme la dernière fois où nous avions une erreur sur la même adresse.

Créer une Vue et une Route pour le Panier

Ensuite, intégrons le design de notre panier d'achat dans l'app AngularJS. A l'intérieur du dossier public crée un autre dossier appelé cart. A l'intérieur de cart crée deux fichiers, cart.html et cart.js. Depuis notre page index.html designée avec Bootstrap, copie le contenu du body et colle-le dans cart.html.

Nous aurons besoin de ngRoute, on va donc l'installer grâce à npm.

Une fois installé, ajoute une référence à angular-route dans main.html.

Ouvre cart.js et défini le module cart.

Comme on l'a vu dans le code ci-dessus, on a injecté le module ngRoute, qu'on utilisera pour définir les routes.

En utilisant le module ngRoute, on a défini la route /cart avec son template et son controleur respectifs. Aussi, définis le controleur CartCtrl à l'intérieur de cart.js. Voici à quoi ressemble cart.js:

On aura aussi besoin d'avoir un fichier root pour injecter tous les modules dans notre application AngularJS. Donc à l'intérieur du dossier public créer un fichier appelé app.js. Ce fichier servira de fichier root pour l'application AngularJS. Créer un nouveau module appelé shoppingCart dans app.js et injecte le module cart dedans.

Définis la route par défaut pour l'application AngularJS sur /cart à l'intérieur de app.js.

Ajoute une référence à cart.js et app.js dans la page main.html.

Enregistre les changements et relance le serveur. Fais aller le navigateur sur http://localhost:3000 et tu devrais avoir la page du panier qui s'affiche.

Shopping Cart Page Inside AngularJS App

Maintenant, si tu fais défiler la page vers le bas, la div Total de reste pas fixée. Garde une note à propos de ce problème—nous le réglerons plus tard dans cette série.

Créer une Vue et Route de vérification

Dans le dossier public, crée un dossier appelé checkout. Dans le dossier checkout, crée deux fichiers appelés checkout.html et checkout.js. Ouvre checkout.html et ajoute le code HTML suivant:

Ouvre checkout.js et crée le module checkout. Injecte le module ngRoute et définit le template par défaut et son contrôleur logique. Voici à quoi checkout.js ressemble au final:

Inclus une référence à checkout.js dans le fichier main.html.

Injecte le module checkout dans app.js pour que l'application AngularJS shoppingCart soit consciente de ce module.

Enregistre les changements et relance le serveur. Fais aller le navigateur sur http://localhost:3000 et tu devrais voir la page de checkout.

Shopping Cart App Checkout Page

Conclusion

Dans ce tutoriel, nous avons fais le design et l'intégration de notre simple design de panier d'achat dans l'application AngularJS. Dans la prochaine partie de cette série, nous verrons comment créer une directive personnalisée pour implémenter la fonctionnalité requise.

Le code source de ce tutoriel est disponible sur GitHub. Laissez-nous vos commentaires, corrections et suggestions dans la boîte des commentaires ci-dessous!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.