[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". So, we save that. Let's go back to our browser. So, let's minimize this a little bit more, and, so, when we click Feed Yaakov, now the different image shows up. Obviously, Yaakov looks all happy and the cookie is almost gone. But what's strange here is, if you take a look at our console, we're still getting this error that it's not found. So this image is not found. Now why is this image not being found? Well actually it makes 100% sense because HTML gets processed sequentially and when this HTML page is being processed line by line, by the time it gets to this image, the line and processing the image, our state of being is not yet defined yet. And in fact, Angular JS has not yet processed this chunk of HTML, and hasn't yet looked for these placeholders and substitute these expressions with the values. So what ends up happening is that the browser gets this line and tries to fetch this image at this URL. And of course this is a bogus URL, if it still has those mustache and curly braces in it, and therefore it gives you a 404, but once of course Angular takes care of this, it substitutes this URL for the proper one, and then we still see the image, but yet the 404 error message remains in our console. So how can we take care of this? Well, we can not take care of this using regular HTML tricks. But, we can take care of it using Angular. We need somehow to tell the browser not to try to fetch this URL but at the same time fetch it only when Angular is ready for interpretation of these placeholders. Well, one way of doing it is to put an Angular attribute on here instead of the standard HTML one. And the Angular attribute is just ng-src. So if we say that now, go back, you'll see that there's no errors anymore because the image only got fetched once Angular got a hold of this HTML and translated all the expressions into their values. And now if we refresh the page again, just to make sure even though browser sync is working here, now you see Yaakov with a cookie. And if you click Feed Yaakov, our stateOfBeing variable that is saved on the scope on the $scope will change its value to _fed and now Yaakov is happy because he ate almost the whole cookie. So what we've seen in this part of the lecture is really nothing super new but you've seen another expression or another idea of how to use expressions. And since you could expressions even inside the attribute values, you can achieve pretty interesting behavior that otherwise would be pretty difficult to implement.
