Start With AngularJS: Part Four

In this article you will learn about data binding & Template in AngularJS.

Before reading this article, I highly recommend reading the previous parts of the series:

Data Binding

AngularJS provides one-way & two-way data binding to handle the synchronization of data between model and view.

One-way data binding:

It was introduced in AngularJS 1.3 and uses double colon (::), for binding data i.e. binding data from Model to View.

One-way data binding

Two way data binding

It is used to synchronize the data between model and view. It means any change in the model will update the view and vice versa. Ng-model directive is used for two-way data binding.

Two way data binding

  1. Open old visual studio project

  2. Add new html file with name data binding.

    binding

Complete code for one way & two way data binding here:

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js">  
  6.         </script>  
  7.         <meta charset="utf-8">  
  8.             <title>AngularJS Data Binding : Web Geek School</title>  
  9. </head>  
  10. <body ng-app="app">  
  11.     <div ng-controller="Ctrl">  
  12.         <h2>AngularJS Data Binding</h2>  
  13.         <p>Name (two-way binding):  
  14.             <input type="text" ng-model="name" />  
  15.         </p>  
  16.         <i>Change the Textbox value to see changes</i>  
  17.         <p>Your name (one-way binding): {{::name}}</p>  
  18.         <p>Your name (normal binding): {{name}}</p>  
  19.         </div>  
  20.         <script>  
  21.             var app = angular.module('app', []);  
  22.             app.controller("Ctrl", function($scope)  
  23.              {  
  24.                 $scope.name = "Shiva shukla"  
  25.             })  
  26.         </script>  
  27.         </body>  
  28.   
  29. </html>  
Output

Output

Template: Templates are the combination of HTML elements, directives, filters, attributes, and expressions.
  1. Open old visual studio project
  2. Add new html file with name Template.

    Template
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Demo</title>  
  6.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">  
  7.         </script>  
  8.         <script>  
  9.             var members = [  
  10.               {  
  11.                 username: 'Shiva',  
  12.                 address: 'Delhi'  
  13.             }, {  
  14.                 username: 'Rahul',  
  15.                 address: 'Mumbai'  
  16.             }, {  
  17.                 username: 'Kshma',  
  18.                 address: 'Mumbai'  
  19.             }, {  
  20.                 username: 'Ashita',  
  21.                 address: 'Varanasi'  
  22.             }];  
  23.             var app = angular.module('app', []);  
  24.             app.controller('MemberController', function($scope) {  
  25.                 $scope.Members = members;  
  26.             });  
  27.         </script>  
  28. </head>  
  29. <body ng-app="app">  
  30.     <p>AngularJS basic template</p>  
  31.     <h4>Listing item from the collection</h4>  
  32.   
  33.     <divng-controller="MemberController">  
  34.         <ul>  
  35.             <ling-repeat="member in Members">  
  36.                 {{$index + 1}}. Name: {{member.username }} | Address: {{ member.address}}  
  37.                 </li>  
  38.         </ul>  
  39.         </div>  
  40.   
  41.         </body>  
  42.   
  43. </html>  
Output

Output

Note: {{$index + 1}} is used for indexing & numbering…….
Ng-Reapet: To list data from array, we shall use ng-repeat directive.