Share
Dans cette série de didacticiels, nous verrons comment créer un panier en utilisant AngularJS. Cette série de tutoriels portera sur l’utilisation des directives AngularJS. Les directives AngularJS sont la partie centrale d’AngularJS et confèrent un comportement spécial au code HTML. De la documentation officielle:
A un niveau élevé, les directives sont des marqueurs sur un élément DOM (tel qu'un attribut, un nom d'élément, un commentaire ou une classe CSS) qui indiquent le compilateur HTML d'AngularJS ($ compiler) pour attacher un comportement spécifié à cet élément DOM ou même transformer l’élément DOM et ses enfants.
Nous allons utiliser Bootstrap pour concevoir notre page. Une fois que nous aurons terminé avec notre page conçue par Bootstrap, nous l’intégrerons dans notre application AngularJS. Lors de la conception de la page, nous n'entrerons pas dans les détails de Bootstrap, mais nous nous concentrerons sur certains points critiques..
Créez une page appelée index.html. Téléchargez et incluez les fichiers Bootstrap dans index.html.
Bootstrap Shop Panier
À l'intérieur de .récipient div, créer un .rangée div.
dans le index.html page, nous aurons deux colonnes. On aura une liste d'articles avec les prix affichés, et l'autre colonne aura le Total div. Créons donc les deux colonnes.
Maintenant, dans la première colonne, ajoutons quelques éléments et options.
Titre du panneau
Répliquez le code HTML ci-dessus à quelques reprises dans la première colonne pour avoir quelques éléments supplémentaires. Dans la deuxième colonne, ajoutez le code HTML suivant pour afficher la somme du prix des éléments sélectionnés..
Total
Rs. 100
Check-out
Enregistrez les modifications et parcourez index.html. Cela devrait ressembler à:
Ça semble bien. Mais une chose que nous devons corriger est de faire la Total div fixé, de sorte qu'il ne bouge pas lorsque nous faisons défiler le navigateur. Pour résoudre ce problème, nous utiliserons le composant JavaScript Bootstrap, Affix.
Commencez par vous assurer que vous avez inclus le fichier JavaScript Bootstrap. Pour ajouter le comportement affixe, ajoutez simplement le data-spy = "affix" attribuer à la Total div. Facultativement, nous pouvons également spécifier la position que nous souhaitons qu’il soit apposée. Nous allons donc le garder à une certaine hauteur à partir du haut en ajoutant data-offset-top = "20". Maintenant, si vous naviguez index.html et essayez de faire défiler le navigateur, le total reste en haut et toujours visible.
Lors de la création de notre application AngularJS, nous utiliserons la directive ngView pour changer de vue. Nous devrons donc exécuter l'application AngularJS en utilisant un serveur. Nous allons donc utiliser un serveur Node.js.
Commençons par créer un répertoire pour notre projet appelé Chariot. À l'intérieur Chariot créer un fichier appelé server.js. Nous allons utiliser Express, une infrastructure d'application Web NodeJS, pour restituer les pages. Alors installez Express en utilisant npm.
npm install express
Une fois que Express est installé avec succès, ouvrez server.js, require express et créez une application..
Accentsconagua
'use strict' var express = require ('express'); var app = express ();Nous allons garder nos fichiers AngularJS dans un dossier séparé appelé Publique. Créez un dossier appelé Publique. À l'intérieur server.js définir les /Publique et / node_modules chemin.
app.use ('/ public', express.static (__ dirname + '/ public')); app.use ('/ node_modules', express.static (__ dirname + '/ node_modules'));Ensuite, liez l'application à une adresse de port locale..
app.listen ('3000', function () console.log ('Le serveur est exécuté sur http: // localhost: 3000 !!'))Maintenant, démarrez le serveur Node.js et vous devriez obtenir le message de démarrage du serveur dans le terminal.
noeud serveur.js
Mais si vous essayez de naviguer sur http: // localhost: 3000, l'erreur s'affichera. Ne peut pas obtenir / parce que nous n'avons pas encore défini d'itinéraires.
À l'intérieur de Publique répertoire créer une page appelée main.html. Cela servira de notre fichier de modèle racine. Il suffit de copier le index.html page que nous avons précédemment créé dans main.html. De main.html enlever le contenu à l'intérieur du corps.
Télécharger AngularJS et l'inclure dans main.html. Ajoutez la directive ngApp en haut de la balise HTML.
À l'intérieur de main.html body, ajoutez un div avec la directive ngView. Après avoir apporté toutes les modifications ci-dessus, voici comment main.html regards:
Bootstrap Shop Panier
Définissons à présent le rendu de notre page par défaut au démarrage du serveur de noeud. Ouvrir Panier / serveur.js et ajoutez la route d'application suivante pour rediriger vers le main.html page.
app.get ('/', fonction (req, res) res.sendFile ('main.html', 'root': __ nom_répertoire + '/ public'))Enregistrez les modifications et redémarrez le serveur de noeud. Pointez votre navigateur sur http: // localhost: 3000 et vous devriez pouvoir voir une page vierge, contrairement à la dernière fois où nous avions une erreur dans le même itinéraire.
Ensuite, intégrons le design du panier dans l’application AngularJS. À l'intérieur de Publique répertoire créer un autre dossier appelé Chariot. À l'intérieur Chariot créer deux fichiers, cart.html et cart.js. Depuis notre page de conception Bootstrap appelée index.html, copier le contenu à l'intérieur du corps et coller dans cart.html.
Nous exigerons ngRoute, alors installez-le en utilisant npm.
npm install angular-route
Une fois installé, ajoutez une référence à voie angulaire dans main.html.
S'ouvrir cart.js et définir le Chariot module.
angular.module ('cart', ['ngRoute'])Comme on le voit dans le code ci-dessus, nous avons injecté le ngRoute module, que nous utiliserons pour définir les itinéraires.
.config (['$ routeProvider', fonction ($ routeProvider) $ routeProvider.when ('/ cart', templateUrl: 'public / cart / cart.html', contrôleur: 'CartCtrl');])En utilisant le ngRoute module, nous avons défini le /Chariot route avec son modèle et son contrôleur respectifs. Définissez également le CartCtrl contrôleur à l'intérieur cart.js. Voici comment cart.js regards:
'use strict'; angular.module ('cart', ['ngRoute']) .config (['$ routeProvider', fonction ($ routeProvider) $ routeProvider.when ('/ cart', templateUrl: 'public / cart / cart.html ', contrôleur:' CartCtrl ');]) .controller (' CartCtrl ', [function () ]);Nous aurons également besoin d’un fichier racine pour injecter tous les modules dans notre application AngularJS. Donc à l'intérieur du Publique répertoire créer un fichier appelé app.js. Ce fichier servira de fichier racine pour l'application AngularJS. Créez un nouveau module appelé chariot à l'intérieur app.js et injecter le module de chariot dedans.
angular.module ('shoppingCart', ['ngRoute', 'cart']).Définissez la route par défaut pour l'application AngularJS à /Chariot à l'intérieur app.js.
'use strict'; angular.module ('shoppingCart', ['ngRoute', 'cart']). config (['$ routeProvider', fonction ($ routeProvider) $ routeProvider.otherwise (redirectTo: '/ cart'));Ajouter une référence à cart.js et app.js dans le main.html page.
Enregistrez toutes les modifications et redémarrez le serveur. Pointez votre navigateur sur http: // localhost: 3000 et vous devriez avoir la page du panier affichée.
Maintenant, si vous faites défiler la page, la Total div ne reste pas fixe. Gardez une note de ce problème-nous le corrigerons plus tard dans la série.
Dans le répertoire public, créez un dossier appelé check-out. À l'intérieur de check-out dossier, créer deux fichiers appelés checkout.html et checkout.js. Ouvrir checkout.html et ajoutez le code HTML suivant:
Devis
CPU Rs. 20000 Disque dur Rs. 5000 Total: Rs. 25000 Personnaliser
Ouvrir checkout.js et créer le check-out module. Injecter le ngRoute module et définir le modèle par défaut et sa logique de contrôleur. Voici comment checkout.js regarde enfin:
'use strict'; angular.module ('checkout', ['ngRoute']) .config (['$ routeProvider', fonction ($ routeProvider) $ routeProvider.when ('/ checkout', templateUrl: 'public / checkout / checkout.html ', contrôleur:' CheckoutCtrl ');]) .controller (' CheckoutCtrl ', [' $ scope ', fonction ($ scope) ]);Inclure une référence à checkout.js dans le main.html fichier.
Injecter le module check-out dans app.js de sorte que la chariot L'application AngularJS est consciente de ce module.
angular.module ('shoppingCart', ['ngRoute', 'cart', 'checkout']).Enregistrez les modifications et redémarrez le serveur. Pointez votre navigateur sur http: // localhost: 3000 / # / checkout et vous devriez pouvoir voir la page de paiement.
Dans ce tutoriel, nous avons conçu et intégré la conception simple de notre panier dans une application AngularJS. Dans la prochaine partie de cette série, nous verrons comment créer une directive personnalisée pour implémenter les fonctionnalités requises..
Le code source de ce tutoriel est disponible sur GitHub. Faites-nous savoir vos pensées, corrections et suggestions dans la boîte de commentaire ci-dessous!
