Angular js

What is AngularJS

Angularjs is an open source JavaScript framework to develop web based applications. Angularjs is usually used to create Single Page Application. It is easy to code in AngularJS. Angular JS was build by google in 2011.


AngularJS Directives

Directives in angularJS extends HTML code to provide new behaviour.


ng-app Directives

ng-app directive is the beginning directive of angularJS. It is used to auto bootstrap angularJS application. We generally use this directive at root level like inside html tag or in body tag.

ng-model Directives

ng-model is used to bind input fields, select and textarea with model and we can use this model in page. Ng-model provides the facility of two-way data binding.


Controller in Angularjs

As we know angularjs support mvc architecture which stands for model view controller. In mvc view represents the user interface and model is the data.


ng-repeat in Angularjs

As we know angularjs support mvc architecture which stands for model view controller. In mvc view represents the user interface and model is the data.


ng-init in Angularjs

Ng-init directive is used to initialize a variable, which will allows evaluating an expression in given scope. According to angular official document, this directive is abused as it adds unnecessary business logic in the application. Still to evaluate an expression we required that directive.


ng-include in Angularjs

ng-include directive is used to add external html files into application. This directive helps us to create common page of website.


ng-hide and ng-show in Angularjs

These both directives ng-show and ng-hide are used to manage the visibility of html controls. Both directives take true and false value to display or hide the html control.


ng-if in Angularjs

Ng-if directive is condition based directive which removes or recreates the DOM portion according to condition.


ng-switch in Angularjs

Ng-switch is conditional directives which swap (show and hide) DOM elements according to expression. We use ng-switch-when to check conditions and ng-switch-default to put default condition.


ng-src in Angularjs

Ng-src directive is used to bind dynamic image url. When we use src at img tag it will not work properly as it will fetch image before angularjs replace expression with url and 404 error occurred.


ng-click in Angularjs


Ng-click directive provides the custom behaviour when an element is clicked. When elements clicked, it will call the event handler function, which bind to ng-click.


custom directive in Angularjs

angularJS provides us the facility to create our own directives which is called custom directives. We have to register this directive in a module. We create directives in camel case. However, when we apply in the html code we use hyphen (-). Custom directives are the function, which return JSON Objects.

         
          
               //custom directive
    var x=angular.module('m1',[]);
    x.directive('ngHello',function(){
        return{
            template:"hello world"
        }
    });
      
     

custom directive

ng-model

type:
show:

{{data}}

controller

In angularjs controller is javascript function object which works as a mediator between view and model. Controller collects data from Model and pass it to View, i.e html in this case.

                  
               //scope and controler
       var angmodule=angular.module('m1',[]).controller('course',function($scope){
           $scope.courseName='angular';
           $scope.fees='10000';
       });
          
        
           
              

output :


Course :{{courseName}}

Course fees :{{fees}}

multiple controler

                  
                      //custom directive
    var x=angular.module('m1',[]);
    x.directive('ngHello',function(){
        return{
            template:"hello world"
        }
    });
       //scope and controler
       var angmodule=angular.module('m1'[]).controller('course',function($scope){
           $scope.courseName='angular';
           $scope.fees='10000';
       });
       
       //another controller
       angmodule.controller('trainer',function($scope){
            var trainerDetail=[
                {name:"ashish",age:"23"},
                {name:"manish",age:"22"},
                {name:"satish",age:"21"},
                {name:"archana",age:"18"}
                
            ];
           $scope.trainerdata=trainerDetail;
            
                            })
                  
              

output :

trainer name trainer age
{{x.name}} {{x.age}}

ng repaet

As you can see that we have used ng-repeat at tr tag as we want to repeat tr tag accruing to data returned by the controller. ng-repeat syntax is almost similar to foreach loop.

                      
         //ng repeat exception
       angmodule.controller('arrray',function($scope){
       $scope.result=[1,2,4,4,5,6,7];
       });
                      
                  

ng-reapeat exception

duplicates in repeater are not allowed

for this we use this for repeation "z in result track by $index"

z in result track by $index

output :

{{z}}

ng-init

                  
    <body ng-app >
      <div>
      <input type="text" ng-model="number">
      <p>Square is {{number*number}} </p>
      </div>
      </body>
                 
                  

output :

Square is {{number*number}}

ng-init

Ng-init directive is used to initialize a variable, which will allows evaluating an expression in given scope. According to angular official document, this directive is abused as it adds unnecessary business logic in the application. Still to evaluate an expression we required that directive.

                   
     <div data-ng-init="name='Ashish Kumar'; empid=102 ">
    <p>{{name}}</p>
    <p>{{empid}}</p>
     </div>
                   
               

output :

{{name}}

{{empid}}

ng-include

ng-include directive is used to add external html files into application. This directive helps us to create common page of website. Internally tis feature is using JavaScript Ajax to load another page in homepage.


//nav.html
                           
                               
<!DOCTYPE html>
<html> <head>     <title>Untitled Document</title>     <meta charset="UTF-8">     <meta name="description" content="">     <meta name="keywords" content=""> </head> <body> <a href="">home</a> <a href="">about</a> <a href="">services</a> <a href="">tutorial</a> </body> </html>
                           
                               
<section data-ng-include="'nav.html'">   </section>
above html will load bellow

ng-hide and ng-show in angularjs

These both directives ng-show and ng-hide are used to manage the visibility of html controls. Both directives take true and false value to display or hide the html control.

 <label>
        <input type="checkbox" data-ng-model="textbox"> Show Div
    </label>
     <div style="height: 200px; width:200px;background: red;transition: 1s" data-ng-show="textbox"></div>

ng-if

Ng-if directive is condition based directive which removes or recreates the DOM portion according to condition. It evaluates expression as true or false. If ng-if evaluates to a false it will remove from the DOM element and if it is true, then element is reinserted into the DOM

Enter your number: -

Even Number

Odd Number

ng-switch

Ng-switch is conditional directives which swap (show and hide) DOM elements according to expression. We use ng-switch-when to check conditions and ng-switch-default to put default condition.

                   
                       <input type="text" data-ng-model="n1">
    <div data-ng-switch="n1">
        <div data-ng-switch-when="a">It is vowel</div>
        <div data-ng-switch-when="i">It is vowel</div>
        <div data-ng-switch-when="e">It is vowel</div>
        <div data-ng-switch-when="o">It is vowel</div>
        <div data-ng-switch-when="u">It is vowel</div>
        <div data-ng-switch-default>It is constant</div>
    </div>
It is vowel
It is vowel
It is vowel
It is vowel
It is vowel
It is constant

ng-src

Ng-src directive is used to bind dynamic image/audio/video/iframe url. When we use src at img tag it will not work properly as it will fetch image before angularjs replace expression with url and 404 error occurred.

                  
                      <section ng-controller='srcc'>
              <table border="1">
                  <tr><td>sno</td>
                      <td>id</td>
                      <td>name</td>
                      <td>age</td>
                      <td>image</td>
                  </tr>
                  <tr ng-repeat="m in con1 ">
                     <td>{{$index+1}}</td>
                     <td>{{m.id}}</td>
                     <td>{{m.name}}</td>
                     <td>{{m.age}}</td>
                     <td><img src='{{m.image}}' alt="{{m.name}}"></td>
                     
                  </tr>
              </table>
             
           </section>
                  
                      angmodule.controller("srcc",function($scope){
           $scope.con1=[
               {id:1,name:'Ashish',age:22,image:'img1.jpg'},
               {id:1,name:'Ashish1',age:23,image:'img2.jpg'},
               {id:1,name:'Ashish2',age:24,image:'img3.jpg'},
               {id:1,name:'Ashish3',age:20,image:'img4.jpg'},
           ]
       })
                  
              
sno id name age image
{{$index+1}} {{m.id}} {{m.name}} {{m.age}} {{m.name}}

ng-click

Ng-click directive provides the custom behaviour when an html element is clicked. When elements clicked, it will call the event handler function, which bind to ng-click.

//html
                  
                      <div ng-controller="clickme">
                <button class="btn-lg btn-primary" ng-click="alertt()">alert</button>
            </div>
//angular
                   
            angmodule.controller('clickme',function($scope){
           $scope.alertt=function(){
             alert("nice !! you have almost done the angular js");
           }
               
           
       })