0:00
[SOUND] We're
back to our code editor and we're located in lecture 29,
which is located in fullstack-course5 examples folder.
And this is the same shopping list application we've been working with,
except this time we're going to combine some behavior with
together with our shopping list directive.
Now the shopping list directive basically lists all the things in our shopping list.
And prior to this lecture,
we used to have another div right here that used to be the error message.
If something was detected that's wrong,
the error message would be outside of our shopping list.
Well if you think about this a little bit more in a component type of fashion,
really the error message should be part of the shopping list directive.
After all, the shopping list knows about the items in the list and
it can decide whether or not an error message should be displayed.
That's exactly we'll going to do and to do that,
we're going to declare our own controller on the shopping list.
I already removed the error message from the main index.html.
Let's save that and go to ab.js.
Here, the first thing you see is, it's basically the same directive we had before
except we changed the items from an equal sign to a less than sign,
which is a one way direction.
We're not really planning to change anything about the items so
a one way binding is plenty.
The first thing we want to do is declare a controller.
We do that through a controller.
Property and we'll call
1:29
it ShoppingListDirectiveController to distinguish it from the other controllers.
And we also want to follow this practices, so we'll say ControllerAs and
we'll give it a label called List.
That means in our shopping list.html will be able to refer
to the shopping list directive controller instance through this label called List
and that's where the items and title properties will show up on.
They will show up on the instance of the actual controller which we're going to
call list inside the shopping list .html.
One more thing that we need to make sure is to tell angular that we actually
want to bind all of the scope variables scope properties to our controller.
And for that we'll just say bindToController and we'll call it true.
We'll say true.
Now it's bound to controller.
Obviously we now need to implement our shopping list directive controller.
We'll go right below the actual function that declares directive and
we say function we'll give it a name and inside we'll do that best practice
of storing this key word inside the local variable.
3:11
And we want that functionality to be sitting inside of the controller,
not outside of our directive, so this will be a place to define it, and
the way that we define it, just like we define anything else in the controller,
we define it through this keyword, in this case it's going to be list.
One and the same.
We'll say cookiesInList and
we'll define a function, don't need the name and it's going to be a bullion,
it's going to return a bullion, either it has cookies in the list or not.
And I've actually prepared some code right here.
And all we're going to do is, I'm going to copy and paste it right here,
all we're going to do is we're going to loop over our list items,
the items that got bound to the scoop right here.
And we're referring to them by this keyword, which is now list.
So list.item.length we're basically looping over all the items in the list and
all we are doing is just checking whether or
not cookie string is part of it, if it is then we going to return true and
if we go through the entire list and it's not there, we'll return false.
Let's save that and the last thing we need to do is actually use it
in our template which is shoppinglist.htm and you see here,
this is left over code from a previous time which we're still to our scoped
properties directly without the label of the controller syntax.
And we remember the label was list so we just start saying List.
And it is item in items.
Well actually it is List.items and the rest we can just leave alone.
This button right here that come in we are going to deal with in a different lecture.
Let's go ahead and save that.
We should be able to go back to the browser.
Now we are going to go ahead and say something like chips.
Five, four bags, and we had something.
That's working.
We could keep adding some stuff in here.
But we didn't actually activate our special function here,
which is cookies and list.
In order to do that, we're going to put another div right below that.
5:08
And we're going to say class error actually
because we defined an error class which is in the styles,
you can look at the styles just makes the whole thing bold and red.
And we're going to do one more thing.
We're going to say here WARNING.
WARNING.
Let's close the file browser so you can see it better, COOKIES,
DETECTED, very dire warning right here.
Point is we wanted this warning to show up only when
there are cookies inside of our list, so how do we do that?
Well, we can do it easily with ng if and
we could say if List.cookiesInList,
and we need the parenthesis so angular knows it's a function.
And I'm going to save that.
And now if I go back to our browser and we'll say,
Chips, 2 bags of chips and everything is good but
if we say Cookies let's get 10 bags of that.
And when we do that the warning shows up immediately right here.
That it's warning us that the cookies have been detected inside of our shopping list.
Now let me go back to the code editor for
a second, because there's one more way we could have declared our controller.
Let's take a look at this controller right here.
We see that we declared the controller directly as a function value.
We didn't really have to do that.
We could declare our controller on the module itself, and then use it right here.
Let's try to do that just to see how that works, let's say controller and
we will give the controller a name, we will give the controller exactly same name
as the name of the functionm so that we don't get confused.
And now we have a controller that we can now reference through this string,
anywhere inside of this angular module.
Then, when we say controller here,
what we could do is we could put it in quotation marks, right here.
We don't really need the controller as we could just say as List right here.
Then we could just comment this out right there and save it so we are binding
everything to the controller and the controller as list, is now being done
through a string, because angular will look up the string to see if there is any
such component exists in this module, and now it will because we just declared one.
Now let's save that,
now we can actually use this controller in more than one place.
We could use it in this directive but we could also use it somewhere else as well,
so we could definitely have a reusable controller and
not that just in this file because here obviously, in this file we could reuse
this function without any problems, but if it was in a different file and
we're still working of the same module, if we left this just as
a regular local function, inside of this if function it won't be visible.
However once we stack it is a declared controller on the angular module,
any where this module is being referenced,
we're going to actually retrieve this controller and reuse it.
Let's save that and go back to the browser and let's see that it actually works.
Let's say chips, 2 bags of chips, and it's adding the bags of chips.
Let's say Cookies, 2 bags of cookies, and we add it.
We see that same warning.
Basically you could declare it either way you want.
For our purposes, I will just comment this out.
You have this code but I will actually put it back the way it was,
maybe I'll just comment this out as well, and put controller here and
we will say ShoppingListController and
put a comma here and we'll comment this out as well.
And now let's go back to the code editor and we have it exactly as it was before.
Now if we say chips, 2 bags, it works and
we say cookies and the dire warning shows up, that cookies have been detected.
Yaakov ChaikinAdjunct Professor, Graduate Computer Science
