First Directive

AngularJS Video Tutorial by

Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 193 of the free egghead.io lessons, plus get AngularJS content delivered directly to your inbox!



Existing egghead subscribers will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.




Edit

First Directive

2:08 AngularJS lesson by

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.

Find the code for this lesson on JSBin.

egghead.io comment guidelines

egghead.io
Avatar

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.

Alexander
Avatar

Hi, John! What do you use for navigation inside the file? It's appeared at 1:00 in this video. Can't find such plugin...

Stuart
Avatar

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.