Créer un panier simple avec AngularJS Partie 2

Dans la partie précédente de cette série de didacticiels, nous avons vu comment commencer à créer un panier simple avec AngularJS. Nous avons créé un design simple, mais AngularJS n’était pas assez important pour l’appeler application AngularJS. Dans cette partie de la série de didacticiels, nous allons créer une directive AngularJS personnalisée pour implémenter les fonctionnalités requises..

Commencer

Commençons par cloner le code source du tutoriel précédent de GitHub.

clone de git https://github.com/jay3dec/AngularShoppingCart_Part1.git

Après avoir cloné le code source, accédez au répertoire du projet et installez les dépendances requises..

cd AngularShoppingCart_Part1 npm installer

Une fois les dépendances installées, démarrez le serveur.

noeud serveur.js

Pointez votre navigateur sur http: // localhost: 3000 / et vous devriez avoir l'application en cours d'exécution.

Création d'une directive de liste de contrôle

dans le cart.html page, les éléments et ses options sont répétés. Nous allons donc créer une directive AngularJS à cet effet qui créera des éléments et ses options en fonction des données du back-end. Par souci de simplicité, considérons les éléments suivants dans le panier:

['item': 'Disque dur', 'id': 'HD', 'selected': 0, 'price': ['taille': '200GB', 'price': '2000', ' size ':' 400GB ',' price ':' 4000 ', ' item ':' CPU ',' id ':' CPU ',' selected ': 0,' prices ': [' size ' : 'i3', 'price': '20000', 'size': 'i5', 'price': '25000'], 'item': 'Moniteur', 'id': 'MON' , 'selected': 0, 'price': ['size': '16 \ ", 'price': '3000', 'size': '19 \", 'price': '5000'] , 'item': 'Optical Mouse', 'id': 'MOU', 'selected': 0, 'prices': ['size': 'Optical', 'price': '350',  'taille': 'Avancé', 'prix': '550'], 'article': 'RAM', 'id': 'RM', 'sélectionné': 0, 'prix': ['taille ':' 4GB ',' price ':' 4000 ', ' size ':' 8GB ',' price ':' 8000 '], ' item ':' Clavier USB ',' id ':' KEY ',' selected ': 0,' price ': [' size ':' Standard ',' price ':' 2500 ', ' size ':' Advanced ',' price ':' 4500 '] ]

Ajoutez les données suivantes dans le CartCtrl.

$ scope.shopData = ['item': 'Disque dur', 'id': 'HD', 'selected': 0, 'price': ['taille': '200GB', 'price': '2000 ', ' taille ':' 400 Go ',' prix ':' 4000 '], ' article ':' CPU ',' id ':' CPU ',' sélectionné ': 0,' prix ': ['taille': 'i3', 'prix': '20000', 'taille': 'i5', 'prix': '25000'], 'item': 'Moniteur', 'id ':' MON ',' selected ': 0,' price ': [' size ': '16 \ ",' price ':' 3000 ', ' size ': '19 \",' price ': '5000'], 'item': 'Souris optique', 'id': 'MOU', 'selected': 0, 'price': ['size': 'Optical', 'price': ' 350 ', ' size ':' Advanced ',' price ':' 550 '], ' item ':' RAM ',' id ':' RM ',' selected ': 0,' price ' : ['size': '4GB', 'price': '4000', 'size': '8GB', 'price': '8000'], 'item': 'Clavier USB', 'id': 'KEY', 'selected': 0, 'price': ['size': 'Standard', 'price': '2500', 'size': 'Advanced', 'price': '4500']];

Retirer le répété .panneau Code HTML de cart.html. Nous allons créer le code HTML de manière dynamique à l'aide de ngRepeat et $ scope.shopData. Ajoutez le code HTML suivant à la première colonne du .rangée div. 

 
 
 
q.item
 
 
 

Comme on le voit dans le code ci-dessus, en utilisant ngRepeat nous avons itéré shopData et rendu le code HTML. Enregistrez les modifications ci-dessus et redémarrez le serveur. Actualisez la page pour pouvoir afficher les éléments affichés sur la page..

Ensuite, nous afficherons l'option disponible avec un élément particulier, comme sa taille et son prix (voir les données JSON). Pour cela, nous allons créer notre propre directive AngularJS personnalisée. Les directives AngularJS sont l’une des fonctionnalités les plus puissantes d’AngularJS. Pour des informations détaillées sur les directives AngularJS, reportez-vous à la documentation officielle..

Créons une directive personnalisée appelée liste de contrôle. Ouvrir cart.js et créez une nouvelle directive comme indiqué:

.directive ('checkList', function () return restreindre: 'E', template: fonction (elem, attrs) return '
\ 
\ Option 1\ 
\ 
\ Option 2\ 
\ 
\ Option 2\ 
\ 
'; )

Cette directive porte le nom liste de contrôle. La directive liste de contrôle a deux paramètres, restreindre  et modèle. Restreindre définit comment la directive sera appelée. Puisque nous avons défini E, il sera appelé comme nom d'élément, comme suit:

le modèle champ défini le code HTML qui remplacera le liste de contrôle directive sur la page. Nous avons utilisé le même code HTML statique que celui que nous avions précédemment. Appelez maintenant la directive liste de contrôle sur le cart.html page.

 
 
q.item
 
  

Enregistrez les modifications ci-dessus et actualisez la page du panier. Vous devriez pouvoir voir les options HTML statiques sur la page du panier..

Faisons en sorte que la directive lise les données de $ scope.shopData. Tout d'abord, au lieu de répéter les options de la directive, nous utiliserons ngRepeat pour itérer les options. Modifier la directive liste de contrôle comme indiqué pour le rendre dynamique.

template: fonction (elem, attrs) return '
\ 
\ i.size Rs. i.price\ 
\ 
'

Comme vous pouvez le voir dans le code ci-dessus, nous attendons la option être passé à la directive. Donc, à partir de la partie HTML, nous devrons définir un attribut pour la liste de contrôle directive appelée option et transmettre les données requises. Ajouter le option dans cart.html comme montré:

 
 
q.item
 
  

Accéder au passé option à l'intérieur de la directive, nous devrons définir la portée. À l'intérieur de liste de contrôle directive définir portée comme montré:

.directive ('checkList', function () return restreindre: 'E', étendue: option: '=', modèle: function (elem, attrs) return '
\ 
\ i.size Rs. i.price\ 
\ 
'; )

De cette façon, la liste de prix des différents articles de $ scope.shopData est passé dans la directive. Enregistrez les modifications ci-dessus et redémarrez le serveur. Actualisez la page pour pouvoir afficher la taille et le prix de chaque article sous forme d'options dans la page..

Maintenant, si vous essayez de cliquer sur l’option du bouton radio pour un élément particulier, les deux sont sélectionnés. Afin de nous assurer qu'un élément est sélectionné à la fois, nous allons regrouper les boutons radio. Pour cela, il nous faudra passer un autre prénom attribut à la directive à partir de la vue HTML. Alors ajoutez un nouveau prénom attribuer à liste de contrôle de la vue. Nous allons passer l'article ID comme le prénom, depuis son unique à chaque article.

Ajoutez maintenant une autre variable à la portée de la directive pour la rendre accessible dans le modèle de directive..

scope: option: '=', name: '='

À l'intérieur de la directive modèle HTML, ajoutez le nom saisi en tant que nom du bouton radio qui regrouperait les boutons radio d'éléments particuliers.

Enregistrez les modifications et actualisez la page. Essayez de sélectionner les boutons radio pour un élément particulier et vous ne devriez pouvoir en sélectionner qu'un seul à la fois..
Calculer le total en fonction des options sélectionnées
En fonction des éléments sélectionnés par l'utilisateur, nous devons afficher la somme totale du prix de tous les éléments sélectionnés. Pour cela nous allons créer un $ scope fonction appelée total, qui résumera le prix total. Chaque fois qu'un utilisateur sélectionne un élément, nous mettons à jour la variable sélectionnée dans $ scope.shopData JSON. Ensuite, ce JSON est itéré pour obtenir le prix total des éléments sélectionnés. Voici la total une fonction.
$ scope.total = function () var t = 0; for (var k dans $ scope.shopData) t + = parseInt ($ scope.shopData [k] .selected);  retourne t; 
À l'heure actuelle, nous affichons une valeur codée en dur de 100 Rs dans la div totale. Au lieu de cela, nous appellerons simplement la fonction totale.
Rs. total()
Enregistrez les modifications et actualisez la page. Si vous essayez de sélectionner les différentes options, le total ne change pas vraiment. C'est parce que la valeur initiale du choisi la variable dans le JSON est 0 et n'est pas mise à jour lors de la sélection. Passons donc la valeur sélectionnée de JSON dans la directive et mettons-la à jour lorsque le bouton radio est sélectionné. Modifier la vue HTML pour en inclure une de plus choisi attribuer à la liste de contrôle élément de directive. 
Ajouter choisi au champ d'application de la directive pour y accéder à l'intérieur de la directive.
portée: option: '=', nom: '=', sélectionné: '= sélectionné'
Nous allons mettre choisi au bouton radio ngModel directive et la i.price au ngValue directif. Par conséquent, chaque fois que le bouton radio est sélectionné, sa valeur est mise à jour dans choisi attribut du $ scope.shopData JSON. 
Enregistrez les modifications ci-dessus et actualisez la page. Essayez de sélectionner les options du bouton radio et, en fonction de la sélection, le Total le prix devrait être mis à jour.
Conclusion
Dans cette partie de la série de didacticiels, nous avons créé une directive personnalisée que nous avons utilisée dans notre application de panier d'achat simple. Dans la prochaine partie de cette série, nous verrons comment faire en sorte que la div totale soit toujours fixée en haut lors du défilement. Nous allons également implémenter la page de paiement où les articles sélectionnés et les prix seront affichés avec un bouton de retour à la page du panier pour personnaliser la sélection.
Le code source de ce tutoriel est disponible sur GitHub. Faites-nous savoir vos pensées ou des corrections dans les commentaires ci-dessous!



		
			
	   
	




Code