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"
        }
    });
      
     

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

                  
                      //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;
            
                            })
                  
              

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

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

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

                           
                               

<!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>
                           
                       

                   
                       <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>
                   
               

                  
                      <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}}

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.

                  
                      <div ng-controller="clickme">

                <button class="btn-lg btn-primary" ng-click="alertt()">alert</button>

            </div>
                  
              

                   
            angmodule.controller('clickme',function($scope){
           $scope.alertt=function(){
             alert("nice !! you have almost done the angular js");
           }
               
           
       })