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 495 of the free egghead.io lessons, plus get Angular 1.x content delivered directly to your inbox!



Existing egghead members 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.



First Directive

2:08 Angular 1.x 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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
Alexander

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...

In reply to egghead.io
Avatar
Stuart

It's called AceJump, and it's featured at https://egghead.io/lessons/webstorm-tips-tricks at 1:23.

In reply to Alexander

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.

Featured course:

Learn ES6 (ECMAScript 2015)

Learn ES6 (ECMAScript 2015)