What can be the reason to use "controllerAs" property?

Question

I am working on an AngularJS tutorial, and I see the following code:

.state('index',{
  url:"/",
  templateUrl:"views/index.html",
  controller:"IndexCtrl",
  controllerAs:"index"
})

What is the reason someone would want to use the controllerAs property?

Answer 1

Few things:

1. Reduce scope usage

Instead of loading every data in the scope of a controller, you could simply use this to load up everything that you require.

eg:

Route

state('index',{
    url:"/",
    templateUrl:"views/index.html",
    controller:"ListCtrl",
    controllerAs:"list"
})

In Controller

angular.module('feed').controller('ListCtrl', function($scope, reddit){
    var vm   = this;
    vm.names = ["Michael", "Roy"];

});

In Template:

<ul>
    <li ng-repeat="name in list.names">
        <div>{{name}}</div>
    </li>
</ul>

2. Correct scope usage

When multiple controllers come into play, scope becomes a tricky thing. Using controllerAs method will go a long way is resolving this. An example is shown below:

Wrong:

<span>Outside Controller: Your name is: {{username}}</span>
<div ng-controller="SignupController">
    <span>Inside Controller: Your name is: {{username}}</span>
    <fieldset legend="User details">
        <input ng-model="username">
    </fieldset>
</div>

Correct:

<span>Outside Controller: Your name is: {{user.name}}</span>
<div ng-controller="SignupController">
    <span>Inside Controller: Your name is: {{user.name}}</span>
    <fieldset legend="User details">
        <input ng-model="user.name">
    </fieldset>
</div>

Found an image which makes everthing more clear:

Courtesy : AngularJs "controller as" syntax - clarification?

Answer 2

Yes. A little more info:

Before the controllerAs syntax, methods and properties needed to be exposed to views by binding them to the $scope. With controllerAs, your controller instance is bound to the $scope as the property you select.

This way you can use Plain Old JavaScript Classes for your controllers.

Editorial: This is a much cleaner approach to development. One of the things that makes Angular so easy to write tests for is that your Controllers and components do not need to inherit from framework base-classes. See Backbone and Ember.

So with the old style your controllers would look like (in ES6 for simplicity):

YourController.$inject = ['$scope'];
class YourController {
  
    constructor($scope) {

        $scope.myMethod = () => { . . . };

        $scope.myProperty = true;
    }
}

With the controllerAs

class YourController {
  
    constructor() {

        this.myProperty = true;
    }

    myMethod() { . . . };
}

Just a plain old class rather than decorating or monkeypatching the $scope.