Post
Ask Question

How To Bind Data With AngularJS

Here I have taken three textboxes and bound these values at run time with the help of AngularJS. AngularJS is a powerful programming framework based on JavaScript provided by Google.

AngularJS extends HTML with new attributes. This is perfect for Single Page Applications.

What should you already know before learning the AngularJS:

  1. HTML
  2. CSS
  3. JavaScript(Master of web programming)

AngularJS is spread as JavaScript file and add with Script tag such as :

  1. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
AngularJS extends HTML with ng-directives.

 

  • ng-app directive define an AngularJS application.
  • ng-model directive define an AngularJS model and bind the value of HTML control to application data.
  • ng-bind directives binds application data to HTML view.

Now I have shown an example to bind data with HTML using AngularJS.

I have taken a page named AngularJsTest.html andthe page looks like below,

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head></head>  
  5.   
  6. <body>  
  7.   
  8.     <div>  
  9.     </div>  
  10.   
  11. </body>  
  12.   
  13. </html> 
Above is the blank HTML page and now we have added HTML control,
  1. <form id="form1">  
  2.   
  3. <div>  
  4. Name:<input type="text">  
  5. <br>  
  6. <br/>  
  7. Email:<input type="text">  
  8. <br>  
  9. <br>  
  10. Address:<input type="text">  
  11. <br>  
  12. <br>  
  13.   
  14. </div>  
  15.   
  16. </form>  
Now add script for accessing AngularJS.
  1. <!DOCTYPE html>  
  2.   
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5. <title>Angular JS Test</title>  
  6. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  7. </head>  
  8. <body>  
  9. <form id="form1">  
  10. <div>  
  11. Name:<input type="text">  
  12. <br>  
  13. <br/>  
  14. Email:<input type="text">  
  15. <br>  
  16. <br>  
  17. Address:<input type="text">  
  18. <br>  
  19.   
  20. </div>  
  21. </form>  
  22. </body>  
  23. </html>  
We have added AngularJS script source to access the library and now we write model for data,
  1. <!DOCTYPE html>  
  2.   
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5. <title>Angular JS Test</title>  
  6. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  7. <script>  
  8. var app = angular.module('myApp', []);  
  9. app.controller('personCtrl', function ($scope) {  
  10. $scope.Name = "UpendraPratapShahi";  
  11. $scope.Email = "upendra.pratap@****.com";  
  12. $scope.Address = "Noida, India";  
  13. $scope.EMP_Info = function () {  
  14. return$scope.Name + " , " + $scope.Email + " , " + $scope.Address;  
  15. }  
  16. });  
  17.   
  18. </script>  
  19. </head>  
  20. <body>  
  21. <form id="form1">  
  22. <div>  
  23. Name:<input type="text">  
  24. <br>  
  25. <br/>  
  26. Email:<input type="text">  
  27. <br>  
  28. <br>  
  29. Address:<input type="text">  
  30. <br>  
  31.   
  32. </div>  
  33. </form>  
  34. </body>  
  35. </html>  
In the above I have defined a variable with name ‘app’ and give module name as ‘myApp’. Then created controller as ‘PersonCtrl’ and created a function for binding textbox values with given value and returned all and showed it on HTML page.

Now add define directives to the HTML controls,
  1. <!DOCTYPE html>  
  2.   
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4.   
  5.     <head>  
  6.         <title>Angular JS Test</title>  
  7.         <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  8.         <script>  
  9.             var app = angular.module('myApp', []);  
  10.             app.controller('personCtrl', function($scope)  
  11.               {  
  12.                 $scope.Name = "UpendraPratapShahi";  
  13.                 $scope.Email = "upendra.pratap@****.com";  
  14.                 $scope.Address = "Noida, India";  
  15.                 $scope.EMP_Info = function()   
  16.                 {  
  17.                     return$scope.Name + " , " + $scope.Email + " , " + $scope.Address;  
  18.                 }  
  19.             });  
  20.         </script>  
  21.     </head>  
  22.   
  23.     <body>  
  24.         <form id="form1">  
  25.             <div ng-app="myApp" ng-controller="personCtrl">  
  26.                 Name:  
  27.                 <input type="text" ng-model="Name">  
  28.                     <br>  
  29.                     <br/> Email:  
  30.                     <input type="text" ng-model="Email">  
  31.                         <br>  
  32.                         <br> Address:  
  33.                         <input type="text" ng-model="Address">  
  34.                             <br>  
  35.                             <br>  
  36.                             <b>Employee Information :</b> {{EMP_Info()}}  
  37.                             </div>  
  38.                             </form>  
  39.     </body>  
  40.   
  41.     </html>  
In above HTML, I have bound angular model with controller,  and now I will check on web browser.

Now render on browser as in the following image,

form
Now I have made changes in value on browser and see what happens,

form
Above was some information regarding AngularJS. I hope all you have enjoyed article and I welcome your feedback.
 
Read more articles on AngularJS:

 


Similar Articles