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 350 of the free 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.

    Now Playing:
    First Directive
    John Lindquist 2:08

    Next up:
    Unit Testing Directive Scope Binding P
    John Lindquist 2:00

    Unit Testing Directive Scope
    John Lindquist 1:57
    Unit Testing a Directive
    John Lindquist 2:14
    Directive Communication
    John Lindquist 4:28
    Isolate Scope Review P
    John Lindquist 3:30
    Isolate Scope "&"
    John Lindquist 6:03
    Isolate Scope "="
    John Lindquist 2:51
    Isolate Scope "@"
    John Lindquist 4:51
    Understanding Isolate Scope
    John Lindquist 6:38
    Directive to Directive Communication in AngularJS
    John Lindquist 8:01
    Directives Talking to Controllers
    John Lindquist 4:43
    Directive Restrictions
    John Lindquist 3:01
    Sharing Data Between Controllers
    John Lindquist 5:13
    Basic Binding in AngularJS
    John Lindquist 1:27
    Write Your First Directive
    John Lindquist 2:46
    Directive Restrictions
    John Lindquist 3:01
    Controllers P
    John Lindquist 1:11
    Defining a Method on the Scope
    John Lindquist 2:16

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.

Get the Code Now
click to level up comment guidelines


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.


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

It's called AceJump, and it's featured at at 1:23.

In reply to Alexander


In reply to Stuart

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:

Getting Started with Redux

Getting Started with Redux