AngularJS expressions

Angular expressions are JavaScript-like expressions which binds data to HTML.

It is written inside double curly braces {{}}.

      {{expressions }}

It contain literals, operators, and variables.

Example 1.

           {{ 10 + 5 }}

The above {{ 10 + 5 }} will give result as 15.

AngularJS resolve the expression and return the result.

If you remove ‘data-ng-app’ from <div> tag. It’ll not take the reference from angular and it doesn’t resolve the expression. Instead it’ll return expression as it is.

‘data-ng-app’ is an Angular Directive. Directives in AngularJS are extended HTML. There are several in-built directives provided by AngularJS.

Example:

ng-app, ng-init, ng-model etc.

You can check the link below for directives in details:

https://docs.angularjs.org/guide/directive

I’ll explain directive in details in later posts.

Example 2.

<div data-ng-app="" data-ng-init="quantity=100; cost=5">

       Total: {{ quantity * cost }}

</div>

Here In ‘data-ng-init’ directive I am assigning quantity as 100 and cost as 5.

And later in expression I am multiplying quantity with cost to get total cost using {{}}.

I have shown you some of numeric expression resolved by AngularJS.

Now i'll show you some string manipulation by AngularJS.

Example 3.

    <div data-ng-app="" data-ng-init="firstName='kamal';lastName='Das'">

      <p>The name is <span data-ng-bind="firstName + ' ' + lastName"></span></p>

   </div>

Here, I am initilizing the first name and last name as 'kamal' and 'das' respectively.

And using 'data-ng-bind'  displaying the full name.

Example 4

<div data-ng-app="" data-ng-init="person={firstName:'kamal',lastName:'Das'}">

        <p>The name is {{ person.lastName }}</p>

 </div>

Here, I am initilizing the first name and last name as 'kamal' and 'das' respectively of person object  using data-ng-init directive. And accessing the persons 'lastname' using expression

 {{ }} .

So these are the example of expessions in AngularJS.