In this tutorial, we will create a simple Shopping Cart Using AngularJs. This simple application purpose is to add the product that the buyer wants to buy, and will be listed to the cart waiting to be paid. We will try to use angularJS to implement this simple task in a different way. The directives within the AngularJs made this application a little bit simpler but full of functions that can be declared like jquery libraries.
So let's now do the coding.
Getting Started
After downloading and Installing the said libraries/plugins, compile them to a single folder. Then create a new folder where you will store the images you want to use.
Creating the markup
Open your text editor, and try to copy/paste the code that I provided below. After that name it as 'index.html'.
Note: for the plugins/libraries, please check the path names in the code and replace it according to the location of the files. i.e. [<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css"/>] If your css folder is located inside the "assets" directory, replace the href into [<link rel = "stylesheet" type = "text/css" href = "assets/css/bootstrap.css"/>]
<!DOCTYPE html>
<meta charset = "UTF-8" name = "viewport" content = "width=device-width, initial-scale=1" /> <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css"/> <link rel = "stylesheet" type = "text/css" href = "css/style.css"/> <body ng-app = "myModule" ng-controller = "myController"> <nav class = "navbar navbar-default">
<div class = "container-fluid"> <a class = "navbar-brand" href = "https://sourcecodester.com">Sourcecodester
</a> </nav>
<div class = "col-md-2"></div> <div class = "col-md-8 well"> <h3 class = "text-primary">Simple Shopping Cart Application Using AngularJs
</h3> <hr style = "border-top:1px dotted #ccc;"/> <div id = "bg-background" class = "col-md-7"> <hr style = "border-top:1px groovy #ccc;"> <div id = "p_list" ng-repeat = "product in products "> <h5>{{product.p_name}}
</h5> <div class = "pull-right col-md-5"> <div class = "panel panel-primary"> <div class = "panel-heading"> <div class = "panel-body table-responsive"> <tr ng-repeat = "cart in carts" ng-init = "setTotals(cart)"> <td>₱{{cart.p_price}}
</td> <td><button type = "button" ng-click = "remove_cart(cart)" class = "btn btn-danger"><span class = "glyphicon glyphicon-remove"></span></button></td> <td align = "right">Total
</td>
This code will display the design of your application.
Creating the directives
After creating the markup, we will now go to the directives of AngularJs. This will handle the main function of the application by adding the product to the cart. To create the function just copy/paste the code that I provided below, then save as 'app.js' and save it inside the js folder. The code below is the script that is written inside the included/imported javascript file in our mark up above (<script src = "js/app.js"></script>).
var app = angular.module("myModule", [])
.controller("myController", function($scope){
$scope.carts=[]; //create a variable name carts, this will be the storage of the product that the buyer choose
$scope.products = [
{p_id: "1", p_name: "Samsung Galaxy S7 Edge", p_image: "images/1.jpg", p_price: 28990},
{p_id: "2", p_name: "iPhone 8", p_image: "images/2.png", p_price: 60138},
{p_id: "3", p_name: "Sony Xperia Z3+", p_image: "images/3.png", p_price: 1519000},
{p_id: "4", p_name: "ALIENWARE 17", p_image: "images/4.png", p_price: 75187},
{p_id: "5", p_name: "Luvaglio Laptop", p_image: "images/5.png", p_price: 50115000},
{p_id: "6", p_name: "Motorola Moto G4 16GB", p_image: "images/6.png", p_price: 9013}
]; //this is an array of product that will be display in the mark uo
$scope.add_cart = function(product){ //set a function name add_cart
if(product){ //check if the product is already declared within the function
$scope.carts.push({p_id: product.p_id, p_name: product.p_name, p_price: product.p_price}); //pushes the chosen product into a new variable called carts when the add to cart button is clicked
}
}
$scope.total = 0; //display the default value of total
$scope.setTotals = function(cart){ //set a function name setTotals
if(cart){ //check if cart is already set in the function
$scope.total += cart.p_price; //sum the total value of each product
}
}
$scope.remove_cart = function(cart){ //set a function called remove_cart
if(cart){ //checked if the cart has a value
$scope.carts.splice($scope.carts.indexOf(cart), 1); //delete a product based on the index
$scope.total -= cart.p_price; //deduct the price of the product simultaneously when deleted
}
}
});
There you have it! We have created a simple shopping cart application using AngularJS. I hope that this tutorial will give you some thoughts on your future projects. For more updates, tutorials, and free project source codes, just kindly visit and explore this site.
Enjoy Coding!!
