Post
Ask Question

Angular From Basic To Expert - Day Two

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 AngularJS demo application which we have used in the previous article. You can check the previous article here AngularJS from 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. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>  
  4.   
  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> </body>  
  8.   
  9. </html>  

Output

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: https://docs.angularjs.org/guide/directive

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'},  
  2.   
  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. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>  
  4.   
  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'},  
  9.   
  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>  
  21.   
  22. </html>  

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

Output

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  


Similar Articles