Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay
    This lesson is outdated. Click here to find out about changes you should be aware of.

    The Dot

    John LindquistJohn Lindquist

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

    angularjsAngularJS
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss