Create Shopping Cart with angularjs

 

In this Tutorial you will learn to build a shopping cart with angularjs . you can also integrate this Tutorial to your ecommerce app which we have created earlier here is the preview of our shopping cart

How it works…

First off, we need to install the shopping cart directive. As in the previous Tutorial, we will install it with Bower. Open your terminal window at the project root and type the following command:

bower install ngcart --save
  • Now, open the app folder and edit the app.js file. Add the following highlighted code after the ngAside dependency:
    angular.module('interfacecomponents', [
      'ngResource',
      'ui.bootstrap',
      'ngCookies',
      'ngAnimate',
      'ngTouch',
      'ngSanitize',
      'ui.router',
      'ngAside',
      'ngCart'
    ])
  • Let’s create a ngCart controller. Go to modules/shared/directives/ and create a folder called ngcart. Inside this folder, create a file called ngcartCtrl.js and add the following code:
    'use strict';
    
    /**
     * @ngdoc function
     * @name app.controller:ShopCartCtrl
     * @description
     * # ShopCartCtrl
     * Controller of the app
     */
    angular.module('interfacecomponents')
    .controller('ShopCartCtrl', ['$scope', 'ngCart', '$http', function ($scope, ngCart, $http) {
    
      ngCart.setTaxRate(7.5);
       ngCart.setShipping(2.99);
    
    }]);

About the author

Deven Rathore

I'm Deven Rathore, a multidisciplinary & self-taught designer with 3 years of experience. I'm passionate about technology, music, coffee, traveling and everything visually stimulating. Constantly learning and experiencing new things.

Pin It on Pinterest

Shares