[SOUND] In this lecture, we're going to speak about expressions and interpolation. Now, what is an expression? Well, an expression is something that evaluates to some value. And in Angular, we've seen expressions already, and those are the things that sit in the middle of those double curly braces, or handlebars, or mustaches, however you want to call those. Now, expressions are processed by Angular. And if you have to think about them, they're roughly are similar to the result if you call eval on some JavaScript, except it's different in certain very key ways. Number one is, it's executed in the context of the scope, and that's the scope, the $scope that we've been referring to, and it has access to properties that are placed on the $scope. Also, if the expression evaluates and results in a TypeError or a ReferenceError, it does not throw those errors, it simply displays an empty string, an empty value. Also, unlike the eval statement, control flow functions, like if statements and so on, are not allowed inside of the Angular expression. It can also accept a filter or a filter chain to format the string output in a certain way. And we're going to take a look at filters in a later lecture. Now, the term interpolation is very computer sciency, fancy speak for process of evaluating a string literal containing one or more placeholders which are then replaced with real values. So we have a string that has some sort of placeholders in it. You could parse that string, find those placeholders, and replace those placeholders with a value that correspond to whatever that placeholder name is. So for example, in Angular, this string, messages, with double curly brace {{ message }} provided that the message is equal hello, the message property is equal hello, is interpolated into this string, which is, Message is hello. And one important note here is, that message variable of that message property is still connected to the original message property that's sitting on the scope. And if the scope, $scope message changes in any way or by some other process, so will the interpolation result change as well. Let's jump into the code editor and see some examples of this. Okay, I'm back in my editor and I'm located in Lecture11 folder in the fullstack-course5/examples folder. And here we're dealing with a very similar setup. We have an index.html. We have app.js, which is going to drive our app, obviously, angular.min.js. So let me go ahead and close the file browser of Atom, that way we could see this a little bit better. Okay, so let's take a look at what we have here. So we've set up the application, we have ng-app, and the name of our app is message, MsgApp. And we also have one, controller ng-controller, that's called MsgController. And it's controlling this piece of HTML right here, which for now just says, message is, with a break tag. In our app.js, we obviously created our module with our message app. And we've registered one controller with the MsgController function as the driver for that controller. And in order to protect ourselves against the minification of this code, we're going to attach a $inject property to the function object that is our controller. And for now, all we're doing is we're placing a name property on our $scope service and we're just going to have that as a string Yaakov. So we've seen this interpolation before, and at least evaluation of these expression before. If we go to our HTML, we could just say {{name}}, save that, since I have my Browsersync working already. It will just go ahead and update it, message is Yaakov. But we can do more than that. We can also define a method or a function that is going to be attached to our $scope service that is going to be exposed again for us to be able to use inside of an expression. So let's go ahead and define a $scope.sayMessage, and that's going to be a function. We don't need the name. Let's put the semicolon right here. And it's just going to return, Yaakov likes to eat healthy snacks at night! We'll put a semicolon here. Okay, so once that's done, we could go to index.html, and here, we could say sayMessage, and we have to put the parens behind it, because this is a function and we want to execute that. And if I save that, you see here, now it says, Yaakov likes to eat healthy snacks at night! So believe it or not, what's really going on here is that Angular is evaluating the strings that are right here between the beginning of controller and end of controller, and it's interpolating them, in other words, it's looking for these placeholders and it goes ahead and evaluates them. In this case, it's evaluating a function call. So if you take a look at the page source, not the actual dump, but the page source, you can ignore this document.write, because that's just an injection that Browsersync does for you, so ignore that. But if you look at the page source, you see our ng-controller, and you see it's in our original state here, sayMessage with those curly braces. But if we close that and look at elements and look at our ng-controller right here, you could see that it's really two strings, Message is:, br, and the Yaakov likes to eat healthy snacks at night!, two strings concatenated together. And that's how we get our, Yaakov likes to eat healthy snacks as one string together with this messages. And we can obviously concatenate more than one placeholder. So for example, instead of messages, we can say something like, name has a message for you:, and we'll save that, and now it will say, Yaakov has a message for you, and Yaakov likes to eat healthy snacks at night. And you could see here that we concatenated all these strings together to form the contents of the body of this div. Now, I also told you that if you place something that throws a ReferenceError or TypeError, it will just print nothing. So let's just go ahead, instead of sayMessage, we'll go ahead and put some nonsense in here that doesn't really exist and we'll save that. As you can see, there's no errors thrown and it's completely blank. And in fact, if we look at the elements, you'll see that there's just nothing there. It evaluated to an error, obviously, this is an error, because there's no such property sitting on the scope. And since this is a TypeError, or maybe it's a ReferenceError, I can't remember, but I think it's just a TypeError. Either way, it's not going to output anything, it's just going to leave it as blank. And if you change it back and finally have something that does evaluate to a function on the scope, you can see that it's back, and Browsersync updated for us, Yaakov likes to eat healthy snacks at night. So to summarize, we spoke about expressions in Angular, and an expression is something that turns into some value. And in Angular, it's denoted by double curly braces, or some people call them mustaches and some people call them handlebars. Angular expressions are also tied to the scope they're in. So whatever the scope that you are currently located in within your HTML, or the piece of the HTML page you're in, the expressions in Angular will feed off of that scope. And also, an important point is, the expressions in Angular don't display TypeError or ReferenceError to the user, which is very helpful, because if there is such an error, you certainly don't want that showing up right in the HTML page. We also spoke about interpolation, which is basically a process that takes these placeholders in a string literal and replaces them with some values. In Angular, these placeholders are usually expressions. And the result is automatically updated when the placeholder value changes. So if anything changes that property on the scope, the result of that expression in the HTML page will automatically be updated by Angular.
