• Articles
  • Tutorials
  • Interview Questions
Home > Blog > Tutorials > Create a Shopping Cart Using AngularJS

Create a Shopping Cart Using AngularJS

AngularJS Use Case – Shopping Cart Application

Here we are creating a shopping Cart Application and code for this application is as follows:

<html ng-app='scartApp'>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<title>Shopping Cart</title>
</head>
<body ng-controller='SCartController'>
<h1>Shopping Cart Application</h1>
<div>
<table border = "1">
<tr>
<td><b>Product Name</b></td>
<td><b>Quantity</b></td>
<td><b>Price</b></td>
<td><b>Total Price</b></td>
<td><b>Operation</b></td>
</tr>
<tr ng-repeat="item in items">
<td>{{item.Name}}</td>
<td><input ng-model='item.quantity'></td>
<td>{{item.price | currency}}</td>
<td> {{item.price * item.quantity | currency}}</td>
<td><button ng-click="remove($number)">Remove</button></td>
</tr>
</table>
</div>
<script>
var sapp = angular.module('scartApp', []);
sapp.controller('SCartController', ['$scope', function($scope) {
$scope.items = [
{Name: 'Saree', quantity: 10, price: 100},
{Name: 'Mojari', quantity: 12, price: 40},
{Name: 'Bangles', quantity:8, price: 15},
{Name: 'Jeans', quantity:5, price: 20}
];
$scope.remove = function(number) {
$scope.items.splice(number, 1);
}
}]);
</script>
</body>
</html><button ng-click="remove($index)">Remove</button>
</div>
<script src="angular.js"></script>
<script>
function CartController($scope) {
$scope.items = [
{title: 'Paint pots', quantity: 8, price: 3.95},
{title: 'Polka dots', quantity: 17, price: 12.95},
{title: 'Pebbles', quantity: 5, price: 6.95}
];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
}
</script>
</body>
</html>

Output
o22

Watch this Full Stack Web Development Course video

Video Thumbnail

Explanation:

  • <html ng-app> – It tells Angular which parts of the page it should handle.
  • <body ng-controller=’CartController’> – SCartController will handle everything between <body> and </body>.
  • <tr ng-repeat=”item in items”> – It creates an array of item.
  • <td>{{item.Name}}</td> – Display Product Name
  • <td><input ng-model=’item.quantity’></td> – The ng-model makes data binding between the input field and the value of quantity.
  • <td>{{item.price | currency}}</td> – Display the price of item in $ using currency tag.
  • <td> {{item.price * item.quantity | currency}}</td> – It displays the total price of the item which is the multiplication of price and quantity.
  • <button ng-click=‘remove ($index)’>Remove</button> – Creates a button remove. It will remove the item if you click on this button.
  • function SCartController($scope) { } – Manages the logic of this application.
  • $scope.items = [ ]; – It defines the collection of item for your shopping cart application.

Course Schedule

Name Date Details
Web Development Courses 30 Nov 2024(Sat-Sun) Weekend Batch View Details
07 Dec 2024(Sat-Sun) Weekend Batch
14 Dec 2024(Sat-Sun) Weekend Batch

About the Author

Kislay
Kislay
Technical Research Analyst - Full Stack Development

Kislay is a Technical Research Analyst and Full Stack Developer with expertise in crafting Mobile applications from inception to deployment. Proficient in Android development, IOS development, HTML, CSS, JavaScript, React, Angular, MySQL, and MongoDB, he’s committed to enhancing user experiences through intuitive websites and advanced mobile applications.