AngularJs Number, String, Object and Array expressions

AngularJs Expressions

I am going to share the AngularJs expressions and the expressions can be number, string, object and array.

Before proceeding with what is expressions in AngularJs, Let us put some light on what is expression in general term of programming say JavaScript. So, expression is something which we write to perform or achieve something. We can understand this in this way – suppose we have been given two numbers 5 and 7 and someone asked us to add them, then what would we do. We will write 5+7 to get the value of this. So writing “5+7” is actually an expression that will resolved a value and that will be 12.

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

Now the agenda - what is expression in AngularJs world. Well, unlikely in JavaScript Expression contains the similar logic. In AngularJs expressions are used to bind data to HTML template.
In AngularJs expression are basically the valid line of code that usually written in double curly braces i.e. {{ }}.  

The expressions can be further classified as:-

There are two types of expression: those that assign value to a variable and those who itself hold some values.

In AngularJs expression can be classified in following types:-
1.      Number Expressions
2.      String Expressions
3.      Object Expressions
4.      Array Expressions

Before moving in details of the above we will see the limitation of the AngularJs expression
1.      We cannot use control flow statements in AngularJs like conditional, loops and exceptions.
2.      We cannot declare functions in AngularJs expressions. Even in ng-init also we cannot declare functions.
3.      In AngularJs expression we cannot create regular expressions.
4.      We cannot use comma (,) or void in AngularJs expressions.

Besides of these limitations if we want to perform complex JavaScript code then we will first make a controller and call it from the view.

Number Expression: -

As the term itself is stating that if any expression is using the number and the operators are used (like +, -, *, % etc). These all are number expressions. 

Example:-

myApp.controller("expressionController"function($scope){
            $scope.var1 10;
            $scope.var2 20
});

And the view:–
<div ng-controller="expressionController">                               
         <p>The resulis : {{var1 + var2}}</p>
</div>

On Browser it will show like –

The result is : 30

String Expressions: -

The same way string expression also the unit of code to perform operations on string values, example code :–


myApp.controller(
"expressionController"function($scope){
            $scope.var1 "John";
            $scope.var2 "Michael";
});

And the view (same) :–

<div ng-controller="expressionController">                               
    <p>hello: {{var1 +" "+ var2}}</p>
</div>

And this will show like below in browser –

hello: John Michael


Object Expressions:-

Object expressions basically hold object properties in them and the same way then evaluates at the view where they are used. Ex – 


myApp.controller(
"expressionController"function($scope){
            $scope.var1 {key1:'value1',key2:'value2',key3:'value3'};
           
});

And the view will be like: – 

<div ng-controller="expressionController">                               
<p>pure JSON object conatins key value pairs as key1 : {{var1.key1}} , key2 : {{var1.key2}} and key3 : {{var1.key3}}</p>
</div>

I hope this is very easy to understand.

Array Expressions: 

After having look at the above three type of expression now we can easily say that the array expression are also the expression that hold an array. Let’s see the example to understand this well: – 


myApp.controller(
"expressionController"function($scope){
            $scope.name "Raja";
            $scope.marks[70,75,80,65];
           
});

And the view:– 

<div ng-controller="expressionController">       
            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>

Note: For more information about the expressions and operators please go through below MDN link –



I hope this is very easy to understand.

About Blogger

ANIL SINGH

Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
http://www.code-sample.com
http://www.code-sample.xyz

    Blogger Comment
    Facebook Comment

1 comments:

  1. Awesome post!
    Thank you!! http://www.code-sample.com/

    ReplyDelete

SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book