AngularJS From Basic To Expert – Day Two – Expression and Directives

Introduction

In the previous article of AngularJS from basic to expert -Day one, we have learned what is AngularJS and we have seen some basics of AngularJS and used AngularJS in our demo application.

In this article of AngularJS from basic to expert -Day Two, we will learn,

  • AngularJS Expressions.
  • Directives in AngularJS

So, I will explore them one by one and also will continue with our Angular JS demo application which we have used in the previous article. You can check the previous article here angulajs-basic-to-expert- Day One

AngularJS Expressions

Expression is our AngularJS code which is written inside the HTML. AngularJS uses double brackets {{ angular expression Code }} to write an expression. The AngularJS expression is evaluated or executed by AngularJS and returns the result at the same place. So, Expression is the way to express AngularJS code and give result inside the HTML.

AnguarJS binds our data to HTML by using the expressions. So, we can write AnguarJS expression inside {{ expressions}} or also, with the help of directives, like ng.bind=”Angular expressions”.

We can write an expression on number, string, object etc. Please check the below demo for example.

  1. <!DOCTYPE html>
  2. <html>
  3. “https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js”&gt;
  5. <body ng-app=“” ng-init=“Firstapp=’Hello fisrt angularjs application'”> Number expression example: 5+5 = {{ 5+5 }} </br> <span> {{ Firstapp }} </span>
  6.     <p>First Name: <input type=“text” ng-model=“firstName”></p>
  7.     <p>Last Name: <input type=“text” ng-model=“lastName”></p> string expression example: <span>full Name: {{ firstName + ” “ + lastName }} </span>
  8. </body>
  9. </html>

Output:

Directives in AngularJS

Directives extend your HTML tags by attaching with them. Directives attach specific behavior with HTML tag. AngularJS directives start with ng- prefix. AngularJS has a set of many built-in directives for many different functionalities. We also can create our own custom directive in AngularJS.

Directive reference from Angular.org, check here:

In our demo application, we have already used some of the directives.

  • ng-app directive – this is the first thing we add in our AngularJS application. It initializes our AngularJS application. ng-app directive defines the root element for the AngularJS application.
  • ng-init directive – It Initializes your application data. Ng-init sets the initial data or values for your application.In our demo application, we have used ng-init to assign some value to our Firstapp variable.
    1. <body ng-app=“” ng-init=“Firstapp=’Hello fisrt angularjs application'”>
  • ng-model directive – It binds the value of HTML controls to the application data. Ng-model bind AngularJS application data to HTML tags. It uses ng-model with some variable name that variable. That variable holds data to bind with HTML.

In our Demo application, we have used,

  1. <p>First Name: <input type=“text” ng-model=“firstName”></p>
  2. <p>Last Name: <input type=“text” ng-model=“lastName”></p>

String expression –

  1. <span >full Name: {{ firstName + ” “ + lastName }} </span>

ng-model=”firstName” is holding value for firstName and letter, displaying that firstName value. Ng-model provide two-way data binding. We will look model letter in detail.

ng-bind directive binds the AngularJS data to the HTML element with the value of a given variable, or expression. It behaves quite same as ng-model but difference is ng-bind provide one-way data binding.

ng-click directive raises the click event on the HTML control.

ng-Repeat directive is used for looping logic. Every programming language has loops like for loop, foreach loop. AngularJS has ng-repeat. It repeats HTML elements and clones the elements once for each item. If it is attached to the <tr> tag, then it will create many <tr> tags till loop ends.

Example:

  1. <table border=“1” ng-init=”fullNames=[{firstName:‘Arvind’,lastName:‘Singh’},{firstName:‘Risha’,lastName:‘Baghel’},
  3. {firstName:‘Janvi’,lastName:‘Baghel’}]”>
  4.     <tr>
  5.         <td>First Name</td>
  6.         <td>Last Name</td>
  7.     </tr>
  8.     <tr ng-repeat=“name in fullNames”>
  9.         <td>{{name.firstName}}</td>
  10.         <td>{{name.lastName}}</td>
  11.     </tr>
  12. </table>

There are many built-in directives in AngularJS. Please find all the directives listed here: AngularJS Directives

Demo application:

  1. <!DOCTYPE html>
  2. <html>
  3. “https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js”&gt;
  5. <body ng-app=“” ng-init=“Firstapp=’Hello fisrt angularjs application'”> <span ng-bind=“Firstapp”> </span></br> number expression example: 5+5 = {{ 5+5 }} </br>
  6.     <p>First Name: <input type=“text” ng-model=“firstName”></p>
  7.     <p>Last Name: <input type=“text” ng-model=“lastName”></p> string expression example with directives: <span>full Name: {{ firstName + ” “ + lastName }} </span></br> ng-repeat example:
  8.     <table border=“1” ng-init=”fullNames=[{firstName:‘Arvind’,lastName:‘Singh’},{firstName:‘Risha’,lastName:‘Baghel’},
  10. {firstName:‘Janvi’,lastName:‘Baghel’}]”>
  11.         <tr>
  12.             <td>First Name</td>
  13.             <td>Last Name</td>
  14.         </tr>
  15.         <tr ng-repeat=“name in fullNames”>
  16.             <td>{{name.firstName}}</td>
  17.             <td>{{name.lastName}}</td>
  18.         </tr>
  19.     </table>
  20. </body>
  22. </html>

In the above demo, I have used expressions, directives – ng-bind, ng-model, ng-repeat, and displayed the data in table.

Output

Summary

In this article, we have covered the basics of AngularJS expressions and directives. Now, we are ready to create our AngularJS MVC application. So, in the next article (Day 3), I will cover the following.

  • Databinding in AngularJS
  • Model in AngularJS
  • Module in AngularJS
  • Controller in AngularJS
  • Scopes in AngularJS

6 thoughts on “AngularJS From Basic To Expert – Day Two – Expression and Directives”

  1. Pingback: Angular JS from basic to expert – Module -Module – Controller – Day Three – Programing Thoughts
  2. Pingback: AngularJS from basic to expert – Scope – Data binding- Day – Four – Programing Thoughts
  3. Pingback: AngularJS from basic to expert -filters- Day – Five – Programing Thoughts

  4. You can definitely see your skills within the work you write. The sector hopes for even more passionate writers such as you who are not afraid to mention how they believe. At all times follow your heart.

    Liked by 1 person

    Reply

  5. Hi there! This is my first visit to your blog! We are a team of volunteers and starting a new initiative in a community in the same niche. Your blog provided us valuable information to work on. You have done a marvellous job!

    Liked by 1 person

    Reply

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.