Introducing Angular JS
Javascript technology has improved so great. We already has jQuery and now we has Angular JS. First time I hear about it I have no idea what it will be like. After spending some time to search it on the internet I can describe it as a Javascript framework that able to separate the data manipulation for the DOM manipulation. Whatever it is, it will be easier if we take a look at this sample application.
<!DOCTYPE html> <html ng-app="appTable"><!-- Declare this page as Angular application. --> <head> <style> table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(odd) { background-color: #f1f1f1; } table tr:nth-child(even) { background-color: #ffffff; } </style> <!-- Include the Angular JS. --> <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> </head> <body> <!-- Here we define the controller scope. --> <div ng-app="" ng-controller="tableCustomer"> <table> <tr> <th>Name</th> <th>Country</th> <th></th> </tr> <!-- ng-repeat will loop this row based on the data variable --> <tr ng-repeat="(id, data) in names" id="{{ id }}"> <td><input type="text" value="{{ data.Name }}" /></td> <td><input type="text" value="{{ data.Country }}" /></td> <td><button ng-click="deleteRow(id)">X</button></td> </tr> </table> <!-- ng-click will call the function defined in our controller --> <button ng-click="addRow()">+</button> </div> <script> // Here we define the initialization data for our table. // The index 'row-0-1', 'row-0-2' will be used as row ID in the table. // Its content will be used as the row data. var customerList = { 'row-0-1': {Name:'Infosys Technologies', Country:'Indonesia'}, 'row-0-2': {Name:'Cognizant Technologies', Country:'India'} }; // Here we define the variables and functions for our controller. var app = angular.module("appTable", []); app.controller("tableCustomer", function($scope) { // The number for the new row ID. $scope.rowId = 1 // Here we pass the customer data to our contoller. $scope.names = customerList // The function when we add the new row. $scope.addRow = function(){ // Just add the new object to our data $scope.names['row-1-' + $scope.rowId] = {Name:'', Country:''} $scope.rowId++ } // The function when we delete the row. $scope.deleteRow = function(id){ // Just delete the data. delete $scope.names[id] } }); </script> </body> </html>
When we are creating the dynamic table which we can add or remove its row using Javascript usually we have to inject the new HTML tag for the new table row. Or we have to remove the row by removing the HTML.
If we are using Angular, we can define the data for the table in Javascript array then Angular is able to create the table based on that array. If we want to add a new row to the table we just need to add a new data to the array. Also if we want to remove the row from the table we just need to remove the specific data from the array. Please note that we only working at the array not the HTML because Angular will do it for us.
That's cool isn't it? I hope this short tutorial can explain to you how Angular is working and what is the difference from when we are using jQuery or pure Javascript code. Are you interested in learning more about Angular JS? The tutorials in http://www.w3schools.com/angular/ is a very good way to start.
Before I finish, there might be one question "Will Angular replace jQuery?". I don't think so, because jQuery has been adopted widely by so many websites and also still powerful until now.
Add new comment