Directives might just be the **killer** feature of AngularJS. Directives allow us to extend the grammar of the web through reusable HTML elements, attributes, and classes.

First Directive

**John Lindquist**: Let's see what it takes to create our very first directive. We're going to create in our main JS an app. We'll just call it "Super Hero," and no dependencies. Then we'll just say, "App Directive," and this is one of those syntaxes you just need to memorize. We'll create a Superman directive, and from this call back, we'll return object with property called "restrict," and we'll restrict it to capital E which is Element.

We'll say this is a template. Let's check dates to mail, so I can use a Zen Coding or Emmet. Div and we'll say, "Here I am to save the day." Now that we have a super hero module with a Superman directive which is restricted to E, we can jump into our index creator app, which is superhero, and create our Element here, which is using our directive called Superman.

Once we refreshed this and check out over here, you can see it says, "Here I am to save the day." That's really all there is to writing your very first directive. We'll get into the details of what's going on here in future videos, but basically as soon as you have an app, you can attach directives to that app or that module, and in your HTML, you basically make sure you define your Elements inside of your app. It's not going to work if you put this outside of that, because it's only going to work in the scope that that app will allow.

First Directive

Share this video with your friends