We are providing online training of realtime Live project on Asp.Net MVC with Angular and Web API. For more information click here. If you have any query then drop the messase in CONTACT FORM

Thursday, February 1, 2018

What is Expression and how to use it in AngularJs

AngularJs Expression

The expression is something that we write to perform or achieve something. We can understand this in this way suppose we have two numbers 11 and 18 and someone asked us to add them, then what we would do. We will write 5 + 7 to get the value of this. So writing “11 + 18” is actually an expression that will add values and results will be 29.

So we can say that “expression is something (a valid unit of code) that resolved to a value”.

In AngularJs expressions are used to bind data to the HTML template.

In AngularJs expressions are basically the valid line of code that usually written in double curly braces i.e. {{ }}. The expressions can be further classified as two types of expressions that are assigned value to a variable and those who themselves hold some values.
Types of AngularJS Expressions

In AngularJs expression can be classified in the following types

a. Number Expressions

b. String Expressions

c. Object Expressions

d. Array Expressions

Limitation of the angular JS expression

  • We cannot use control flow statements in AngularJs like conditional, loops and exceptions.
  • We cannot declare functions in AngularJ's expressions. Even in ng-init also we cannot declare functions.
  • In AngularJs expression we cannot create regular expressions.
  • We cannot use comma (,) or void in AngularJs expressions.
Besides these limitations, if we want to perform complex JavaScript code then we will first make a controller and call it from the view.

Number Expressions Example in AngularJS

The operators (like, -, *, % etc) then those are called number expressions. We will see how to use number expression in angular js with example.

<html>

<head>

    <script type="text/javascript">

        var app = angular.module('numExpApp', [])

        app.controller("numExpController", function ($scope) {

            $scope.exp1 = 5;

            $scope.exp2 = 10

        });

    </script>

</head>

<body ng-app="'numExpApp'">

    <form id="form1">

        <div ng-controller="numExpController ">

            <div>Number Expression</div>

            <p>The Result is : {{exp1 + exp2}}</p>

        </div>

    </form>

</body>

</html>

Output: 15
String Expressions Example in AngularJS

The string expression in angularjs is a unit of code to perform operations on string values. We will see how to use string expressions in angularjs with examples.

<html>

<head>

    <script type="text/javascript">

        var app = angular.module('strExpApp', [])

        app.controller("strExpController", function ($scope) {

            $scope.exp1 = "Welcome to ";

            $scope.exp2 = "My Angular js Example"

        });

    </script>

</head>

<body ng-app='strExpApp'>

    <form id="form1">

        <div ng-controller=" strExpController ">

            <div>String Expression</div>

            <p>Hello: {{exp1+" "+exp2}}</p>

        </div>

    </form>

</body>

</html>

Object Expressions Example in AngularJS

The object expressions in angular js basically hold object properties in them and the same way then evaluates at the view where they are used. We will see how to use object expressions in angular js with example.

<html>
<head>
    <script type="text/javascript">
        var app = angular.module('objExpApp', [])
        app.controller("objExpController", function ($scope) {
            $scope.expression = {
                Key: ’Welcome’,
                Key: ’To My’,
                Key: ’AngularJs’
            }
        });
    </script>
    </head>

<body ng-app="'objExpApp'">
    <form id="form1">
         <div ng-controller="objExpController ">
            <div>
                espression.Key1 <br />
                espression.Key2 <br />
                espression.Key3
            </div>
        </div>
    </form>
</body>

</html>

Array Expressions Example in AngularJS

Array expressions in angularjs are the expression that holds an array and uses those array objects while evaluating array expressions in angularjs.

<html>


<head>

    <title>

        Array Expressions of AngularJs

    </title>

    <script type="text/javascript">

        var app = angular.module('arrExpApp', [])

        app.controller("arrExpController", function ($scope) {

            $scope.name = "Tutlane Student";

            $scope.marks = [70, 75, 80, 95];

        });

    </script>

</head>

<body ng-app='arrExpApp'>

    <form id="form1">

        <div ng-controller="arrExpController ">

            <div>Array Expression</div>

            Below is Marks obtained by <b>{{name}}</b> in different subjects are</br>

            <p>In Hindi he obtained <b>{{marks[0]}}</b> marks</p>

            <p>In English he obtained <b>{{marks[1]}}</b> marks</p>

            <p>In Physics he obtained <b>{{marks[2]}}</b> marks</p>

            <p>In Math he obtained <b>{{marks[3]}}</b> marks</p>

        </div>

    </form>

</body>

</html>

No comments: