Expressions of AngularJS

0
218

AngularJS expressions are used to muddles application data into html.

Basically AngularJS behaves exactly same way as ng-bind AngularJS directives.

Data of AngularJS expression is “output” at the spot of where it is applied on your web application page.

We have four ways AngularJS expression can be displayed

  1. AngularJS with Number expression
  2. AngularJS with String expression
  3. AngularJS with Object expression
  4. AngularJS with Array expression

Main basic Example of AngularJS Expression

<html ng-app>
   <head>
      <title>AngularJS Expressions</title>
   </head>
        <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   <body>
      <h1>My Application</h1>


      <div ng-init = "quantity = 1;cost = 45; student = {firstname:'Pete',lastname:'Shopinson',rollno:210};marks = [70,20,55,83,40]">
         <p>Hi {{student.firstname + " " + student.lastname}}!</p>
         <p>Books Expenditure : {{cost * quantity}} $USD</p>
         <p>Roll No: {{student.rollno}}</p>
         <p>Marks(English): {{marks[4]}}</p>

      </div>

   </body>
</html>

Explanation of the example

AngularJS Expression that depicts an expression with string:

<p>Hi ❴❴student.firstname + " " + student.lastname❵❵!</p>

AngularJS Expression that depicts an expression with number:

<p>Books Expenditure : ❴❴ cost * quantity ❵❵$USD</p>

AngularJS Expression that depicts an expression with object:

<p>Roll No: ❴❴student.rollno❵❵</p>

AngularJS Expression that depicts an expression with Array:

<p>Marks(Math): ❴❴ marks[3]❵❵;</p>
Output of the example above
[sc name=”AngularJS Expressions Example”]

More examples

Below are other examples that shows angularJS expression and will help you understand it better.

#1 AngularJS Expression that depicts an expression with string:

CodesResult
<section ng-init="firstName='Mainlion';lastName='Shopinson'">
<p>My fullname is ❴❴ firstName + " " + lastName }}</p>
</section>
My fullname is Mainlion Shopinson

Alternatively

Since ng-bind is same as the angularJS expression

CodesResult
<section ng-init="firstName='Mainlion';lastName='Shopinson'">
<p>My fullname is <span ng-bind="firstName + ' ' + lastName"></span></p>
</section>
My fullname is Mainlion Shopinson

#2 AngularJS Expression that depicts an expression with number:

CodesResult
<section ng-init="quantity=5;cost=7">
<p>Total cost: ❴❴ quantity * cost }} $USD</p>
</section>
Total Cost: 35 $USD

Alternatively

Since ng-bind is same as the angularJS expression

CodesResult
<section ng-init="quantity=5;cost=7">
<p>Total cost: <span ng-bind="quantity * cost"></span> $USD</p>
</section>
Total Cost: 35 $USD

#3 AngularJS Expression that depicts an expression with Array:

CodesResult
<section ng-init="points=[3,6,9,12,15]">

<p>2<sup>nd</sup> result is ❴❴ points[1] }}</p>

</section>
 2nd result is 6

Alternatively

Since ng-bind is same as the angularJS expression

CodesResult
<section ng-init="points=[3,6,9,12,15]">
<p>2<sup>nd</sup> result is <span ng-bind="points[1]"></span></p>
</section>
2nd result is 6

#4 AngularJS Expression that depicts an expression with Object:

CodesResult
<section ng-init="person={firstName:'Mainlion',lastName:'Shopinson'}">
<p>Name is ❴❴ person.firstName }}</p>
</section>
Name is Mainlion

Alternatively

Since ng-bind is same as the angularJS expression

CodesResult
<section ng-init="person={firstName:'Mainlion',lastName:'Shopinson'}">
<p>Name is <span ng-bind="person.firstName"></span></p>
</section>
Name is Mainlion

LEAVE A REPLY

Please enter your comment!
Please enter your name here