Data Binding in Angular Js is the synchronization between the Model and View.
What happens if the controller name is misspelled
if we misspelled controller name is 2 things will happen
1. An error will Occur and to see the error, use browser developer tools.
2. The binding expressions in the view that are in the scope of the controller will not be evaluated
If you are using the minified version of the AngularJS script(in this example we will use (uncompressed version), the error messages may not be readable. To get readable error message
1. In the developer tools, click on the link next to the error. That will lead you to a page, where you can see a much clean error message without all the encoding symbols.
2. Another option you have is, if you are in the development environment, you may use the non-minified version of the AngularJS script, which produces readable error message.
In the below example we will create a module, controller and register the controller with the module, all in one line.
var app = angular
.module("MyApp", [])
.controller("MyController", function ($scope) {
var Student = {
firstName : "Anirudh",
lastName: "Pant",
gender : "Male"
};
$scope.student = Student;
});
Code of HTML Page
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title></title>
<script src="scripts/angular.js"></script>
<script src="MyAngularScript.js"></script>
<meta charset="utf-8" />
</head>
<body ng-controller="MyController">
<h1>First Name: {{student.firstName}}</h1>
<h1>Last Name: {{student.lastName}}</h1>
<h1>Gender: {{student.gender}}</h1>
</body>
</html>
We can use the ng-bind directive or simple double curly braces {{}}, which will bind the innerHTML of the element to the specified model property.
Let's look at another example in which we will use ng-bind directive and double curly braces {{}}.
Code of HTML Page
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title></title>
<script src="scripts/angular.js"></script>
<script src="MyAngularScript1.js"></script>
<meta charset="utf-8" />
</head>
<body ng-controller="MyController">
<table>
<tr><td>
<input type="text" ng-model="student.firstName" />
</td></tr>
<tr>
<td>
<input type="text" ng-model="student.lastName" />
</td>
</tr>
<tr>
<td>
<input type="text" ng-model="student.gender" />
</td>
</tr>
</table>
<p style="color:red"> First Name : {{student.firstName}}</p>
<p style="color:red"> Last Name : {{student.lastName}}</p>
<p style="color:red"> Gender : {{student.gender}}</p>
<div>
First Name: <p ng-bind="student.firstName"></p>
Last Name:<p ng-bind="student.lastName"></p>
Gender: <p ng-bind="student.gender"></p>
</div>
</body>
</html>
MyAngularScript1.js File:
var app = angular
.module("MyApp", [])
.controller("MyController", function ($scope) {
var Student = {
firstName : "Anirudh",
lastName: "Pant",
gender : "Male"
};
$scope.student = Student;
});
Output:
No comments:
Post a Comment