Dot Net Stuff

What is Angular JS Expressions? How Angular Js Expressions is different with JavaScript Expression?


If you have read Introduction of Angular JS and First Angular JS Application example. Than you should familiar with AngularJS Expressions. Angular JS expressions are very common concepts in Angular JS. Basically it is used to bind application data to html. In this article I am going to explain about Angular JS Expressions.

Angular JS Expressions:

Angular JS Expressions are used to bind application data to html. Means, that we whenever we want to show the data to user based on any model value or any calculation or any variable, we will use expressions to bind the data to html. Expressions are written inside double braces like {{ expression}}. Expressions behaves similar as that of ng-bind directives. AngularJS application expressions are pure javascript expressions and outputs the data where they are used.

Using numbers in Angular JS Expressions:

 

Percentage of passed students is : {{passed*100/total}} %

Using strings in Angular JS Expressions:

 

Hello {{student.firstname + " " + student.lastname}}, You are fail.

Using object in Angular JS Expressions:

 

Roll No: {{student.rollno}} is fail.

Using array in Angular JS Expressions:

 

Marks in English is : {{marks[3]}}
Marks in Hindi is : {{marks[2]}}

Angular Expressions vs. JavaScript Expressions

Angular expressions are like JavaScript expressions with the following differences:

  • Context: JavaScript expressions are evaluated against the global window. In Angular, expressions are evaluated against a scope object.
  • Forgiving: In JavaScript, trying to evaluate undefined properties generates ReferenceError or TypeError. In Angular, expression evaluation is forgiving to undefined and null.
  • No Control Flow Statements: You cannot use the following in an Angular expression: conditionals, loops, or exceptions.
  • No Function Declarations: You cannot declare functions in an Angular expression, even inside ng-init directive.
  • No RegExp Creation With Literal Notation: You cannot create regular expressions in an Angular expression.
  • No Comma And Void Operators: You cannot use , or void in an Angular expression.
  • Filters: You can use filters within expressions to format data before displaying it.

If you want to run more complex JavaScript code, you should make it a controller method and call the method from your view. If you want to eval() an Angular expression yourself, use the $eval() method.

Here we have our AngularJS Expression example:

Following example will show, how can we use above all the expressions in a html file. Let's create a html file named angularjs-expressions.html .

 

   <html>
         AngularJS Expressions Example - Dot Net Stuff
   <body>
        

Sample AngularJS Expressions Application

Hello {{student.firstname + " " + student.lastname}}, You are fail.

Percentage of passed students is : {{passed*100/total}} %

Roll No: {{student.rollno}} is fail.

Marks in English is : {{marks[3]}}
Marks in Hindi is : {{marks[2]}}

</body> </html>

Summary: In this article my focus is to explain the basic of expressions in AngularJS. Now you can create your first AngularJS sample using AngularJS CDN library. This article also focus on different types of expressions in AngularJS. I hope you will like this article and now you are able to start with AngularJS easily.

Keen to hear from you...!

If you have any questions related to what's mentioned in the article or need help with any issue, ask it, I would love to here from you. Please MakeUseOf Contact and i will be more than happy to help.

About the author

Anil Sharma is Chief Editor of dotnet-stuff.com. He's a software professional and loves to work with Microsoft .Net. He's usually writes articles about .Net related technologies and here to shares his experiences, personal notes, Tutorials, Examples, Problems & Solutions, Code Snippets, Reference Manual and Resources with C#, Asp.Net, Linq , Ajax, MVC, Entity Framework, WCF, SQL Server, jQuery, Visual Studio and much more...!!!

blog comments powered by Disqus