AngularJS directives are a combination of AngularJS template markups (HTML attributes or elements, or CSS classes) and supporting JavaScript code. The JavaScript directive code defines the template data and behaviors of the HTML elements.

AngularJS directives are used to extend the HTML vocabulary i.e. they decorate html elements with new behaviors and help to manipulate html elements attributes in interesting way.

There are some built-in directives provided by AngularJS like as ng-app, ng-controller, ng-repeat, ng-model etc.

The main role of these directives is explained as: 
- ng-app - Initialize the angular app. 
- ng-init - Initialize the angular app data. 
- ng-model - Bind the html elements like input, select, text area to angular app model.

You can create your own custom directive by using following syntax:
var app = angular.module('app', []); 
//creating custom directive syntax app.directive("myDir", function () { return {  restrict: "E", 
//define directive type like E = element, A = attribute, C = class, M = comment  scope: { //create a new child scope or an isolate scope 
 title: '@' //@ reads the attribute value,//= provides two-way binding, //& works with functions
 },template: "<div>{{ myName }}</div>",// define HTML markup 
   templateUrl: 'mytemplate.html', //path to the template, used by the directive    replace: true |   false, // replace original markup with template yes/no 
   transclude: true | false, // copy original HTML content yes/no 
   controller: function (scope) { //define controller, associated with the directive template //TODO: }, 
 link: function (scope, element, attrs, controller) {//define function, used for DOM manipulation //TODO: 
    } 
   } 
});

As an attribute
<span my-directive></span>

As a class
<span class="my-directive: expression;"></span>

As an element
<my-directive></my-directive>

As a comment
<!-- directive: my-directive expression -->

The restrict option in angular directive, is used to specify how a directive will be invoked in your angular app i.e. as an attribute, class, element or comment.
There are four valid options for restrict:

'A' (Attribute)- <span my-directive></span> 
'C' (Class)- <span class="my-directive:expression;"></span> 
'E' (Element)- <my-directive></my-directive> 
'M' (Comment)- <!-- directive: my-directive expression -->