The complete AngularJS tutorial for beginners. We provide an easy way to learn AngularJS in this tutorial.

Saturday, 16 July 2016

AngularJS Expressions - The Way of Using Expressions

with 0 Comment
AngularJS- Expressions

Angularjs Expressions are used to bind the data or values to the HTML page. These angularjs expressions are written inside two curly braces, this is similar to javascript expression or snippets. But there are a differents between angularjs expression and normal javascript expressions. This is an effort to bring JavaScript like functionalities, such as operators, parameters, conditions etc in HTML.
Angularjs Expressions
Angularjs Expressions
                           
In angularjs $parse service processes these angularjs expressions very effectively.


Difference between angularjs Expressions and normal javascript expressions:

  • We can write Angularjs expressions within a HTML page but this is not possible in javascript. 
  • You Can't make regular expressions from inside AngularJS expressions. This is to stay away from complex model transformation logic inside formats. Such rationale is better put in a controller or in a committed filter where it can be tested properly.
  • You can't compose a control flow statements in an expression. The purpose for this is center to the Angular logic that application rationale ought to be in controllers, not the views.
  • JavaScript expressions do not support filters,but in AngularJS expressions supports filters.

These are all the main differents between angularjs expression and javascript expression.

Syntax of angularjs expression:

{{ Expression }}
Angularjs Expression
Angularjs Expression
                                  
To display the results in a located or assigned place of the page we can use these expressions. Look at the following examples to get a better understanding of angularjs expression.


<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>
<body>
    <div ng-app>
       Our tutorial site <b> {{ 'Angularjstutorialsng.com' }} </b>
  </div>
</body>
</html>



Angularjs Expressions in different ways


Angularjs expressions will support string value as an expression, numbers, objects, and array. we will see some examples of the above expressions.

Angular Expressions Using String

<p>welcome {{employee.firstname + " " + employee.lastname}}!</p>

Angular Expressions Using Number

<p> Dress expenses : {{cost * quantity}} Rs</p>

Angular Expressions Using objects

<p>Roll No: {{employee.rollno}}</p>

Angular Expressions Using array

<p>Marks(Math): {{marks[3]}}</p>

Angularjs Expression Example with all the above types


<html> <head> <title>AngularJS Tutorial</title> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> </head> <body> <h1>Angularjs Expression example</h1> <div ng-app = "" ng-init = "quantity = 1;cost = 30; employee= {firstname:'Mahesh',lastname:'Parashar',rollno:101};marks = [80,90,75,73,60]"> <p>Hello {{employee= .firstname + " " + employee= .lastname}}!</p> <p>Dress expenses : {{cost * quantity}} Rs</p> <p>Roll No: {{student.rollno}}</p> <p>Marks(Math): {{marks[3]}}</p> </div> </body> </html>

AngularJS Expressions One-time binding

In Angularjs version 1.3, Angular produce another attribute, called the One-time binding, surprisingly. For the first time you utilize "::"  in an expression, it will make one-time binding with values. What is the use of this feature? It is not extremely straightforward for the beginners to understand, we'll clarify it.

Like whatever other application, an Angularjs application too may have numerous elements, and we bind these elements with information or data. The Angularjs $watch() API keeps a watch on every binding. It runs a loop through every one of the ties, searching for information changes. These loops can expand important resources if at any stage a perspective contains numerous data bindings.


0 comments:

Post a Comment