Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
The concept of ‘scope’ in Angular is one of the most challenging concepts to understand and master - but it’s also one of the most important! One of the challenges to understanding scope is that there multiple scopes in an application, and those scopes can overlap. In this video, we’ll go through some simple examples that will give us a solid foundation in understanding scoping in an Angular app.
- Andrew Chalkley talking about prototypical inheritance
- Angular docs on scope.
-
0:00
Understanding how scope works in angular is super important.
-
0:04
The problem is it can be really hard to understand.
-
0:07
Now that we have some fantastic tools to explore scope interactively,
-
0:11
we'll take a deeper look at what's going on under the hood of Angular.
-
0:15
You're welcome to follow along in work spaces, however my recommendation for
-
0:19
this video is to sit back and relax and try to wrap your mind around the concept.
-
0:24
Whatever you choose, just remember that this is a hard topic and
-
0:27
don't worry about understanding everything completely right out of the gates.
-
0:32
Plus, I've got really good news.
-
0:34
After this video this course gets easier.
-
0:37
There's a light at the end of the tunnel, just keep jogging.
-
0:40
I've added a little bit to our application to aid me in explaining scope.
-
0:44
In the app.js file, I've created a second control called cool controller.
-
0:50
It attaches one function to the scope and that function is called who am I?
-
0:55
Jumping into the index.html file,
-
0:59
I'm invoking the hello console function when the label is clicked.
-
1:04
As well is when the save button is clicked.
-
1:06
This is done through the ng click directive.
-
1:10
The who am I function is invoked, when the edit button is clicked.
-
1:18
Now the big confusing question you may be asking.
-
1:20
Is how can we use the hello consult function from the main controller,
-
1:25
when we're inside the cool controller.
-
1:28
This is cuz of something called prototypical inheritance.
-
1:32
You've probably already heard about prototypes and
-
1:34
prototypical inheritance in other JavaScript courses here on Treehouse.
-
1:38
Let's take a look at how this plays out in Angular.
-
1:42
Using ng-inspector, I see that there are now three scopes.
-
1:48
There's the root scope, the main controller scope, and
-
1:52
the cool controller scope.
-
1:54
Keep in mind, all the scopes phototypically inherit from the root scope
-
1:58
and there's only one root scope in an angular application.
-
2:02
We can see that when we fold the root scope up.
-
2:06
We won't talk too much about the root scope, but just know that is
-
2:09
generally best practice to not use the root scope directly in your application.
-
2:14
The major reason is because any function or
-
2:16
value you create in the root scope is available in every other scope.
-
2:22
Creating functions and
-
2:23
values at the root level, will quickly clutter your application.
-
2:28
Moving down the child scope of the root scope is handled by the main controller.
-
2:32
And we can see that it has one function, the Hello World function.
-
2:36
Here's where things can get confusing.
-
2:39
Because the cool controller is a child of the main controller,
-
2:42
the Hello World function is also available inside its scope.
-
2:47
And I can see that when I click the Save button.
-
2:50
Click Save, open up the console, and
-
2:55
there our hello world function fired, but from inside the cool controller's scope.
-
3:02
And as you might imagine, we have access to the who am I function,
-
3:07
inside of the cool controller.
-
3:13
I see that when I click the edit button.
-
3:19
Now let's really go up the deep end.
-
3:23
I'm going to create a function called hello world but
-
3:27
from inside the cool controller.
-
3:33
As you can see this has exactly the same name as the function
-
3:36
in the main controller.
-
3:38
We'll tell this method to log a string,
-
3:51
This is not the main controller!
-
3:58
Save that.
-
4:02
Refresh the page.
-
4:06
Remember, the hello world method is invoked on the save button when a user
-
4:10
clicks to the ng-click directive.
-
4:13
Click save, I get back the string from the method that
-
4:20
is defined on this hello world method not this hello world method.
-
4:25
Because of prototypical inheritance, the cool controller inherits functions and
-
4:29
values from the main controller.
-
4:33
Only when they don't already exist within the cool controller's scope.
-
4:38
So in this way, inheritance from the parent
-
4:41
only takes place if there's not a value or method of the same name on the child.
-
4:46
The best way to think about prototypical inheritance,
-
4:49
is that it flows only in one direction, from parent to children.
-
4:52
And this as you might expect based on how the concept was named.
-
4:56
One last thing I want to point out, just hopefully a bit more straightforward,
-
5:00
is that sibling controllers will not have access to each other's scopes.
-
5:06
Sibling's scopes are completely isolated.
-
5:09
Let's create one so you can see what I mean.
-
5:16
Okay, new controller called imASibling.
-
5:33
And we'll just attach a static value.
-
5:59
Let's add a new div.
-
6:10
And we'll say that that r controller lives in this div.
-
6:17
We'll even write the value out using an angular expression,
-
6:21
which you'll learn about shortly.
-
6:25
And now, let's take a look at our scopes.
-
6:28
Now the main controller will now have access to values created in the I'm
-
6:32
a sibling controller, and vice versa.
-
6:35
Taking a look at ng Inspector, I can see that the I'm a sibling controller
-
6:43
Is a sibling of the main controller, just as we'd expect.
-
6:49
Both scopes have prototypically inherited, from the root scope, but
-
6:53
neither one shares with each other since they're siblings.
-
6:57
Awesome work, you did it.
-
6:59
Things are about to get easier.
-
7:01
More importantly, you now have a foundation in Angular, and so
-
7:04
we can start building our app.
-
7:06
Next we're gonna use Angular's built in data binding engine
-
7:09
to add data to our to do list app.
-
7:12
Keep up the great work.
You need to sign up for Treehouse in order to download course files.
Sign up