Okay we're back in our editor and we're in the folder Luksha23,
which is located in full stack course 5 examples folder.
And this is our shopping list app that we've seen before.
And we have one controller here called ShoppingListController and
we're using controller syntax to have a label called List for it for
the inside of the controller body.
As you remember, when the user clicks on the Add Item button,
if the items array inside the shopping list service
exceeds a certain number of maximum items it will throw an exception.
Let's take a look at that code in app.js.
So if we scroll down here to the list.addItem, you'll see that if this
particular statement throws an exception, we're going to catch that error and
we're going to assign, list.errorMessage will assign the error message from that
thrown error object to the error message on the list.
So if we go back to index.html, you'll see that we're displaying here,
displaying the word error, the label error,
and then displaying the message that is supposed to come back from the controller.
As I said, what we'd really like to do is not show this whole div at all
if there's no error message.
But one way of doing it is to use the ng-if directive.
The ng-if directive takes a condition as its value.
If that condition is true, the entire div is shown.
If that condition is false, it evaluates to false,
then angular js takes the entire div out the DOM tree.
In other words, it's as if this div does not exist in our HTML.
Let's go ahead and save that and go to our browser, and we could see here,
let's bring up the Chrome developer tools.
And we'll go to Elements,
let's take a look to see if we could see that div in our HTML.
So if we open that up, we could see here that instead of our div,
right after the ordered list, we see the comment,
the HTML comment called ngIf: list.errorMessage.
And you could see it's commented out, there is no div existing.
And the reason there's no div existing is because list.errorMessage evaluated
to false.
However, if we start adding, at this point,
we'll just add some bunch of nonsense here, we'll start adding some item.
And finally when we add more than five, you'll see that that div all the sudden
sprang up into action and it's now part of the DOM, the document object model.
You see the div here, you see the ng-if and
its class error and error something class that we assigned to it.
As you could see, it's coming from styles.css and
that's why the color of our text is red.
And you could see that the div showed up.