AngularJS Expression:
It is like a JavaScript expression surrounded with braces {{ expression }}. AngularJS evaluates the specified expression and binds the result data to HTML.
AngularJS expression cannot contain comma or void or return keyword.
AngularJS expression cannot declare functions.
It cannot contain conditions, loops, exceptions or regular expressions e.g. if-else, ternary, for loop, while loop etc
It contains literals of any data type.
Example:
Now, we will Add a complex Object Employee details
Create a new javascript file, and write the below code
/// <reference path="angular.min.js" />
var myapp = angular.module("myapp", [])
myapp.controller("mycontroller", function ($scope) {
var empDetails = {
FirstName: "Rajakonda",
LastName: "Uday kumar",
Address: "Hyderabad"
};
$scope.empDetails = empDetails;
});
Page
<html ng-app="myapp">
<head>
<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
</head>
<body>
<div ng-controller="mycontroller">
<div>
FirstName : {{ empDetails.FirstName }}
</div>
<div>
LastName : {{ empDetails.LastName }}
</div>
<div>
Address : {{ empDetails.Address }}
</div>
</div>
</body>
</html>
output:
Note: If the controller name is misspelled than we can see the error as
Argument 'mycontrollername' is not a function,got undefined
What happens , if the name of the controller is misspelled.
We need to go to Developer Tools in the browser window.
The binding expression in the view will not be evaluated. i,e
What happened if the property name in the binding expression is misspelled.
It will return null or undefined.
We can write module, controller in a single line as shown below:
var myapp = angular.module("myapp", [])
.controller("mycontroller", function ($scope) {
var empDetails = {
FirstName: "Rajakonda",
LastName: "Uday kumar",
Address: "Hyderabad"
};
$scope.empDetails = empDetails;
});
Expression can be used in arithmetic operations as well.
<html ng-app>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div>
{{"Rajakonda" + " Uday Kumar"}}<br />
{{100 + 100 }}<br />
{{true + false}}<br />
{{10.23 + 10.32}}<br />
</div>
</body>
</html>
Output:
To declare a variable under angular js we use
The ng-init directive is used to declare AngularJS application variables of any data type.
The ng-init directive can be used to initialize variables in AngularJS application.
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body >
<div ng-app ng-init="message='Hello World!';amount= 104000;rateOfInterest=10.5;duration=10;myArr=[100, 200]; person={ firstName:'RajakondaUday',lastName :'Kumar'}">
{{ (amount * rateOfInterest * duration)/100 }}<br />
{{myArr[1]}} <br />
{{message}} <br />
{{person.firstName + " " + person.lastName}}
</div>
</body>
</html>
Output:
Use of ng-src Directive:
I want to display a image on the page, so in the angular js we have to use this directive.
Note:When using a binding expression in the image src results in the 404 Error.
Example :
<html ng-app="myapp">
<head>
<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
</head>
<body>
<div ng-controller="mycontroller">
<div>
First Name : {{ actor.FirstName }}
</div>
<div>
Address : {{ actor.Address }}
</div>
<div>
<img src="{{ actor.img }} " />
</div>
</div>
</body>
</html>
Output:
Now, it is working fine without any Errror 404,But in the developer Tools we can see that.
The reason we are getting this 404 Error is because of Binding Expression which we are using.
As soon as the DOM is parsed a request is issued, at that time angular js binding expressions is not evalued(Which is an invalid path) and it returns 404. As we don't have any image at that point. And the second request is made as soon as the binding expression is evaluated, we get the correct path and the image is loaded correctly. So they are two request made.
To Fix 404 Errror we use ng-src directive.
This means the request is used only after the angular js binding expression is evaluated.
Two-Way Data Binding
It keeps the model and view sync all the times. That is change in the model , will update the view, and change in the view will update the model.
Example:
<html ng-app>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-init="firstName='Rajakonda Uday'">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
</body>
</html>
In the above example,{{ firstName }} expression is an AngularJS data binding expression
ng-init: we have initialized a variable firstname with the value Rajakonda Uday
{{ firstName }} is bound with ng-model="firstName".
output:
Now, if a i enter anything in the texbox it will display the same value , as shown above.
Example 2:
Two text boxes bound together.
<html ng-app>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-init="quantity=7;price=264">
<h2>Cost Calculator</h2>
Quantity: <input type="number" ng-model="quantity">
Price: <input type="number" ng-model="price">
<p><b>Total in rupees:</b> {{quantity * price}}</p>
</div>
</body>
</html>
ng-init="quantity=7;price=264": These are the initialization of the variables.
quantity is bound with the model==>ng-quantity
price is bound with the model==>ng-price
Output:
Example :
Write the below java script code in the new file:
/// <reference path="angular.min.js" />
var myapp = angular.module("myapp", [])
.controller("mycontroller", function ($scope) {
$scope.message = "Rajakonda Uday Kumar";
});
<html ng-app="myapp">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>
<div ng-controller="mycontroller">
<input type="text" ng-model="message"> <br />
{{message}}
</div>
</body>
</html>
Output:
ng-model directive can be used in any of the following
input
select
textarea
We can also have a complex object as shown in below example:
Example:
<html ng-app="myapp">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>
<div ng-controller="mycontroller">
<table>
<tr>
<td>First Name</td>
<td>
<input type="text" ng-model="employee.FirstName"></td>
</tr>
<tr>
<td>Last Name
</td>
<td>
<input type="text" ng-model="employee.LastName"></td>
</tr>
</table>
<table>
<tr>
<td>First Name</td>
<td>{{employee.FirstName }} </td>
</tr>
<tr>
<td>Last Name
</td>
<td>{{ employee.LastName }} </td>
</tr>
</table>
</div>
</body>
</html>
Output:
I want to display a image on the page, so in the angular js we have to use this directive.
Note:When using a binding expression in the image src results in the 404 Error.
Example :
<html ng-app="myapp">
<head>
<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
</head>
<body>
<div ng-controller="mycontroller">
<div>
First Name : {{ actor.FirstName }}
</div>
<div>
Address : {{ actor.Address }}
</div>
<div>
<img src="{{ actor.img }} " />
</div>
</div>
</body>
</html>
Output:
Now, it is working fine without any Errror 404,But in the developer Tools we can see that.
The reason we are getting this 404 Error is because of Binding Expression which we are using.
As soon as the DOM is parsed a request is issued, at that time angular js binding expressions is not evalued(Which is an invalid path) and it returns 404. As we don't have any image at that point. And the second request is made as soon as the binding expression is evaluated, we get the correct path and the image is loaded correctly. So they are two request made.
To Fix 404 Errror we use ng-src directive.
This means the request is used only after the angular js binding expression is evaluated.
AngularJS Data Binding:
It is very useful and powerful feature used in software development.
It acts as a bridge between the view and business logic of the application.Two-Way Data Binding
It keeps the model and view sync all the times. That is change in the model , will update the view, and change in the view will update the model.
Example:
<html ng-app>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-init="firstName='Rajakonda Uday'">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
</body>
</html>
In the above example,{{ firstName }} expression is an AngularJS data binding expression
ng-init: we have initialized a variable firstname with the value Rajakonda Uday
{{ firstName }} is bound with ng-model="firstName".
output:
Now, if a i enter anything in the texbox it will display the same value , as shown above.
Example 2:
Two text boxes bound together.
<html ng-app>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-init="quantity=7;price=264">
<h2>Cost Calculator</h2>
Quantity: <input type="number" ng-model="quantity">
Price: <input type="number" ng-model="price">
<p><b>Total in rupees:</b> {{quantity * price}}</p>
</div>
</body>
</html>
ng-init="quantity=7;price=264": These are the initialization of the variables.
quantity is bound with the model==>ng-quantity
price is bound with the model==>ng-price
Output:
Example :
Write the below java script code in the new file:
/// <reference path="angular.min.js" />
var myapp = angular.module("myapp", [])
.controller("mycontroller", function ($scope) {
$scope.message = "Rajakonda Uday Kumar";
});
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>
<div ng-controller="mycontroller">
<input type="text" ng-model="message"> <br />
{{message}}
</div>
</body>
</html>
Output:
ng-model directive can be used in any of the following
input
select
textarea
We can also have a complex object as shown in below example:
Example:
<html ng-app="myapp">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>
<div ng-controller="mycontroller">
<table>
<tr>
<td>First Name</td>
<td>
<input type="text" ng-model="employee.FirstName"></td>
</tr>
<tr>
<td>Last Name
</td>
<td>
<input type="text" ng-model="employee.LastName"></td>
</tr>
</table>
<table>
<tr>
<td>First Name</td>
<td>{{employee.FirstName }} </td>
</tr>
<tr>
<td>Last Name
</td>
<td>{{ employee.LastName }} </td>
</tr>
</table>
</div>
</body>
</html>
Output:
Note:
Expressions should be written inside double braces {{expression}}.They can also be written inside a directive that is ng-bind directive.
Expressions should be written inside double braces {{expression}}.They can also be written inside a directive that is ng-bind directive.
| It binds the content of an html element to application data. |
Thanks for providing the information.
ReplyDeleteAngular JS Online training
Angular JS training in hyderabad
good post you shared thanks
ReplyDeleteFull Stack Training in Chennai | Certification | Online Training Course | Full Stack Training in Bangalore | Certification | Online Training Course | Full Stack Training in Hyderabad | Certification | Online Training Course | Full Stack Training in Pune | Certification | Online Training Course | Full Stack Training | Certification | Full Stack Online Training Course