The Dot

AngularJS - The DotAngularJS Video Tutorial by John Lindquist

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


The ability to reply to discussions is limited to PRO subscribers. Want to join in the discussion? Click here to subscribe now.

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.


index.html

<!DOCTYPE html>
<html>
<head>
  <title>AngularJS Tutorials</title>
  <link rel="stylesheet" href="vendor/foundation/foundation.min.css">
</head>
<body>

  <div ng-app="">
    <input type="text" ng-model="data.message">
    <h1>{{data.message}}</h1>

    <div ng-controller="FirstCtrl">
      <input type="text" ng-model="data.message">
      <h1>{{data.message}}</h1>
    </div>

    <div ng-controller="SecondCtrl">
      <input type="text" ng-model="data.message">
      <h1>{{data.message}}</h1>
    </div>
  </div>

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
  <script type="text/javascript" src="main.js"></script>
</body>
</html>

index_unbind.html

<!DOCTYPE html>
<html>
<head>
  <title>AngularJS Tutorials</title>
  <link rel="stylesheet" href="vendor/foundation/foundation.min.css">
</head>
<body>

  <div ng-app="">
    <input type="text" ng-model="message">
    <h1>{{message}}</h1>

    <div ng-controller="FirstCtrl">
      <input type="text" ng-model="message">
      <h1>{{message}}</h1>
    </div>

    <div ng-controller="SecondCtrl">
      <input type="text" ng-model="message">
      <h1>{{message}}</h1>
    </div>
  </div>

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
  <script type="text/javascript" src="main.js"></script>
</body>
</html>

main.js

function FirstCtrl($scope){

}

function SecondCtrl($scope){

}

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.

Tech logo bar

Don't miss out on the latest PRO lessons.

Get Your PRO Subscription Now

Because you like code... not PowerPoint slides.