Free Web Development Online Tutorials, Learn to Code
Learn AngularJS, angularjs tutorial, angularjs directive, angularjs application, angularjs api

Angular Expressions Examples

Let's learn how to bind Angular expression in Html code. there are some certain way writing expression in Angular Js, so that Angular can resolve the expression and return the result.

Bind Angular Expressions in HTML Code

In AngularJS any expressions can be written inside double braces like {{ expression }} .
In model data binding we often write expressions with ng-bind attrbute like ng-bind="expression"

Angular expressions can easily be mixed with html code just like we used to write JavaScript expressions in html element, only thing you need to remember that any expression has to be under ng-app="", otherwise expression will not be able to evaluate the value

For example
If you try to write an expression outside the ng-app directive, that will be considered as plain HTML, without evaluating the expression

<script src="angular.min.js"> </script>
<div>
<p>Calculated amount is {{ 10 * 90 }} </p>
</div>

The result of above expression would be

Calculated amount is {{ 10 * 90 }}

Now if you write same expression under a ng-app directive, you will see the evaluated result

<div ng-app="" ng-init="quantity=10;unitpice=90">
Calculated amount is {{ 10 * 90 }}
  Or <span ng-bind="quantity * unitpice"> </span>
 </div>
Here is the result
Calculated amount is {{ 10 * 90 }}
Or

Note in above example, during initialization we have declared two variables and assign them some value and inside the expression we have calculated the value in two different ways,
1) using ng-bind and 2) using {{ }}


 
Angular JS Expressions

Othe JavaScript Framework
Angular JS Examples | Join Asp.Net MVC Course