AngularJS - SPLessons

AngularJS Expressions

Chapter 4

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

AngularJS Expressions

AngularJS Expressions

shape Description

An application data is binded to HTML view using AngularJS Expressions. There are a lot of differences between AngularJS expressions and JavaScript expressions. AngularJS has got its own mechanism to parse the expressions.

The expression has to be brought inside the double braces:{{expression}} and it will behave as ng-bind directive. In the present chapter, AngularJS Expression is explained with examples.

For these type of expressions, Interpolation directive is called, an alternative to ng-bind directive. So, the Interpolation directive binds or wraps the value of expression into HTML view.

shape Expression
Description

From the above figure, the interpolation directive is {{firstName + " " + lastName }}.


AngularJS Numbers

shape Example

AngularJS numbers are similar to JavaScript numbers.

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>AngularJS Numbers</title>
  </head>

<body>
  <h1>AngularJS Numbers</h1>
  <div ng-app="" ng-init="x=10;y=20">
    <p>Addition: {{ x + y }}</p>
    <p>Subtraction: {{ x - y }}</p>
    <p>Multiplication: {{ x * y }}</p>
    <p>Division: {{ x/y }}</p>
  </div>

  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
</body>

</html>

Output:

AngularJS Strings

shape Example

AngularJS strings are similar to JavaScript Strings.

<!DOCTYPE html>
<html lang="en-US">

  <head>
    <title>AngularJS Strings.</title>
    <script data-require="angular.js@1.3.14" data-semver="1.3.14" src="https://code.angularjs.org/1.3.14/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
  </head>

  <body>
    <h1>AngularJS Strings</h1>
    <div ng-app="" ng-init="firstName='Smith'; lastName='Watson';">
      <p>Full Name: {{firstName + " " + lastName }}</p>
    </div>
  </body>

</html>

Output:

AngularJS Objects

shape Example

AngularJS objects are similar to JavaScript objects.

<!DOCTYPE html>
<html lang="en-US">

  <head>
    <title>AngularJS Objects</title>
    <script data-require="angular.js@1.3.14" data-semver="1.3.14" src="https://code.angularjs.org/1.3.14/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
  </head>

  <body>
    <h1>AngularJS Objects</h1>
    <div ng-app="" ng-init="person={firstName:'Smith',lastName:'Watson'}">
      <p>Full name is {{ person.firstName }}</p>
    </div>
  </body>

</html>

Output:

AngularJS Arrays

shape Example

AngularJS arrays are similar to JavaScript arrays.

<!DOCTYPE html>
<html lang="en-US">

  <head>
    <title>AngularJS Arrays</title>
    <script data-require="angular.js@1.3.14" data-semver="1.3.14" src="https://code.angularjs.org/1.3.14/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
  </head>

  <body>
    <h1>AngularJS Arrays</h1>
    <div ng-app="" ng-init="points=[1,2,3,3,5]">
      <p>The result is {{ points[2] }}</p>
    </div>
  </body>

</html>

Output:

Summary

shape Key Points

  • AngularJS expressions are expressed in double braces.
  • The Interpolation directive binds or wraps the value of expression into HTML view.For eg: {{firstName + ” ” + lastName }}