Directives are the functions of javascript in Angularjs, the function can run when the DOM is loaded by the angular framework. By this new approach, Angularjs will let you to  create a new directive which could manuplate or modify DOM logicaly and simply, or create a new behavior in HTML.

Directives have the important role in Angularjs and it make Angular differ from most of javascript client side frameworks. With the help of directives, we do not have to write a long code to make a model class. We can create a simple model and use in angularjs that allows to create a javascript application by developers. There is also a option to create a custom directive in angular, some are simple to built and some are tangled. Directive are custom HTML tags which we can use to create a apllication template. Directive are in Angular js can be used in HTML to modify the fuctionality of the template.

As we know directive have the power to create or modify the behaviour of HTML, we can use directive for creating a static content into a productive content for client-side interface with the connectivity of database and network. The built-in directive can be more useful for creating Angularjs application more dynamically.

The word directive means that it will directly deal with the user interface and the Html template which can be seen by the users.

Directive can be of two types in Angular:-

Behavior modifiers:-
These type of directive are those which can modify the existing HTML and will change the behaviour of existing user interface. Example of this directive can be ng-show, which can hide or show any HTML element based on condition, or ng-model which binds the data with any input element to attach it with data.

Reusable components:-
These directive are those in which they will create a new structure for HTML template. These directive have some business logic and rendering logic. Business logic, which will decide what to display or how to display for the users. Rendering logic, will decide from where it will get the data, how to display the data for the users and how to react when the user will interact with it. Some of example of these directive are tab widget, carousel or accordion and a pie chart. There is also an option to integrate the Third-Party-UI in Angularjs template.

Some of the directives, which we can discuss are ng-repeat, ng-model, ng-view, ng-include.

ng-include directive :-
This directive takes Angularjs expression which connect the another HTML file into the current HTML file as a path. Then it fetch the data from that file, which will run on server will show both the file in same document. It is easy to maintain, and extract it into a simple and reusable file.This is the good feature of ng-include. If there is a large HTMl template we can break them into a smaller file which is easy to take care and keep the certainty of the code.

ng-switch directive:-
The ng-switch directive will allows us to add more functionality to the user interface for displaying more dynamic content, when the user select something in view, then they will get response related to them. It acts like a switch in HTML based on condition including HTML code.
Ng-switch loads content which can show the output based on the conditions when the conditions are fully satisfied. When we use ng-include inside ng-switch-when then it will not shows anything in UI, It will show when the condition will met.

ng-bind directive:-
The ng-bind shows the output when the data is bind with it. The ng-bind will only display the value which is given under the curly brackets and update the related output according to the given value under the expression changes. The benefit of using ng-bind is that when  your HTML page takes some long time to load, then the HTML page will shows the raw expression in loading time untill the page loades completely.

ng-cloak directive:-
ng-cloack are used in place of ng-bind, when you loads the HTML page and it will take a long time to load, the raw expression can be seen under the page. To stop this problem of showing raw expression we can use ng-cloak. The ng-cloak have its own css rules to hides the raw expression until the HTML loades, when it document loaded completely then it will display the executed values.

ng-repeat directive:-
The ng-repeat directive is one which can render the HTML element like a loop as far as the data is wholly  accomplished. The important part of ng-repeat is that it creates and pass the data as a loop with a new scope object which is different from the $scope object of the controller.

Hope this will help you to understand about Angularjs directives.