What is a Directive?
AngularJS Directives is a method of manipulating the DOM and there is two types of directives, a behavior modifiers and reusable components.
Behavior Modifier Directive
This type of directive will add or modify existing behavior of the UI. Some of these types include ng-show which show or hide parts of your html code, and ng-include which allows you to include a html code from another file to be rendered in an existing UI.
Reusable Components
This type of directive can render a new html code with in your page, and it can have business logic attached to it. Your typical reusable directive would be your Tab and Accordion directives.
ng-show example
This is an attribute directive which means you can only use it as attribute in any elements. For example below I am going to you it in my DIVs.
So ng-show you have to provide a condition that will resolve to true to show part of the html:
<div ng-show="condition == true"> Hello, World! </div> <div ng-show="condition == false"> Good Bye! </div>
In my next post I am going to talk about Custom Directive, and demonstrate how you can write you own directive for your own single page application.