Using AngularJS Implement E-commerce
Website.
<html>
<html ng-app="EcommerceApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body
ng-controller="ProductController">
<h1>Welcome to our E-commerce
Website</h1>
<!-- Product Listing -->
<div class="product-list">
<div class="product"
ng-repeat="product in products">
<h2>{{ product.name
}}</h2>
<p>Price: ${{ product.price
}}</p>
<button
ng-click="addToCart(product)">Add to Cart</button>
</div>
</div>
<!-- Shopping Cart -->
<div class="shopping-cart">
<h2>Shopping Cart</h2>
<ul>
<li ng-repeat="item in
cart">
{{ item.name }} - ${{
item.price }}
</li>
</ul>
</div>
<script>
var app =
angular.module('EcommerceApp', []);
app.controller('ProductController',
function ($scope) {
$scope.products = [
{ name: 'Product 1', price:
10.99 },
{ name: 'Product 2', price:
19.99 },
{ name: 'Product 3', price:
29.99 }
];
$scope.cart = [];
$scope.addToCart = function
(product) {
$scope.cart.push(product);
};
});
</script>
<style>
.product-list {
display: flex;
flex-wrap: wrap;
}
.product {
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
}
.shopping-cart {
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
}
</style>
</body>
</html>
