The Dot

AngularJS Video Tutorial by

Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 184 of the free egghead.io lessons, plus get AngularJS content delivered directly to your inbox!



Existing egghead subscribers will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.




AngularJS 1.3: Controllers can no longer be global functions.

As of AngularJS 1.3, controllers can no longer reside on window as a globally accessible function. Controllers must be declared as part of an Angular module. For more details click here

Edit

The Dot

3:02 AngularJS lesson by

This brief video examines the importance of a single . within your AngularJS application. It uncovers a potential gotcha when it comes to inheritence.

Find the code for this lesson on JSBin.

AngularJS 1.3: Controllers can no longer be global functions.

As of AngularJS 1.3, controllers can no longer reside on window as a globally accessible function. Controllers must be declared as part of an Angular module. For more details click here

egghead.io comment guidelines

egghead.io
Avatar

This brief video examines the importance of a single . within your AngularJS application. It uncovers a potential gotcha when it comes to inheritence.

John Lindquist: Let's take a step back and talk about this dot right there and talk about why it's so important.

Let's add another input and let's put it right here, so it's more on the root scope. With an ngModel data message, and then display the message, the data message. Then let's copy this and paste this in the first controller and duplicate that and create a second controller.

We're also going to need, we'll delete that and create a second controller here. All right.

We're all set up to have root, first, second. You can see as I go through these, it still updates as I switch between the different inputs.

If you don't include the dot in there, if you don't create a data object and put the message property on that object, let's see what happens. We'll just replace everything in data dot message with just message. You'll see a lot of examples like this.

Now if I refresh, you'll see root, first, second. You can see that this is, the behavior is completely changed. This doesn't update with the first controller or the second.

Basically, what's happened is you've overwritten this message property in the new scope, so first controller and second controller. They're no longer communicating with each other. You've destroyed that. That scope inheritance that existed before.

If you want to keep that intact and this can also come into play when you're injecting properties and services and stuff that you want to bind to. If you want to keep that intact, always make sure you're creating a model like that, like this data message. That's just our model that will bind everywhere.

Featured series:

Angular Automation with Gulp

Angular Automation with Gulp

Related lessons: