AngularJS - Directive Tutorial

Uploaded by johnlindquist on 16.04.2012


We all know that Hello World is not a valid HTML tag.
But what if it could be?
Let's stop over here and create an Angular model called
components just to make it super-generic, and create our
first directive.
We're going to name this directive
Hello World camel cased.
You'll notice over here, hello world is dash spaced.
So it's always camel cased, dash space, a good way to
remember it.
And then in here, if you've ever read the Angular docs,
this can get a bit confusing.
It talks about compile phase, and link phase, a pre-link and
a post link, different restrictions, and
transclusion, and kind of goes on and on about all these
different scenarios of matching scope and whatnot.
I'm just going to do the most simple thing and
skip over all that.
Instead, just restrict this to being an Element meaning that
this is an element, it's not an attribute, it's not a
comment, and it's not a class.
So it's an Element, capital E. And then set up a template
which is just going to be a span of Hello World.
If I refresh this now nothing happens.
That's simply because we haven't set up our ng-app yet.
Let's point this to hello app, and hop over to our
directives, file, and set up another module and
call it hello app.
If I refresh now, nothing's happening.
But if I pass in components and refresh, you see we have
our Hello World component displaying Hello World.
And that's because our hello app depends on the components.
The components has a directive of Hello World, which has a
restriction of Element, which is an Element, and then a
template of span Hello World.
Seems to make a lot of sense.
Let's take it another step further here.
We'll grab this template and open up our Angular directory,
create another one, call it partials.
And in our partials directory, we'll create an HTML file and
call it Hello.
And I will paste our template in here.
And I think you may see where this is going if I name this
template URL instead.
I'll do Hello.HTML, hit refresh, and
it magically works.
Just to show it doesn't work if you remove the L, go back
in, and it works.
Now you don't always just want to say hello to the world.
Sometimes you want to say hello to someone else.
In this case, I'll say hello to myself.
I'm a nice guy, why not?
And then I'll try and bind to that name that I'm passing in.
So let's say name.
If I hit refresh now, I've refreshed inside of the wrong
HTML file, so I've hit refresh now.
It's just going to say Hello and nothing.
Because it can't find that name.
But if I go into my directive here and I expose the name
through the scope, and I say, hey name, I want to bind to
you, and then refresh, you'll see it
says Hello, John Lindquist.
So I set up an attribute over here of name.
And then in my directive, I added it to the scope of
something that it can be bound to.
And then in the template I exposes it as something that's
going to show up whenever that changes on the scope.
So that's the basics of a directive.
There's much much more to get into here, but I'm just going
to leave it that for this one.
Just to recap.
We set up our Hello World here which is in our directive of
Hello World.
This is wrapped inside of a components which we passed
into our hello app which is instantiated here.
So hello app components, components
Hello World Hello World.
Then for our directive object, we restricted it to Element.
So that's our Element.
Use the scope to expose name.
There's our name, we bound to that, passed in John
Lindquist, which shows up here.
And then finally, this is just pointing the template URL to
the Hello.HTML.
Hopefully, that makes sense.
I'll definitely go into more detail in future tutorials.
Thanks for watching.