Data Binding using Angular Expression in Html

Let's learn data binding with 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.

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"

Data Binding 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

Angular Expressions in HTML Code

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>
<p>Calculated amount is {{ 10 * 90 }} </p>

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>

Here is the result of angular expression in html code.

Calculated amount is {{ 10 * 90 }}

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
Learn Angular JS: JavaScript framework for single page application.
JavaScript Framework
Angular JS Examples | Join Asp.Net MVC Course