Share
Dans la partie précédente de cette 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 cette partie de la série de didacticiels, nous verrons comment faire en sorte que la div totale reste en haut tout en faisant défiler le navigateur. Nous allons également créer une page de paiement où nous afficherons tous les éléments sélectionnés par l'utilisateur..
Commençons par cloner la partie précédente du tutoriel de GitHub.
clone de git https://github.com/jay3dec/AngularShoppingCart_Part2.git
Après avoir cloné le code source, accédez au répertoire du projet et installez les dépendances requises..
cd AngularShoppingCart_Part2 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.
Bien que nous utilisions le composant affinité bootstrap pour conserver la div totale en haut, il ne fonctionne pas comme prévu. Examinons ce qui ne va pas.
Le composant affixe bootstrap ajoute une classe appelée affixe quand on fait défiler au-dessus d'une certaine hauteur et affixe en haut quand c'est en dessous. Cela fonctionne toujours dans les pages HTML simples, mais une fois intégré à AngularJS, il ne semble pas fonctionner. Afin de résoudre ce problème, nous allons vérifier la hauteur de défilement et lorsque celle-ci est supérieure ou inférieure à une certaine hauteur, soit 50 px, nous ajouterons les classes d'affixe en conséquence..
Donc, en supposant que nous avons la hauteur de défilement comme faire défiler, ajouter le affixe et affixe en haut des cours au Total div en utilisant la directive ngClass.
ng-class = "'affix' ': scroll> 50,' affix-top ': scroll <= 50"
Pour obtenir le parchemin, nous allons créer une autre directive. Appelons la directive getScroll. Cette directive mettra à jour le faire défiler valeur à chaque défilement de la fenêtre du navigateur et en fonction de faire défiler les classes d'affixe seront mises à jour.
Accentsconagua
.directive ('getScroll', function ($ window) return portée: scroll: '= scroll', lien: fonction (portée, élément, attrs) var scrollwindow = angular.element ($ window); scrollwindow.on ('scroll', scope. $ apply.bind (scope, function () scope.scroll = scrollwindow.scrollTop ();));;)Comme on le voit dans le code ci-dessus, nous passons un attribut scroll au getScroll directif. Sur le défilement, nous calculons la hauteur de défilement à partir du haut en utilisant angular.element ($ window). À chaque événement de défilement, nous mettons à jour le faire défiler variable de portée.
Ajouter la directive ci-dessus à la fin de la cart.html page.
Enregistrez ces modifications et actualisez la page. Essayez de faire défiler la fenêtre du navigateur et le total doit être apposé en haut, toujours visible.
Pour renseigner la page de paiement avec les éléments sélectionnés, nous devons les transmettre aux contrôleurs. Nous allons donc utiliser un service AngularJS pour transmettre les données entre les contrôleurs. Créons un service appelé CommonProp où nous allons enregistrer les articles sélectionnés ainsi que le prix total. S'ouvrir cart.js et créer un service appelé CommonProp comme montré:
.service ('CommonProp', function () var Items = "; var Total = 0; return getItems: function () return Items;, setItem: function (value) Items = value;, getTotal: function ( ) return Total;, setTotal: fonction (valeur) Total = valeur;;);Comme on le voit, à l'intérieur du CommonProp service, nous avons défini quatre fonctions pour obtenir et définir les articles et le prix total. Injecter le CommonProp service dans le CartCtrl.
.contrôleur ('CartCtrl', ['$ scope', 'CommonProp', function ($ scope, CommonProp) Nous surveillerons tout changement dans la shopData variable et mettre à jour les données de service en conséquence. Ajoutez le code suivant à l'intérieur CartCtrl.
$ scope. $ watch ('shopData', function () CommonProp.setItem ($ scope.shopData);)À l'intérieur checkout.js, injecter le CommonProp service dans CheckoutCtrl.
.contrôleur ('CheckoutCtrl', ['$ scope', 'CommonProp', function ($ scope, CommonProp) Nous allons utiliser le CommonProp service pour obtenir les articles et total CheckoutCtrl.
.controller ('CheckoutCtrl', ['$ scope', 'CommonProp', fonction ($ scope, CommonProp) $ scope.items = CommonProp.getItems (); $ scope.total = CommonProp.getTotal ();]);En utilisant $ scope.items nous allons remplir la page de paiement. S'ouvrir checkout.html et supprimez la table codée en dur existante. Nous utiliserons la directive ngRepeat et $ scope.items pour créer la table et la peupler dynamiquement.
| i.item | Rs. j'ai sélectionné |
Enregistrez les modifications ci-dessus et actualisez la page. Sélectionnez quelques éléments puis cliquez sur le bouton Check-out bouton dans la page du panier. Une fois sur la page de paiement, il devrait afficher la liste des éléments sélectionnés.
Incluons également le total des prix dans la page de paiement. Donc, quand le total est calculé dans la fonction totale dans CartCtrl, mettre à jour le CommonProp valeur totale du service.
$ scope.total = function () var t = 0; for (var k dans $ scope.shopData) t + = parseInt ($ scope.shopData [k] .selected); CommonProp.setTotal (t); retourner t;
Pour afficher le total sur la page de paiement, incluez les éléments suivants: tr Code HTML:
Total: Rs. total
Depuis que nous mettons à jour le total variable de portée dans CheckoutCtrl, le total sera automatiquement affiché. Enregistrez les modifications et recommencez. Sélectionnez quelques éléments et sélectionnez la caisse. Une fois sur la page de paiement, vous devriez pouvoir voir les articles sélectionnés et le prix total.
Une fois sur la page de paiement, si vous cliquez sur le bouton Personnaliser Cliquez sur le bouton pour accéder à la page du panier, mais toutes les sélections disparaîtront. Nous devons donc résoudre ce problème. Une fois la page du panier chargée, nous vérifierons la CommonProp service pour tous les articles existants. Si des articles sont présents, nous les utiliserons pour remplir la page du panier..
À l'intérieur CartCtrl vérifier si des éléments existent dans CommonProp et mettre le $ scope.shopData.
if (CommonProp.getItems ()! = ") $ scope.shopData = CommonProp.getItems ();
Enregistrez toutes les modifications ci-dessus et redémarrez le serveur. Dans la page du panier, sélectionnez quelques articles, puis cliquez sur Check-out pour accéder à la page de paiement. Une fois sur la page de paiement, cliquez sur le bouton Personnaliser bouton pour revenir à la page du panier. Et vous devriez avoir toutes les sélections faites, comme ils sont, dans la page du panier.
Dans cette partie de la série de didacticiels, nous avons implémenté la page de paiement et expliqué comment partager des données entre différents contrôleurs à l'aide d'un service AngularJS. Nous avons également créé une directive pour obtenir la hauteur de défilement et résoudre le problème d'affixe bootstrap..
J'espère que vous avez appris quelque chose d'utile de cette série de tutoriels. Pour des informations plus détaillées sur les directives AngularJS, consultez la documentation officielle..
Le code source de ce tutoriel est disponible sur GitHub. Faites-nous savoir vos pensées et corrections dans les commentaires ci-dessous!
