shylock95
NFT Drop Specialist
LEVEL 1
200 XP
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. [
] 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 (
).
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.
Enjoy Coding!!
Download
So let's now do the coding.
Getting Started
- Download and Install Angular JS
- Download and Install Bootstrap for the design
- 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 [
]
- <!DOCTYPE html>
- <html
lang
=
"en"
>
- <head
>
- <script
src
=
"js/angular.js"
></
script
>
- <script
src
=
"js/app.js"
></
script
>
- <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"
/
>
- </
head
>
- <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
>
- </
div
>
- </
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"
>
- <h4
>
PRODUCTS<h4
>
- <hr
style
=
"border-top:1px groovy #ccc;"
>
- <div
id
=
"product"
>
- <div
id
=
"p_list"
ng-repeat =
"product in products "
>
- <h5
>
{{product.p_name}}</
h5
>
- <center
><img
ng-src
=
"{{product.p_image}}"
/
></
center
>
- <div
><label
>
Price: ₱{{product.p_price}}</
label
></
div
>
- <center
><button
type
=
"button"
ng-click =
"add_cart(product)"
><span
class
=
"glyphicon glyphicon-shopping-cart"
></
span
>
Add to cart</
button
></
center
>
- </
div
>
- </
div
>
- </
div
>
- <div
class
=
"pull-right col-md-5"
>
- <div
class
=
"panel panel-primary"
>
- <div
class
=
"panel-heading"
>
- <h5
>
MY CART</
h5
>
- </
div
>
- <div
class
=
"panel-body table-responsive"
>
- <table
class
=
"table"
>
- <thead
>
- <tr
>
- <th
>
Product</
th
>
- <th
>
Price</
th
>
- <th
></
th
>
- </
tr
>
- </
thead
>
- <tbody
>
- <tr
ng-repeat =
"cart in carts"
ng-init =
"setTotals(cart)"
>
- <td
>
{{cart.p_name}}</
td
>
- <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
>
- </
tr
>
- <tr
>
- <td
align
=
"right"
>
Total</
td
>
- <td
>
₱{{total}}</
td
>
- </
tr
>
- </
tbody
>
- </
table
>
- </
div
>
- </
div
>
- </
div
>
- </
div
>
- </
body
>
- </
html
>
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
- $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
- }
- }
- }
)
;
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.
Enjoy Coding!!
Download
You must upgrade your account or reply in the thread to view the hidden content.