AngularJS Tutorial - Part 16 - Reusable Directives Video Lecture - IT & Software

hey guys this is Joe Madeline and today
we're going to take a look at creating
reusable directives in angularjs with an
emphasis on reusable angularjs is a
framework by Google it's a very powerful
framework it's very different from
something like jQuery but if you're
coming from jQuery or a solid JavaScript
background you should be able to follow
along pretty well so what I'm going to
do is let's create a directory for our
angular application and then in that
directory we're going to use Bower to
install angular that's going to create a
components folder inside of that it's
going to be an angular folder and inside
that's going to be our angular
JavaScript files so I'm going to go
ahead and just well you know it looks
like a new item in there as well
index.html it's going to be a file and
then we can just open up the directory
in sublime which has been acting really
weird on me seem to get two windows each
time alright so here we are we've got
our index.html and I'm just going to
start off with an html5 duck go ahead
and save that and then we're going to
drop in angular so here's our angularjs
and
copy that is a tag script and drop it in
to my page okay so let me stretch this
out a little bit okay so an angular
directive can be represented in a number
of different ways one of the coolest one
is by creating your own attribute so I'm
going to earn that your own attribute
your own tag your on HTML tag so name is
not an HTML tag so but I just created it
this isn't going to show anything in the
browser and I'm going to give it some
attributes here so the first one is
going to be for the first name and the
second one is going to be for glassing
sorry all right so right now that's
going to do absolutely nothing I can go
ahead and load it up in the browser we
can see that the name tag that we
created is on the page but the browser
has no idea what that is or what to do
with it so we're going to start with our
angular app and angular applications are
all modules and so I'm going to create
my first module and I'm going to call
that app and that's just my variable you
don't actually have to have a variable
but that way I can keep everything
modular if I want to split things out
into different directories and separate
files as the code becomes more complex
it's nice to have that kind of root
namespace so I'm calling line up all
caps
oh and my app is an angular module
angular module name bad and the second
argument that it takes is for dependency
injection so if there were other modules
that I wanted to inject into my
application
those can be custom modules or they
could be some of the built in modules
that come with angular right now I have
no dependencies and what I want to do is
I want to make that name tag work and
again I'm going to create a directive so
using my namespace that I've got here
for my application I'm going to create a
new direct - and I'm going to call it
name it could be called just about
anything here the in order to access
that I'm going to need to tell the
directive you know what to look for on
the page so the second argument is a
function now what we're going to return
is the directive object so I'm going to
start with an empty object and there's a
there's a lot of different options you
can include in here but there's three
that are vital and the first one is the
restriction type that's restrict and in
our case e is for element there's
element attribute class and comment and
the abbreviations for those are EA C and
M I don't really know how to do the
comment one I've never done it and it's
kind of weird but I can show you how to
do the rest here so we're doing an
element so the system knows to look for
an element and the element in this case
is going to be named so it knows I'm
looking for an element called name the
second one is the linking function
and just now we're not really going to
do much with that but what the linking
function does is it takes in the scope
the element and the attributes of that
element and you should probably really
write up scope element attributes as the
arguments but one thing I do is I just
write out se a and that helps and then
the third thing is the template now the
template could actually be template URI
or it might be URL update you on that in
just a moment
and then that can point to a separate
HTML file that contains the string that
is going to be our template um so what
I'm going to do is I'm going to say well
since you can't see the name value what
I want to put inside that aim tag is an
h1 and then and then obviously I'm going
to close that whoops
and then here what I want to put is the
name um so I can see that I've got
that's attribute a first I've got this
attribute of last and this is where the
linking function comes in I need a way
to tell the template what I'm using when
it when it goes to render this and you
to know how to get at that data so in
the linking function that first and last
those are attributes so what I could say
here is on s which is short for scope in
make it I mean and you know if let me
just go ahead and do scope scope okay so
there's our scope and I can say scope
dot let's just do full name and we'll
put these together equals now the
attribute I want to get is first and I
want to put a space in there and last so
now the in the scope of this element
full name equals first and last with the
space in between so in my template I can
just say full
now the other thing I need to do is kind
of close all this in in is inside of my
module a common way to do that is just
drop it right into the HTML but
technically as long as it's some tag
that's closed around it it's going to
work so ng add up the equals app so what
we're expecting to happen here right now
is an h1 tag inside of that name tag
with the inner HTML of Jo space matte
alone so let's save that and give this a
try so we've got it there we go and you
can see that it is actually inside the
name tag which doesn't really exist and
it's got this NG binding which angular
is adding on at the last second or at
runtime basically another thing that we
can tack on here since name isn't really
a thing is replaced and we can say true
on that and then what that's going to do
is it's going to replace the entire tag
with our template and our in our dynamic
data so let's take a look at that really
quick and now you can see we've got we
still got our attributes first and last
which are fine we've still got our ng
binding but now it's an h1 tag with the
value inside it's got our template there
and it's replaced the entire name tag
one thing to mention about data
attributes or I'm sorry about the the
directive attributes is if you're
concerned about html5 validation and you
want to use the data data list element
you can replace this whoops with you can
tack on data - and that'll work just
fine you don't have to update any of
your other code so i refresh this now
and you can see everything's still
working just fine so it'll err is very
forgiving in TOR it understands that you
know that the data list attribute is
HTML compliant where it's just making up
attributes on your own might not be so
so that's a look at how to create the
element version of a directive the other
one we could do is so let's say I want
to make this in h1 and then
what I'm doing is I'm giving it an
attribute called name which probably
isn't really good because input values
can have names so let's call this name
err okay so my attribute you're just
going to be named er and I'm going to
close that so I've got an h1 that has an
attribute called name er an attribute
data first and an attribute called data
laughs what I'm going to do I'm going to
change my directive name and I'm going
to change the restriction to a which is
attribute so now it's looking for the
attribute name ER and then technically
in this case a since I'm just going to
be filling that in so now I'm going to
just put that inside the HTML I don't
need to replace the h1 and we're going
to go and I obviously didn't need to
double up on the h1 tag all right so
let's run that same exact output so
we're good there and then the last one
I'm going to show you is class so what I
could do instead of having this this
custom attributes I could say class
equals name ER and we're going to get
the exact same thing
so boom there you go we've got a
directive now in terms of reusability
let's make a second one let's paste that
in and here we're going to say mr. artic
Wow
Sparrow Takas Spartacus okay so now we
would hope that we would have two HTML
tags or h1 tags the first one with the
inner HTML of Joe Matt alone and the
second one with mr. Spartacus and I'm
guessing because I named it that you can
guess what's going to happen we get mr.
Spartacus two times now the reason we
got that is because the scope full name
is getting overwritten for I mean if I
did that a hundred times and then the
last ones that Joe met alone then they
would all say Joe met alone so what we
need to do here is we need to isolate
the scope to the instance of the
directive
and the way we do that is in the return
object we just need to take scope and we
need to pass in something true this
works just passing in an empty object I
don't know why it works really I guess
that is true but you could just say true
here which I think it's probably what it
says in the in the documentation I can
also say one equals one that would work
this as long as that statement is true
you're good to go but you have people do
seem to want to pass in that empty
object and most of the examples that I
see so so now it's reusable we could
have a bunch of these on the page and
let me just try that out so we're going
to have a gym Spartacus and a gun let's
go with this Smith and actually let's go
with the Jones here okay so now we're
going to have four different names each
one is its own directive however you
know we can eat very easily change so if
we just wanted to say scope dot full
name equals that we'll leave that alone
scope dot first
equals the first and the scope dot last
equals last and then down here if we
want to do last comma well now we have
to do it like this last comma space
first that'll work just fine too so I've
got our last in our comma first so that
you can see we can change the directive
on the fly and that's going to affect it
everywhere else we don't have to update
our HTML now if we want to make this
really modular and we want to be able to
reuse it or pass it on to somebody else
to use in their application obviously we
won't know the namespace for their
application I mean that right there is
enough to say you know this isn't this
still isn't fully reusable so what we
can do is we can create a nameless
angular module just like we did before
well except we're not going to give it a
name angular module having a hard time
here a neighbor will color our module
name err and then it doesn't have any
dependencies and now what we do is we
tack on this directive to that to that
module you see that the dot directive
it's what I'm doing there I'm just
making it all one string so now we have
this module called namer that has a
directive called name err
and so this could be coming in from some
other file it could be and actually let
me just go ahead and do that I'm going
to create a new file called
yes and I'm going to paste this in there
so we've got this namer module and what
I'm going to do right here after our
angular that we're bringing in let's see
we drop that in the root directories so
a merge is so now we've got this app
that does absolutely nothing right now
and it certainly doesn't know what to do
with these four h1 so if i refresh that
you know the data the the tags are there
but it's not doing anything with it
what's really cool is now this
dependency injection here I can just
inject the neighbor module into that and
therefore it's going to inherit the name
or directive as well and now if i
refresh this we've got our directives
we've got a very reusable directive in
its own module and you can see here if
you're going to be building out modules
they're going to be injected into you
know more complicated applications you
could really build this out and have all
sorts of things if you go look at the
angular angular UI or angular bootstrap
projects this is exactly what they're
doing and then you're just injecting
your module their module into your
application so that that's how you
create a reusable directive in angularjs