EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login
Home Software Development Software Development Tutorials AngularJS Tutorial AngularJs expressions
Secondary Sidebar
AngularJS Tutorial
  • AngularJS Basic and Advance
    • What is AngularJS
    • Career In AngularJS
    • Uses of Angular JS
    • AngularJS Architecture
    • Angular JS Application
    • AngularJS Application
    • AngularJS Filter Array
    • AngularJS ng-style
    • AngularJs ng init
    • AngularJs ng-repeat
    • AngularJs ng-change
    • AngularJs ng-options
    • AngularJs expressions
    • AngularJs onclick
    • AngularJS ng-show
    • AngularJs ng-include
    • Scope in AngularJS
    • AngularJS ng-if
    • AngularJS Number Filter
    • AngularJS Date Filter
    • AngularJS ng-class
    • AngularJS ng-model
    • AngularJS ng-disabled
    • AngularJS Custom Filter
    • AngularJS Validation
    • AngularJS Filters
    • Controllers in AngularJS
    • AngularJS Animations
    • AngularJS Services
    • AngularJS Events
    • AngularJS Versions
    • AngularJS Directives
    • AngularJS Unit Testing
    • AngularJS with Bootstrap
    • AngularJS UI Bootstrap
    • AngularJS Routing Example
  • Interview Question
    • Angular JS Interview Questions

AngularJs expressions

AngularJs expressions

Introduction to AngularJs expressions

AngularJS Expressions are like small JavaScript code that can be written in HTML view using interpolations (double curly braces) and the AngularJS directive as an attribute of the directive. AngularJS resolves these expressions and returns the result exactly at the place where the expression was written. These expressions can be String literals, operators, or variables. AngularJS expressions are just like JavaScript expressions but with few Enhancements.

Syntax

Using in HTML view

Using Expressions as operators

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

<div> AngularJS expression Example 1 : {{ 10 - 5 }} </div>

Using Expressions as a directive attribute

<button ng-click=”expressionFunc”> AngularJS expression Example 2 </button>

Using Expressions as literals/variables

<div> AngularJS expression Example 1 : {{ name + ‘ ‘ + age }} </div>

How do Expressions work in AngularJS?

In Expressions are Just like JavaScript, small code snippets evaluated directly in HTML view using either interpolations or directive attributes. These expressions are always binded to the scope of the HTML and cannot be evaluated outside the scope. Expressions can contain literals, operators, variables, or directive attributes where a function can be called to evaluate the expression.

Another way of using AngularJS expression with complex logic is by making a function call from the HTML view and defining the function in the controller. $eval () method can be directly used in the HTML view to evaluate your expression

Another advantage of using Expressions is that filters can also be used, which can be a user-defined filter or AngularJS in-built filters. If the Expression evaluation throws some error, then AngularJS handles it internally and returns undefined or null based on the error that occurred.

All in One Software Development Bundle(600+ Courses, 50+ projects)
Python TutorialC SharpJavaJavaScript
C Plus PlusSoftware TestingSQLKali Linux
Price
View Courses
600+ Online Courses | 50+ projects | 3000+ Hours | Verifiable Certificates | Lifetime Access
4.6 (86,502 ratings)

Some Limitations of expressions are:

  1. AngularJS Expressions cannot be any conditional or looping statements
  2. AngularJS Expressions doesn’t permit declaring a function
  3. Regular Expressions cannot be used with Expressions (use ng-patter instead)
  4. New Object creation cannot be done inside Expression
  5. Comma, Void, or bitwise Operators cannot be used in Expression

Examples of AngularJs expressions

Here we discuss the following examples mention below

Example #1

Using Operators as AngularJS Expressions

Index.html

<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller='ExpressionsController'>
<h2> AngularJS Expressions</h2>
<div>
Enter First Number : <input type="number" ng-model="firstNumber"/>
<br><br>
Enter Second Number : <input type="number" ng-model="secondNumber"/>
<br>
<br>
Select Operator : <select ng-model="selectedOp" ng-options="op for op in operators">
</select>
<br>
<div ng-if="selectedOp === 'Add'">
Addition Result is {{firstNumber + secondNumber}}
</div>
<div ng-if="selectedOp === 'Subtract'">
Subtraction Result is {{firstNumber - secondNumber}}
</div>
<div ng-if="selectedOp === 'Multiply'">
Multiplication Result is {{firstNumber * secondNumber}}
</div>
<div ng-if="selectedOp === 'Divide'">
Division Result is {{firstNumber / secondNumber}}
</div>
<br>
</div>
</div>
</body>
</html>

Script.js

angular.module('app', [])
.controller('ExpressionsController', function ($scope) {
$scope.operators = ["Add", "Subtract", "Multiply", "Divide"];
});

The above example shows how easily expressions are used in an HTML view to evaluate Operators and return the result exactly at the place where the expression is written.

<input type="number" ng-model="firstNumber"/>

Here input type number is used to accept the first number firstNumber from the user.

<input type="number" ng-model="secondNumber"/>

Here input type number is used to accept the second number secondNumber from the user.

<select ng-model="selectedOp" ng-options="op for op in operators">

Here, dropdown gives different operation options to users like add, subtract, multiply, and divide.

<div ng-if="selectedOp === 'Add'"> Addition Result is {{firstNumber + secondNumber}}

Based on which Operation is selected from the Dropdown, That operation is evaluated in an expression.

Output:

Output1: Enter First and Second Number

AngularJs expressions output 1

Output2: Select Add Operator and check Addition Result

AngularJs expressions output 2

Output3: Select Multiply Operator and Validate Multiplication Result

AngularJs expressions output 3

Output4: Select Divide Operator and Validate Division Result

AngularJs expressions output 4

Example #2

Using Operators as Expressions

Index.html

<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller='ExpressionsController'>
<h2> AngularJS Expressions</h2>
<div>
Enter First Number : <input type="number" ng-model="firstNumber"/>
<br><br>
Enter Second Number : <input type="number" ng-model="secondNumber"/>
<br>
<br>
Select Operator : <select ng-model="selectedOp" ng-options="op for op in operators">
</select>
<br>
<br>
<button ng-click="evaluateExpression()">Submit</button>
<br>
<br>
Final Result is {{finalVal}}
<br>
</div>
</div>
</body>
</html>

Script.js

angular.module('app', [])
.controller('ExpressionsController', function ($scope) {
$scope.operators = ["Add", "Subtract", "Multiply", "Divide"];
$scope.evaluateExpression = function () {
if ($scope.selectedOp === 'Add') {
$scope.finalVal = $scope.firstNumber + $scope.secondNumber;
}
if ($scope.selectedOp === 'Subtract') {
$scope.finalVal = $scope.firstNumber - $scope.secondNumber;
}
if ($scope.selectedOp === 'Multiply') {
$scope.finalVal = $scope.firstNumber * $scope.secondNumber;
}
if ($scope.selectedOp === 'Divide') {
$scope.finalVal = $scope.firstNumber / $scope.secondNumber;
}
}
});

The above example shows how easily expressions are used in directive attribute, and complex logic can be written in the controller, which can be invoked from HTML view in the ng-click attribute.

<input type="number" ng-model="firstNumber"/>

Here input type number is used to accept the first number firstNumber from the user.

<input type="number" ng-model="secondNumber"/>

Here input type number is used to accept the second number secondNumber from the user.

<select ng-model="selectedOp" ng-options="op for op in operators">

Here, dropdown gives different operation options to users like add, subtract, multiply, and divide.

<button ng-click="evaluateExpression()">Submit</button>

Here with the click of the Submit Button, the evaluate expression function is called, which is defined in the controller.

Final Result is {{finalVal}}

Once the result is evaluated, the final value can be seen here

Output1: Enter First and Second Number

output 5

Output2: Select Add Operator and check Addition Result

output 6

Output3: Select Multiply Operator and Validate Multiplication Result

output 7

Output4: Select Divide Operator and Validate Division Result

output 8

Conclusion

AngularJS Expressions are very useful in the application, which comes with many pros and cons. It makes the small script coding easier as it can be directly done in the HTML view as well as complex logic can be evaluated in the controller. There are different types of expressions and will always be used in Apps, so knowing them is a must.

Recommended Articles

This is a guide to AngularJs expressions. Here we discuss How Expressions works in AngularJS and Examples along with the outputs. You may also have a look at the following articles to learn more –

  1. Angular Time Picker
  2. AngularJS ng-disabled
  3. AngularJS ng-class
  4. AngularJS Filters
0 Shares
Share
Tweet
Share
Primary Sidebar
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2022 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA
Free Software Development Course

C# Programming, Conditional Constructs, Loops, Arrays, OOPS Concept

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more