Post
Ask Question

Learn About Data Binding In Angular

Introduction

In this article, we are going to see the controller and also how to register the module with the controller. Two-way data binding is also explained in this article. 

Controller

The controller is a javascript function. The controller is to build a model for a view to display. In a real-world application with our web service it is used to retrieve data from the database. Let us see an example.

  1. var myapp = angular.module("test", []);  
  2. myapp.controller("sample", function($scope) {  
  3.     var student = {  
  4.         Rollno: "0001",  
  5.         Name: "navi",  
  6.         Age: "19"  
  7.     };  
  8.     $scope.student = student;  
  9. });  

The above code contains a module and a controller. The controller is registered with the module.

The module name is the test and the controller name is a sample. The module is registered. The HTML code is given below.

  1. <html ng-app="test">  
  2.   
  3. <head>  
  4.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>  
  5.     <script src="C:\Users\Naveen\Desktop\navi.js"></script>  
  6. </head>  
  7.   
  8. <body ng-controller="sample"> Rollno:{{student.Rollno}}<br> Name:{{student.Name}}<br> Age:{{student.Age}}<br> </body>  
  9.   
  10. </html>  

By running this code, the output is given below

output

It displays the respective name and the age because in the code I link the module by using the ng-app (inside the HTML tag) and also I link the controller by using (inside the body tag).

ng-src

Using a binding expression with img src attribute results in a 404 error in Angular JS. The error is due to the DOM being parsed and an attempt is made to fetch the image from the server. But Angular JS binding expression that is specified with src attribute is not evaluated. To fix the error we can use ng-src directive. It assures us that the request is sent only after Angular JS has evaluated the binding expression.

Two-way data binding

This means that a  change in the model updates the view and a change in the view update the model. Binding expression updates the view where the model changes .ng-model directives update the model when the view changes.

  1. <div ng-app="myApp" ng-controller="myCtrl"> Name: <input ng-model="message">  
  2.     <h1>{{message}}</h1>  
  3. </div>   
  4.     Inside the js file var app = angular.module('sample', [ ]);   
  5. app.controller('myCtrl', function($scope) { $ });  

ng-repeat

ng-repeat is the same as for loop in C-sharp. ng- repeat is mostly used in the html tables The example for ng-repeat is given below:

  1. <html>  
  2. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>  
  3.   
  4. <body ng-app="sample" ng-controller="test">  
  5.     <div ng-repeat="i in cities">{{i}} </div>  
  6.     <script>  
  7.         var app = angular.module("sample", []);  
  8.         app.controller("test", function($scope) {  
  9.             $scope.cities = ["Mumbai", "New Delhi", "Chennai", "Bangalore", ]  
  10.         });  
  11.     </script>  
  12. </body>  
  13.   
  14. </html>  

The output of the code is given below

output

 

The working of ng-repeat is the same as the for each loop. Suppose we want to find the index of each element -- it’s very easy .Just add ng-init in the above code.

  1. <div ng-repeat="i in cities" ng-init="parentIndex=$index">{{i}}+Index:{{$index}} </div>  
  2. <script>  

The output of the code is given below

output

Conclusion

In this article, we have learned about the two-way data binding in Angular JS. In my next article, we will see some other concepts in the Angular JS.


Similar Articles