Apr 25 2015

AngularJS Directives (part 1)

What are directives?

What is a Directive?
Directives are a way to teach the browser new markup. The following tag means nothing to the browser:

<awesome></awesome>
At this point, your browser is probably thinking you're high. It has no idea what you want. But you can tell it to render something awesome wherever it sees the above tag.

How do I do this?
You do this by creating an awesome Directive, by introducing it to your AngularJS application like this:

//Set up angular application
var app = angular.module('app', []);

//Create a directive called 'Awesome'
app.directive('awesome', function(){
	return {
		template: "<div>My Awesome Text</div>"
	}
});
Now every time you use this line:
<awesome></awesome>
The browser will immediate translate it to:
<awesome>
	<div>My Awesome Text</div>
</awesome>
Pretty cool. In Part 2 we'll discuss Directives types. Let's go!