Creating a Simple Shopping Cart Application Using AngularJs
Submitted by razormist on Saturday, February 27, 2021 - 09:34.
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.
Any text editor such as (notepad++, sublime text, etc.).
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. [] If your css folder is located inside the "assets" directory, replace the href into []
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 ().
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
];//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
}
}
});
DEMO
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.
