How does AngularJS $scope relate to JavaScript function scope?

JavaScript Function Scope and $scope

Man 1: [00:00] In the previous videos, we've seen why scope is important in Javascript in general. Now, it's time to take a look at how scope is important in Angular. 

[00:08] I think a lot of people get confused when they first start out because there's also a thing in Angular called scope, but I really want to explain how it's exactly the same thing that we've seen previously as scope in Javascript itself. 

[00:24] To show how this works, we're taking a look at a basic HTML page here. We have two divs. Note that these are siblings of one another. In the first one, we have access to a Javascript scope that's called the first control. 

[00:41] This scope is assigned to a thing called a controller in Angular. Let's not get too tripped up about what this is just now. The important thing to notice about this is that it creates a scope. The second controller creates a second scope.

[00:54] If we notice these two things are siblings, if we continue our desktop metaphor, they're like having two folders on our desktop, each of which creates a separate thing called posts. We just want to inspect each of those post things.

[01:11] Let's take a look at our controllers here. We're going to create a thing called posts and assign it to one, two, and three. Down here, we're going to create a thing called posts and assign it to four, five, and six. Let's just take a look at our application so far.

[01:26] This is a weird thing, right? We expected to see each of these because we have them in our scope. The thing to note about Angular, however, is that it has a special thing called $scope. This is going to take the scope that's created by this function and expose it to our HTML.

[01:46] This lets our view see the scope that was created by that function. Here, if I say scope.post equals post, and I do the exact same thing down here, now we get exactly what we expect. One, two, three, and four, five, and six.

[02:02] What this allows us to do is to create a nice, public interface that we're able to expose to our HTML. We can hide some of the other intricacies and nuances here inside our controller without exposing it to the view.

[02:16] Scope resolution of our Angular documents works exactly the same way scope resolution works in plain, old Javascript. The only difference here is that what actually matters about scope inheritance is the structure of our dom.

[02:34] Here, if I move the second control in here, and I refresh, we get exactly the same thing. The reason is because the second control creates its own scope, and in that scope, we have scope.post defined. Let's say scope.post is not defined in here.

[02:56] Now, it becomes equal to one, two, and three. The reason is, if we look back at previous videos, is because the second controller doesn't find post on itself, so lookup proceeds to the parent controller. The only difference, again, being that the dom layout is what dictates how scope resolution works in Angular.

[03:22] There's a very particular thing in Angular called root scope. Here, what I want to do is...in fact, let's actually just inject this into run. I want to inject the provider root scope. Root scope is the scope that's created at the base of the application.

[03:42] The base of the application is determined by this NGApp directive. This is where the root scope is defined. Each of the child scopes are new scopes within root scope. This div with the first control is a child of root scope, and this div is a child of the scope created by first control.

[04:04] If on root scope, what I do is expose post as one, two, and three, well, actually, let's make it four, five, and six so we can see the change here. Now, in fact, let's just delete this guy from here. Both of these have access to the root scope even though neither of their scopes defines this post thing.

[04:26] Lookup proceeds exactly the same way as it does in traditional Javascript, up through the scope chain. The only difference is the scope chain in Angular is equivalent to our dom hierarchy.

[04:39] I want to show you why you never want to depend on this. I don't want you worrying about scope inheritance in Angular because it's a really, really bad idea. What we're going to do is just to delete this, and instead, we're going to redeclare scope.post equals, in this case, we'll just say one, two, and three.

[05:01] In this case, we see that our dom is structure such that we have this nesting going on, exactly the same as before. These changed to one, two, and three. Let's say our second controller is relying on this structure to exist.

[05:17] In any program, we want our components to depend on other components that are likely to change less than they do. There is nothing in the world that changes more often than the layout of a page. If you have designers working on your team, if you have a CEO to report to or a product manager to report to, they're going to want to change the look and the feel of the website on a whim.

[05:48] If they decided tomorrow that we, in fact, are not going to have this nested structure, suddenly the second controller breaks. We don't want this to happen. Instead of allowing our controllers to break, what we want to do is to isolate our elements so that they're available anywhere.

[06:08] There are a series of great videos already by John about creating isolate scopes, and that's exactly what John's talking about in those videos. He's showing you how to isolate these scopes so we do not depend on dom hierarchy.

[06:23] If you're interested in learning a bit more about scoping in Angular, I encourage you to take a look at those videos. This should explain to you how scoping in Angular is exactly like it is in plain, old Javascript.

[06:35] In the next video, I want to continue to dive into how Angular scoping is similar to Javascript scoping, and we'll also take a look at other directives in Angular that create scopes for us, and how we can use this knowledge of scopes to create robust and isolated Angular elements.

[06:54] Take a look out for that, guys, and take it easy. 

JavaScript Function Scope and $scope

Share this video with your friends