Angular Directives are a great way to split your code into manageable blocks for use in multiple templates.

Directives are basically a marker within the DOM than loads a template when found.

For example, if we create the following simple directive

myApp.directive('mydirectivename', function(){
	return{
		restrict: 'E',
		template: "


Hi {{name}}, I'm a directive


",
        link: function (scope, element, attrs) {
                scope.name = 'Marc';
        }
    }
})

And then add the directive to a template as below:

<mydirectivename></mydirectivename>

The directive will output

<div>Hi Marc, I'm a directive</div>

Restrict option

The restrict option alows you to specify whether the directive will be used as an element, attribute or class

A – Attribute e.g. <div mydirectivename></div>
E – element e.g. <mydirectivename></mydirectivename>
C – Class e.g. <div class=”mydirectivename”></div>
M – Comment e.g. <!– directive: mydirectivename –>

Template option

As well as adding your template inline you also have the option of using templateUrl to load a template with ajax:

templateUrl: 'templates/my-template.html'

Link Option

You can modify the DOM using the link() function. In this case we’re just passing a name.

AngularJS Directives have a number of other options which I’ll cover in a later post.