1 - AngularJS expressions can be written inside double braces: {{ expression }}.
2 - AngularJS expressions can also be written inside a directive: ng-bind = "expression" (both can use in script).
3 - AngularJS will resolve the expression, and return the result exactly where the expression is written.
AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables.
Example:
{{ 15 + 20 }} or {{ firstVar + " " + lastVar }}
Note: <script>
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js" </script> write before body of pages.
Example:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 15 + 20 }}</p> or
</div>
</body>
</html>
Output: My first expression: 35
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div >
<p>My first expression: {{ 15 + 20 }}</p> or
</div>
</body>
</html>
Output: My first expression: {{ 15 + 20 }}
Also you can use in place of ng-init = "" expression
Example:
1 -
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
or
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>
2 -
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
or
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>
Note: Using ng-init is not very common. You will learn a better way to initialize data in the chapter about controllers.
AngularJS Objects:
AngularJS objects are like JavaScript objects:
Example
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
Same example using ng-bind:
Example
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is <span ng-bind="person.lastName"></span></p>
</div>
Output: The name is Doe
AngularJS Arrays:
AngularJS arrays are using like JavaScript arrays:
Example
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>
Same example using ng-bind:
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is <span ng-bind="points[2]"></span></p>
</div>
Output: The third result is 19
AngularJS Expressions vs JavaScript Expressions:
2 - AngularJS expressions can also be written inside a directive: ng-bind = "expression" (both can use in script).
3 - AngularJS will resolve the expression, and return the result exactly where the expression is written.
AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables.
Example:
{{ 15 + 20 }} or {{ firstVar + " " + lastVar }}
Note: <script>
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js" </script> write before body of pages.
Example:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 15 + 20 }}</p> or
</div>
</body>
</html>
Output: My first expression: 35
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div >
<p>My first expression: {{ 15 + 20 }}</p> or
</div>
</body>
</html>
Output: My first expression: {{ 15 + 20 }}
Also you can use in place of ng-init = "" expression
Example:
1 -
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
or
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>
2 -
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
or
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>
Note: Using ng-init is not very common. You will learn a better way to initialize data in the chapter about controllers.
AngularJS Objects:
AngularJS objects are like JavaScript objects:
Example
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
Same example using ng-bind:
Example
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is <span ng-bind="person.lastName"></span></p>
</div>
Output: The name is Doe
AngularJS Arrays:
AngularJS arrays are using like JavaScript arrays:
Example
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>
Same example using ng-bind:
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is <span ng-bind="points[2]"></span></p>
</div>
Output: The third result is 19
AngularJS Expressions vs JavaScript Expressions:
- Like JavaScript expressions, AngularJS expressions can contain literals, operators, and variables.
- Unlike JavaScript expressions, AngularJS expressions can be written inside HTML.
- AngularJS expressions do not support conditionals, loops, and exceptions, while JavaScript expressions do.
- AngularJS expressions support filters, while JavaScript expressions do not.
No comments:
Post a Comment