var vs this vs $scope in AngularJS (1.4)

Question

Hi I am learning angular and have lost my mind understanding the difference between 'var', 'this' and '$scope'.
Although I read this link but it went above my head.
When I use ng-controller="myController as ctrl" , I only have access to the variables and function set on this.
Whereas defining ng-controller="myController" I only have access to variables and function set on $scope.
Can some one please explain this topic in depth?

Answer 1

The keyword var is pure javascript and is just how you declare variables in javascript. Like so:

var myName = 'Nikolaj';
var myAge = 1700;
// etc.

If you're unfamiliar with var you should start by learning Javascript before venturing into Angular, since the learning curve of Angular can be quite steep.

With that said I'll try to explain the other concepts.

Using controllerAs

When using the recommended controllerAs syntax, you get a reference to the controller instance in your template. This is what happens when you use <div ng-controller="myController as ctrl"></div>;

Your controller is basically "newed" and stored in a variable called ctrl which is made available in the template by angular. This allows you to access your controller members (public functions and variables) in the template like this:

<div ng-controller="myController as ctrl">
    <p>{{ctrl.name}}</p>
</div>

In order for the variable name to be available in the template, it must first be declared as a public member/variable of your controller. That is where the this-keyword comes into play. When you create your controller, to make the variable name public, you'd do it like this:

angular.module('app').controller('myController', function(){
    this.name = 'My name variable';
});

Here this is a special concept in Javascript that is a reference to the function context - but just basic Javascript.

Using $scope

When you instead use your controller like this: <div ng-controller="myController"></div> you don't have direct access to the controller instance in your template. Instead, every time you use something in an Angular expression, for instance {{name}}, Angular implicitly assumes the variable name exists on the $scope variable. Each controller has a $scope variable associated with it when it is linked to the template. To access this variable inside your controller body, you'll access it like this:

angular.module('app').controller('myController', function($scope){
    $scope.name = 'My name variable';
});

---

The reason why the controllerAs syntax is recommended, is in part because when using $scope, it can be difficult to determine which scope you're referring to when you have multiple nested scopes (i.e. nested controller). As in this example:

<div ng-controller="FirstController">
    <h1>{{firstControllerVariable}}</h1>
    <div ng-controller="SecondController">
        <h2>{{whereDoIBelong}}</h2>
    </div>
</div>

With the controllerAs syntax, it is pretty clear which variable belongs to which controller:

<div ng-controller="FirstController as first">
    <h1>{{first.firstControllerVariable}}</h1>
    <div ng-controller="SecondController as second">
        <h2>{{second.iKnowWhereIBelong}}</h2>
    </div>
</div>

Another reason to use the controllerAs syntax is because it'll make it easier to migrate to ES2016 and above.