Hi all,

In this we will discuss about Directives. Directives are core features of AngularJS.

Directive is introduced as a new syntax. They are markers on a DOM element which have a special behavior to it. Just for an example only HTML don't know how a date picker will perform, so for that we need directives.

AngularJS directives controls the rendering of HTML inside an AngularJS application. You can implement your own directives too.

Here are main four types of directives:

• Element directives
  
• Attribute directives
  
• CSS class directives
  
• Comment directives
  

ng-app -

The directive initializes an AngularJS application. the ng-app describe in the root element for example in html or body start tag, and it tells angularJs that div or element are owner of angular application. Only one AngularJS application can be auto-bootstrapped per HTML document.

Example :-

copytext

<section ng-app="">
 
<p><input type="text" ng-model="name"></p>
<p>your name: {{ name }}</p>
 
</section> 

<section ng-app="">

<p><input type="text" ng-model="name"></p>
<p>your name: {{ name }}</p>

</section> 

ng-model -

Binds values of HTML controls like input, textarea, select to application data or in other way you can say this directive defines the model/variable to be used.

Example :-

copytext

 <div ng-app="">
 
<p>Name: <input type="text" ng-model="name"></p>
<p>Your name : {{ name}}</p>
 
</div> 

 <div ng-app="">

<p>Name: <input type="text" ng-model="name"></p>
<p>Your name : {{ name}}</p>

</div> 

ng-init -

This directive initialize the application data it means ng-init defines initial values for AngularJS app. usually we will not use ng-init instead of this we will use controller or module.

Example :-

copytext

<div ng-init="name=['mukul' , 'kant' , 'evon' , 'technologies']" >
      <ul>
        <li ng-repeat="names in name">{{names}}</li>
      </ul>
    </div>

<div ng-init="name=['mukul' , 'kant' , 'evon' , 'technologies']" >
      <ul>
        <li ng-repeat="names in name">{{names}}</li>
      </ul>
    </div>

ng-repeat

ng-repeat simply repeat a html element it means this works like a loop.

copytext

  <div ng-init="name=['mukul', 'kant','is','here']" >
      <ul>
        <li ng-repeat="names in name">{{names}}</li>
      </ul>
    </div>

  <div ng-init="name=['mukul', 'kant','is','here']" >
      <ul>
        <li ng-repeat="names in name">{{names}}</li>
      </ul>
    </div>

in this example li will repeat with all array data.

Tutorial 3- AngularJS Directives