AngularJS Expressions: AngularJS includes the ability to place data expressions inside of HTML elements. AngularJS evaluates expressions and dynamically projects the result to a client’s view. Since expressions are tied to the scope, the expression can utilize values in the scope.
AngularJS Expressions Syntax
As the data model changes, so do the values of the expression. Expressions can be enclosed inside double braces: {{ expression }}. They can also be written inside of a directive:
ng-bind="expression"
Once expressions are executed, the controller sends the results to the HTML location where the expression is written. Like JavaScript expressions, these can include literals, operators, and variables.
AngularJS Expressions Example
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app>
<p>Example Expression: {{10 - 8 }}</p>
</div>
</body>
</html>
Angular JS Expressions Example Output
Angular Expressions vs. JavaScript Expressions
Angular expressions are like JavaScript expressions with the following differences.
Context: JavaScript expressions are interpreted globally throughout the application. AngularJS
expressions are evaluated within the scope of an object
Trying to evaluate undefined properties: In JavaScript results in “ReferenceError” or “TypeError.” AngularJS expression evaluation simply results in “undefined” and “null.”
No Control Flow Statements: AngularJS does not have these common programming expressions:
“conditionals”, “loops”, and “exceptions”
No Function Declarations: Functions cannot be declared in AngularJS expressions, not even within the ng-init directive.
For more complex JavaScript code, you can create a controller method that is initiated from the client view.