[SOUND] In Part 1 of this lecture,
we created this MsgApp that was able to use interpolation and expressions in order
to output some messages that we set on the $scope inside of our controller.
What I'd like to do now is show you something a little bit more fun but
at the same time demonstrate that the expressions don't necessarily have to go
only in the body of tag.
They can also be part of tags themselves.
And using that technique, you can actually achieve something pretty neat.
So, I'm still located in lecture 11, folder 11,
in the full stack course 5 examples folder.
And the only thing that I added is I added a couple of images.
One s called yaakov_fed and the other one is called yaakov_ hungry.
Both of them are PNG files, so they're images.
So what we're going to do is we're going to go ahead and create a div.
Notice that our div is sitting inside our div that is amidated with
attribute of ng-controller.
It has to be inside if it were to communicate with that
particular controller's scope object, and the only reason we're making a div
here is just to separate visually, these messages from what we're about to do.
So what we want to accomplish, is have an image displayed
in the web page that is going to be something like Yaakov that's hungry.
And then we're going to have a button that says feed Yaakov and when you click that
button the image should flip to the other image that's Yaakov fed,
in other words Yaakov has been fed.
So we're going to start with creating a button and
the button is just going to say feed Yaakov and on click of that button,
we want to do something but since we want the angular and
the controller to handle this on click, so we're going to say ng-click.
So on ng-click, we want some functionality to occur meaning the flipping or
the changing of the image.
So we'll just say feed Yaakov and
that's going to be our function that we're going to have to implement.
And so far so good, so we'll go ahead and put maybe a break here.
And usually I would style this very well.
But since we're concentrating on functionality,
right now ugly webpage is good enough.
And I will need to have placeholder for this image so
we'll say img and the source will leave that alt for now our of this, and
the source is going to be images, since the images are located in images and
/Yaakov_ and here's where we don't know which image to display yet.
We want to display the image that is kind of Yaakov state, right?
And yaakov probably originally is hungry and then he's fed.
But we don't know that.
So we need to put our expression here and that's what we're going to do.
Here we're going to say stateOfBeing, what is the act of state of being?
And of course after that since it's going to get concatenated or
otherwise known as interpolated here, we need to put the period and png.
So the yaakov_ if the state of being is fed then I'll say fed.png or
hungry I'll say hungry.png.
So let's go ahead and take a look at our webpage, and
you can see the feed Yaakov button is here.
And we're getting an error here and it kind of makes sense as we don't
really have an image yet because it's just an expression.
And we haven't really set those variables on the $scope yet.
So let's go back to our code editor, and we need to define the stateOfBeing
property and also to define the function called feedYaakov.
Let's go ahead and go to app.js and we'll go ahead and
add another property on scope called stateOfBeing and we'll call that hungry.
So that's the first state of being, we'll put another space in here.
If we save that and go quickly to our webpage,
you'll see that the image now is showing up.
So, we have the image that's the yaakov_hungry image that's showing up.
You'll see that we're still getting this 404 error and
because it can't find the image.
And that's kind of strange but we'll take a look at that in a minute.
Let's go back to our editor.
And still need to define the message.
because if we do this right now, let's go back, if we do this right now and
click Feed Yaakov,
nothing is really going to happen because we don't really have that defined yet.
So let's go back to our editor and
define the function feedYaakov when you obviously put it on the scope.
So we'll say feedYaakov, there it is popping up here and
let's say function, we don't need the name.
We will put the semi colon here and the only thing we need to do is switch
our stateOfBeing variable to be fed after it gets clicked.
So let's go ahead and say $scope.stateOfBeing = "fed".
