Now it's time to snap on the next angular component, directives.
Now we've looked at a couple of them already.
NG App to bootstrap the entire application.
NG Controller adds a controller and scope to an element.
NG Include, which fetches, compiles, and includes an external HTML template.
Directives are fun to work with.
And as we've seen with these directives, they can be very powerful.
But what is a directive exactly.
Angular JS is documentation says that directives are markers on the DOM
element that tell angulars, HTML compiler to attach a specified behavior
to that DOM element, or even transform that DOM element and it's children.
So a directive is something you place on an element to tell angular to
do something.
We've already used ng app and ng controller, but
angular provides a ton of other directives.
There's ng- show, ng- class, ng- model, ng- repeat,
ng- source and ng ng-click just to name a few.
To see a complete list of directives,
check out the link in the instructor notes.
The ng-if directive is simple but very powerful.
It either creates or removes an element based on the validity of its expression.
In our template we display the rating here.
If the rating for a menu item is higher than four,
then this expression is true and we see this text.
So if I change the rating down here to 4.3
then everybody will know that strawberry putting is fantastic.
ngClass is a very cool directive.
It can accept several input types.
But I'm passing an object with a key of warning and a string value.
If the menu's rating is greater than 4.5,
then the highlight class will be applied to the element.
If I set the rating to 4.6, then the text will have the highlight class.
You can also combine multiple directives on one element.
Both of these directives are on the element but
only one of them is being applied since the rating is 4.3.
Another directive that you've actually used before is ng-model.
This directive is applied to input select and text area elements.
To see this in action, let's add a new section for reviews.
Here's the text area where a customer will write a review.
Down here is where the info will appear.
We're using ng-if to display some text while the review box is empty.
Typing something in the text box will create a new property on
the menu object in the scope.
ng-model has a lot of moving parts to it and can do a lot.
So definitely check out its documentation link in
the instructor notes.
This next directive.
ng-repeat Is incredibly useful if you need to loop over items in an array.
I've updated the single menu item in the controller
to an array of menu item objects.
Back in the template, we can now loop over this list of items using ng-repeat.
When angular compiles the HTML template, it will loop over this section once for
every menu item.
It will also apply a new scope object for each one.
Every time we loop through the list,
we'll reference the menu item as just item.
Since we're using item instead of menu now.
We need to update our expressions.
And there we go.
Just this little bit of template code is used to make this dynamic view.
How awesome is that?
Let's now transition this image from text to the actual image file.
We'll do it with another directive.
Because angular expressions are compiled after the HTML is downloaded and
parsed by the browser, just sticking an expression in here would make
the browser look for an image at this path.
The NG source directive waits to add an image until after the compilation step.
And here are our images.
ng-if, class, source and repeat.
All work with existing data.
To actually interact with an app, we use the NG click directive.
Let's add a couple of new buttons for changing the rating.
ng-click for this button will increment, passing at the current menu item.
This button will decrease the rating.
Here are the functions that get called.
I'm using this crazy calculation instead of this one.
Because JavaScript doesn't handle mathematical calculations with
decimal numbers like we expect.
Increasing a rating will add a tenth of a point while decreasing it
will remove it.
What's really cool is that all of the directives work together perfectly.
If we increment this item over four, then the message appears.
Over 4.5, and the class gets added.
I just love directives and they make building powerful apps effortless.
We've only looked at a handful of directives.
So make sure you know all the ones that angular ships with and how they're used.