This blog post explains how to create a Simple Shopping Cart using AngularJS.
What is AngularJS?
AngularJS is an open-source MVC JavaScript (programming language) framework, which simplifies web development by offering automatic view/model synchronization.
In this example, we will create a simple application to add the item, remove the item, increment and decrement the quantity of items by implementing AngularJS and items are stored in the browser’s local storage.
The following are required for Development Environment set up:
- Tomcat v7.0
- Eclipse Java EE IDE
- angular.js (core JavaScript file form Google )
- ngstr.js (angular.js module used for performing CRUD operations in local storage )
- bootstrap.css (used for styling purpose)
- app.js (used for performing some set of operations like add, remove and update the items)
- mobile_list.txt (sample JSON values which is used for displaying items)
- index.html(for displaying the items)
The main directives we are using in your application
| ng-app=” “ | ng-app directive initializes an AngularJS application. In our application, it refers the entire document. |
| ng-controller=” “ | ng-controller directive defines the behavior of content under the element will be managed using the Todo Controller class defined in app.js. |
| ng-repeat | ng-repeat directive clones HTML elements once for each item in a collection. In our application, for every object in get_data_from_mobile_list, AngularJS will create a new copy of the <td> element. When objects are added to the get_data_from_mobile_list collection, then ng-repeat automatically adds new <td> elements into the DOM. Similarly when the objects are removed from get_data_from_mobile_list, then the corresponding <td> element is removed as well. This is one of the most versatile directives in AngularJS
|
| data-ng-click | handles clicking event in AngularJS |
| {{ *values*}} | prints the values which are assigned |
Steps To Implement:
1. Create a dynamic web project in the eclipse with the project structure as shown below.
2. Create an html page index.html, include anjular.js, bootstrap.min.css, ngtr.js and app.js file. AngularJS will invoke the ng-controller with a $scope object
3. In this section get the list of mobile items available in mobile_list.txt as a JSON value using “getfrom_list” and display it using angular.js directive ng-repeat and a button is used to insert the current item to the browser’s local storage .
4. This section explains how to add the item, delete the item, increment and decrement the quantity of items in the local storage. ng-repeat is used to get the values from local storage and display it to the console. Two buttons are used to increment and decrement the quantity of items.
5. This is the sample JSON file mobile_list.txt which holds the price, quantity, id, name and snippet for each item
6. Create an app.js file. Here we create a local storage named “notes”.
| var App = angular.module(‘App’, [‘ngStorage’]);
|
This defines the app module. Using modules to configure existing services, and define new services, directives, filters, and so on. Here, we set up ‘routes’ that map URLs to partials. AngularJS watches the browser location and automatically updates the partial when the URL changes. |
| App.controller(‘TodoCtrl’, function ($scope, $http, $localStorage) {
$scope.$storage = $localStorage.$default({ “notes”: [] });
|
The controller is the code behind the view. We can clearly see our application behavior because there is no DOM manipulation or framework specific boilerplate. Just simple, readable JavaScript. In this part, we will create a local storage in the name of notes.NOTE : In chrome browser, press ctrl+shift+i and to navigate to local storage |
| $http.get(‘mobile_list.txt’).then(function (res) | This line is used to get the values from mobile_list.txt using http function |
7. This section is to add the items to the local storage.
8. This section explains how to get the items from local storage, delete the items from local storage and perform the increment and decrement the quantity of items in the local storage
9. Deploy, run the application and observe the output.
OUTPUT
