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
Using Expressions as a directive attribute
Using Expressions as literals/variables
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.
Some Limitations of expressions are:
- AngularJS Expressions cannot be any conditional or looping statements
- AngularJS Expressions doesn’t permit declaring a function
- Regular Expressions cannot be used with Expressions (use ng-patter instead)
- New Object creation cannot be done inside Expression
- 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
AngularJS Expressions
Enter First Number :
Enter Second Number :
Select Operator :
Addition Result is {{firstNumber + secondNumber}}
Subtraction Result is {{firstNumber - secondNumber}}
Multiplication Result is {{firstNumber * secondNumber}}
Division Result is {{firstNumber / secondNumber}}
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.
Here input type number is used to accept the first number firstNumber from the user.
Here input type number is used to accept the second number secondNumber from the user.
Here, dropdown gives different operation options to users like add, subtract, multiply, and divide.
Based on which Operation is selected from the Dropdown, That operation is evaluated in an expression. Output: Output1: Enter First and Second Number Output2: Select Add Operator and check Addition Result Output3: Select Multiply Operator and Validate Multiplication Result Output4: Select Divide Operator and Validate Division Result Example #2 Using Operators as Expressions Index.html Script.js 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. Here input type number is used to accept the first number firstNumber from the user. Here input type number is used to accept the second number secondNumber from the user. Here, dropdown gives different operation options to users like add, subtract, multiply, and divide. 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 Output2: Select Add Operator and check Addition Result Output3: Select Multiply Operator and Validate Multiplication Result Output4: Select Divide Operator and Validate Division Result 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. 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 – The post AngularJs expressions appeared first on EDUCBA.
AngularJS Expressions
Enter First Number :
Enter Second Number :
Select Operator :
Final Result is {{finalVal}}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;
}
}
});Conclusion
Recommended Articles
This post first appeared on Best Online Training & Video Courses | EduCBA, please read the originial post: here
