Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    First Directive


    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.



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




    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.