Shineyrock

dislike -3 03
Create a Simple Shopping Cart Using AngularJS: Part 1
1. June 2015
2. Daily
3. read 820
In this tutorial series, we'll see how to go about creating a simple shopping cart using AngularJS. This tutorial series will focus on the use of AngularJS directives. AngularJS directives are the core part of AngularJS and they impart special behavior to the HTML. From the official docs:
At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children.

Designing a Cart Page
We'll be using Bootstrap to design our page. Once we are done with our Bootstrap designed page, we'll integrate it into our AngularJS application. While designing the page we won't go into much details of Bootstrap, but we'll focus on some critical points.
Create a page called index.html. Download and include the Bootstrap files to index.html.
```
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap Shop Cart</title>

    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    <style>
        body {
            padding-top: 50px;
        }
        #divTotal{
            background-color: green;
        }
        .affix{
            right: 0px;
        }
        .affix-top{
            right: 0px;
            position: fixed;
        }
    </style>

</head>

<body>

    <div class="container">


    </div>

</body>

</html>
```
Inside the .container div, create a .row div.
```
<div class="row">
  
</div>
```
In the index.html page, we'll have two columns. One will have a list of items with prices displayed, and the other column will have the Total div. So let's create the two columns.
```
<div class="col-xs-7 col-md-8 col-sm-8 col-lg-8">

</div>

<div class="col-xs-5 col-md-4 col-sm-4 col-lg-4">
    
</div>
```
Now, in the first column let's add a few items and options.
```
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
        <div class="radio">
            <label>
                <input type="radio" name="optradio">Option 1</label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="optradio">Option 1</label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="optradio">Option 1</label>
        </div>
    </div>
</div>
```
Replicate the above HTML code a few times in the first column to have a few more items. In the second column, add the following HTML code to show the sum of the price of items selected.
```
<div class="panel panel-primary">
    <div id="divTotal" class="panel-heading">
        <h3 class="panel-title">Total</h3>
    </div>
    <div class="panel-body">
        <h2>Rs. 100</h2>
    </div>
</div>

<div class="text-center">
    <a href="#/checkout" class="btn btn-danger">Checkout <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
    </a>
</div>
```
Save the changes and browse index.html. It should look like:
It looks fine. But one thing we need to fix is to make the Total div fixed, so that it doesn't move when we scroll the browser. In order to fix that, we'll be using the Bootstrap JavaScript component, Affix.
First make sure you have included the Bootstrap JavaScript file. To add the affix behavior, simply add the data-spy="affix" attribute to the Total div. Optionally, we can also specify the position we want it to affix, so let's keep it at a certain height from the top by adding data-offset-top="20". Now, if you browse index.html and try to scroll down the browser, the total remains at the top and always visible.
Creating a Shopping Cart App
Creating a Node Server
While creating our AngularJS app, we'll be making use of the ngView directive to switch views. So we'll need to run the AngularJS application using a server. Hence we'll use a Node.js server.
Let's start by creating a directory for our project called ShoppingCart. Inside ShoppingCart create a file called server.js. We'll be using Express, a NodeJS web application framework, to render the pages. So install express using npm.
```
npm install express
```
Once express is installed successfully, open server.js, require express and create an app.
```
'use strict'

var express = require('express');

var app = express();
```
We'll be keeping our AngularJS files in a separate folder called public. Create a folder called public. Inside server.js define the /public and /node_modules path.
```
app.use('/public', express.static(__dirname + '/public'));
app.use('/node_modules', express.static(__dirname + '/node_modules'));
```
Next, bind the application to a local port address.
```
app.listen('3000',function(){
    console.log('Server running at http://localhost:3000 !!')
})
```
Now start the Node.js server and you should get the server started message in the terminal.
```
node server.js
```
But if you try to browse http://localhost:3000 it will show the error Cannot GET / because we haven't defined any routes yet.
Creating an AngularJS App
Inside the public directory create a page called main.html. This will serve as our root template file. Simply copy the index.html page that we have earlier created into main.html. From main.html remove the content inside the body.
Download AngularJS and include it in main.html. Add the ngApp directive to the top of the HTML tag.
```
<html lang="en" ng-app="shoppingCart">
```
Inside the main.html body, add a div with the ngView directive. After making all the above changes, here is how main.html looks:
```
<!DOCTYPE html>
<html lang="en" ng-app="shoppingCart">

<head>

    <title>Bootstrap Shop Cart</title>


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    <style type="text/css">
        body {
            padding-top: 50px;
        }
        
        #divTotal {
            background-color: green;
        }
        
        .affix {
            right: 0px;
        }
        
        .affix-top {
            right: 0px;
            position: fixed;
        }
        
        .scroll-debug {
            position: fixed;
            bottom: 10px;
            right: 10px;
        }
    </style>


</head>

<body>

    <div ng-view></div>
    <script type="text/javascript" src="public/script/angular.js"></script>

</body>

</html>
```
Now, let's define our default page to render when the node server is started. Open ShoppingCart/server.js and add the following application route to redirect to the main.html page.
```
app.get('/',function(req,res){
    res.sendFile('main.html',{'root':__dirname + '/public'});
})
```
Save the changes and restart the node server. Point your browser to http://localhost:3000 and you should be able to view a blank page, unlike last time when we had an error in the same route.
Creating a Cart View and Route
Next, let's integrate the shopping cart design into the AngularJS app. Inside the public directory create another folder called cart. Inside cart create two files, cart.html and cart.js. From our Bootstrap design page called index.html, copy the content inside the body and paste into cart.html.
We'll be requiring ngRoute, so install it using npm.
```
npm install angular-route
```
Once installed, add a reference to angular-route in main.html.
```
<script type="text/javascript" src="node_modules/angular-route/angular-route.js"></script>
```
Open up cart.js and define the cart module.
```
angular.module('cart', ['ngRoute'])
```
As seen in the above code, we have injected the ngRoute module, which we'll use to define the routes.
```
.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/cart', {
    templateUrl: 'public/cart/cart.html',
    controller: 'CartCtrl'
  });
}])
```
Using the ngRoute module, we have defined the /cart route with its respective template and controller. Also, define the CartCtrl controller inside cart.js. Here is how cart.js looks:
```
'use strict';

angular.module('cart', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/cart', {
    templateUrl: 'public/cart/cart.html',
    controller: 'CartCtrl'
  });
}])

.controller('CartCtrl', [function() {
    
}]);
```
We'll also need to have a root file to inject all the modules into our AngularJS application. So inside the public directory create a file called app.js. This file will serve as the root file for the AngularJS application. Create a new module called shoppingCart inside app.js and inject the cart module into it.
```
angular.module('shoppingCart', [
    'ngRoute',
    'cart'
]).
```
Define the default route for the AngularJS application to /cart inside app.js.
```
'use strict';


angular.module('shoppingCart', [
    'ngRoute',
    'cart'
]).
config(['$routeProvider', function($routeProvider) {
    $routeProvider.otherwise({
        redirectTo: '/cart'
    });
}]);
```
Add a reference to cart.js and app.js in the main.html page.
```
<script src="public/cart/cart.js"></script>
<script src="public/app.js"></script>
```
Save all the changes and restart the server. Point your browser to http://localhost:3000 and you should have the cart page displayed.
Now, if you scroll down the page, the Total div doesn't remain fixed. Keep a note of this issue—we'll fix it later in the series.
Creating a Checkout View and Route
Inside the public directory, create a folder called checkout. Inside the checkout folder, create two files called checkout.html and checkout.js. Open checkout.html and add the following HTML code:
```
<div class="container">
    <div class="well">
        <div class="page-header">
            <h3>Quotation</h3>
        </div>

        <table class="table">
            <tr>
                <td>
                    CPU
                </td>
                <td>
                    Rs. 20000
                </td>
            </tr>
            <tr>
                <td>
                    Hard Disk
                </td>
                <td>
                    Rs. 5000
                </td>
            </tr>
            <tr>
                <td>
                    <b>Total:</b>
                </td>
                <td>
                    <b>Rs. 25000</b>
                </td>
            </tr>
        </table>


    </div>
    <div class="text-left">
        <a type="button" class="btn btn-danger" href="#/cart">Customize <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>

    </div>
</div>
```
Open checkout.js and create the checkout module. Inject the ngRoute module and define the default template and its controller logic. Here is how checkout.js finally looks:
```
'use strict';

angular.module('checkout', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/checkout', {
        templateUrl: 'public/checkout/checkout.html',
        controller: 'CheckoutCtrl'
    });
}])

.controller('CheckoutCtrl', ['$scope', function($scope) {
   
}]);
```
Include a reference to checkout.js in the main.html file.
```
<script src="public/checkout/checkout.js"></script>
```
Inject the module checkout in app.js so that the shoppingCart AngularJS application is aware of this module.
```
angular.module('shoppingCart', [
    'ngRoute',
    'cart',
    'checkout' 
]).
```
Save the changes and restart the server. Point your browser to http://localhost:3000/#/checkout and you should be able to see the checkout page.
Conclusion
In this tutorial, we designed and integrated our simple shopping cart design into an AngularJS application. In the next part of this series, we'll see how to create a custom directive to implement the required functionality.
Source code from this tutorial is available on GitHub. Do let us know your thoughts, corrections and suggestions in the comment box below!
martijn broeders

founder/ strategic creative at shineyrock web design & consultancy
e-mail: .(JavaScript must be enabled to view this email address)
phone: 434 210 0245

Like

disLike

-3

Add a comment...

Comments

Name*

Email*

location

URL

Comment {comment}

Remember my personal information Notify me of follow-up comments?

9 years ago Cathleen Wonderful, what a website it is! This…

9 years ago Sharyn Ѕimply a smiling ѵisitant heгe to…

9 years ago shelby What's up it's me, I am also visiting…

9 years ago Lottie I read this paragraph completely…

8 years ago earlene This text is invaluable. How can I find…

8 years ago amelie I needed to thank you for this great…

8 years ago noe vance Hi, for all time i used to check…

8 years ago brayden Pretty! This was an extremely wonderful…

8 years ago Peden Hello! I'm at work browsing your blog…

8 years ago cameron Very great post. I just stumbled upon…

about 9 years ago juliane mckibben WOW just what I was looking for. Came…

about 9 years ago carissa That is a good tip especially to those…

8 years ago carris This piece of writing presents clear…

8 years ago marissa Great write-up, I am normal visitor of…

8 years ago ena As a Newbie, I am always exploring…

8 years ago beth Thank you for another fantastic post.…

blog

Create a Simple Shopping Cart Using AngularJS: Part 1

Designing a Cart Page

Creating a Shopping Cart App

Creating a Node Server

Creating an AngularJS App

Creating a Cart View and Route

Creating a Checkout View and Route

Conclusion

martijn broeders

By - category

RSS

By - date

December, 2023

October, 2022

September, 2022

August, 2022

April, 2022

January, 2022

December, 2021

November, 2021

July, 2021

June, 2021

May, 2021

April, 2021

March, 2021

February, 2021

May, 2020

April, 2020

March, 2020

February, 2020

January, 2020

December, 2019

November, 2019

September, 2019

July, 2019

April, 2019

March, 2019

February, 2019

January, 2019

December, 2018

November, 2018

October, 2018

September, 2018

August, 2018

July, 2018

June, 2018

May, 2018

April, 2018

March, 2018

February, 2018

January, 2018

December, 2017

November, 2017

October, 2017

September, 2017

August, 2017

July, 2017

June, 2017