Javascript frameworks are nothing but Javascript libraries that help make time-consuming normal javascript operations faster and also provide advanced built-in functions to improve the functionality of the scripting operation. There are a number of Javascript libraries that provide different advanced features based on the front-end functionality and design requirement. Some of the few Javascript frameworks includes Angular JS, Backbone JS, Batman, CanJS, Ember JS, Meteor, Knockout JS, and Spine. These are the most popular and often used frameworks by most front-end engineers, and there are other open source frameworks also used based on requirement.
The development of Web applications is simpler with the use of Javascript frameworks. In this article, you'll learn how to develop a simple to-do list application with the implementation of angular JS framework.
Functionality of the application:
This Web app will list the items which the user will enter in the add to list box. It should also perform a dynamic removal of the items from the list generated by the user without requiring a reload of the page.
Place the following code snippet in an HTML document.
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body ng-app ng-controller="todoCtrlList">
<h2>MyList</h2>
<form ng-submit="todoAddList()">
<input type="text" ng-model="todoAddNew" size="30" placeholder="Add new List Item">
<input type="submit" value="Add">
</form>
<br>
<div ng-repeat="l in myList">
<input type="checkbox" ng-model="l.done"><span ng-bind="l.todoText"></span>
</div>
<p><button ng-click="removeItem()">Remove selected</button></p>
<script>
functiontodoCtrlList($scope) {
$scope.myList = [{todoText:'item1', done:false}];
$scope.todoAddList = function() {
$scope.myList.push({todoText:$scope.todoAddNew, done:false});
$scope.todoAddNew = "";
};
$scope.removeItem = function() {
varmyoldList = $scope.myList;
$scope.myList = [];
angular.forEach(myoldList, function(x) {
if (!x.done) $scope.myList.push(x);
});
};
}
</script>
</body>
</html>Then check on how each line of code in the HTML document helps the application to work.
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
This code snippet helps to include the angular JS library file from the open source CDN repository.
<body ng-app ng-controller="todoCtrlList">Mention the controller function for the application as “todoCtrlList” and mention the presence of application with the “ng-app” tag. Now mention the form for adding a new item to the list:
<form ng-submit="todoAddList()">
<input type="text" ng-model="todoAddNew" size="30" placeholder="Add new List Item">
<input type="submit" value="Add">
</form>
ng-submit="todoAddList()" mentions the controller function to be called on submitting the form by clicking the submit button.
ng-model="todoAddNew" mentions the controller variable value which binds with the input form element.
Thus you bind a normal HTML form with the angular JS controller function. You can display the list with the following snippet of code:
<div ng-repeat="l in myList">
<input type="checkbox" ng-model="l.done"><span ng-bind="l.todoText"></span>
</div>
ng-repeat="l in myList" loops through the myList variable and prints all the elements with a checkbox. Bind these listed items to a button “Remove Selected” which invokes the controller function removeItem() with the ng-click tag.
<button ng-click="removeItem()">Remove selected</button>
Now enter the items we wanted to add in our list in the text box and click “Add” button. Once the “Add” button is clicked, the text in the textbox is cleared and the new item is displayed in the list.
Thus a new item is added to the list. Now you can also remove the items added to the list by first selecting the items to be removed and then clicking the "Removed Selected" button that you see in your balance list.
You shall now check how the script works performing the above application functionalities.
$scope.myList = [{todoText:'item1', done:false}];
This creates a myList variable to hold the list values in associative array.
$scope.todoAddList = function() {
$scope.myList.push({todoText:$scope.todoAddNew, done:false});
$scope.todoAddNew = "";
};
It also performs the addition of new list items by using the .push function. This function is invoked when the “Add” button is clicked.
Now select the items to be removed from the list and invoke the “Remove Selected “button which invokes the following function:
$scope.removeItem = function() {
varmyoldList = $scope.myList;
$scope.myList = [];
angular.forEach(myoldList, function(x) {
if (!x.done) $scope.myList.push(x);
});
};
Here you'll create a temporary copy of the previous list and empty your main list to check if the checkbox for the respective list item is selected or not using the "done" key. Bind if it’s not selected. The new list is added with the item, and there's your list!
Angular JS helps you to simplify the Web application functionality using simple data and model binds and functions. Similarly, a lot of other applications can be developed with other Javascript frameworks.
