Create a Simple Shopping Cart Using AngularJS: Part 1

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.

Inside the .container div, create a .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.

Now, in the first column let's add a few items and options.

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.

Save the changes and browse index.html. It should look like:

Simple Shopping Cart

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.

Once express is installed successfully, open server.js, require express and create an app.

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.

Next, bind the application to a local port address.

Now start the Node.js server and you should get the server started message in the terminal.

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.

Inside the main.html body, add a div with the ngView directive. After making all the above changes, here is how main.html looks:

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.

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.

Once installed, add a reference to angular-route in main.html.

Open up cart.js and define the cart module.

As seen in the above code, we have injected the ngRoute module, which we'll use to define the routes.

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:

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.

Define the default route for the AngularJS application to /cart inside app.js.

Add a reference to cart.js and app.js in the main.html page.

Save all the changes and restart the server. Point your browser to http://localhost:3000 and you should have the cart page displayed.

Shopping Cart Page Inside AngularJS App

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:

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:

Include a reference to checkout.js in the main.html file.

Inject the module checkout in app.js so that the shoppingCart AngularJS application is aware of this module.

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.

Shopping Cart App 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!

Tags:

Comments

Related Articles