AngularJS Directives

 What is AngularJS..??

• Open-source web application framework. 
• Library written in JavaScript.
• Maintained by Google and an AngularJS community of developers. 
• Distributed as a JavaScript file, and can be added to a web page with a <script> tag.
• Assist with creating single-page applications. 
• Require only HTML, CSS and JavaScript on the client side. 
• Reads HTML for additional custom tag attributes. 
• Extends HTML attributes with Directives which are in those custom attributes. 
• Binds data (input output parts of the page) to HTML with expressions.

Note: 

To add angular to the web page , use below URL with script tag.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">

</script>

As i mentioned you earlier AngularJS extends with Directives let's look at what are those Directieves.

AngularJS directives are HTML attributes with an "ng" prefix. Here are some directives.

• ng-app - defines the root element of an AngularJS application and will automatically initialize the app when a web page is loaded.
• ng-model - binds the value of HTML controls (input, select, textarea) to application data.
• ng-bin - binds application data to the HTML view.
• ng-init - defines initial values for an AngularJS application. 
• ng-repeat - repeats an HTML element.
  

   To get an idea about how directives are used i will show you an example.   

    Example 1 :

     
Example 2:

    
Example 3:

 

Note:

Here i have put only the very basic directives.If you want to follow more  AngularJS directives refer this link.

Angular Applications

• modules - deifne AngularJS applications using ng-app directive.
• controllers - control AngularJS applications using ng-controller directive..

 Example 1: AngularJS Module

 Note :
       
 Example 2: AngularJS Controller

Example 3: 

Note : 

Normally we put module and the controllers in separate JavaScript  files (myApp.js , myController.js ) and link them using script tag .