Directives are the important components of any Angular JS application. Although there are many directives built in angularjs, we often need to create application specific directives i.e. Custom directives. AngularJS directives are extended HTML attributes and starts with -ng.

These are few AngularJS directives:

ng-app initializes an angularJS apllication.
ng-init initializes application data.
ng-model binds values of HTML controls like input, textarea, select to application data.
ng-repeat repeats an HTML element.

Example-1

<div ng-app="" ng-init="firstName='Chris'">

<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>

</div> 

Example-2

<div ng-app="" ng-init="names=['Chris','Harry','Stephen']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

Custom Directives
It can be of following types:
1. A new HTML element(E)
2.An attribute on element(A)
3.As a Class(C)
4.As a Comment(M)

Example

 var app = angular.module('myapp', []);
     app.directive('hello', function() {
          return {
              restrict: 'AE',
              replace: 'true',
              template: '<h3>Hello there!!!!</h3>'  };
        });

In the above example there is code for directive hello. The app.directive() function registers a new directive in our module. The first argument to this function is directive name and the second argument is a function which returns a directive definition object. If directive has dependencies on external objects/services like $rootScope, $http, or $compile, they can be injected here. This directive can be used in html as an element or attribute or class like this.

<hello></hello>

or

<div hello></div>

or

<div class="hello"></div>

We have used these properties in directive definition object to configure directive.

restrict: This defines how a directive can be used as an html. In this case we have given it to AE that means the directive can be used as an html element or attribute.

template: This defines the HTML markup that will be generated when the directive is compiled and linked by Angular. This can not be a simple string. It can be complex, often involving other directives, expressions ({{ }}), etc. In most cases you want to use templateUrl instead of template. So, ideally you should place the template in a separate HTML file and make templateUrl point to it.

replace: This specifies if the generated template will replace the HTML element on which the directive is attached. In the above case we have used the directive as , and replace is set to true. After the directive is compiled, the produced output template replaces . The final output is <h3>Hello there!!!</h3>. If you set replace to false, the default, the output template will be inserted into the element on which the directive is invoked.