What is the advantage of "Controller as" in Angular?

controllerAs

-syntax has several advantages:

Clartiy

Consider the following example:

<div ng-controller="containerController">
    <h2>Improve your life!</h2>
    <p ng-controller="paragraphController">
        We talk about {{topic}} a lot, but do we really understand it? 
        Read this article to enhance your knowledge about {{topic}}
    </p>
</div>

      

        
        
        
      

    

Just by reading this piece of code you cannot tell where it comes from topic

. Does it refer to containerController

, to paragraphController

or is it just a random floating-scoped variable from the sone input above?

Using controllerAs

this is very clear:

<div ng-controller="containerController as container">
    <h2>Improve your life!</h2>
    <p ng-controller="paragraphController as paragraph">
        We talk about {{paragraph.topic}} a lot, but do we really understand it? 
        Read this article to enhance your knowledge about {{paragraph.topic}}
    </p>
</div>

      

        
        
        
      

    

You can see at a glance what topic

the property is paragraphController

. This makes the code more readable in general, as it forces the developer to clearly state who functions and variables in scope

.

binding to properties

When you use the old syntax controller

, strange things can happen when you have multiple bindings in different scopes to the "same" variable. Consider this example:

<form ng-controller="myFormController">
    <input type="text" ng-model="somefield">

    <div ng-controller="someOtherController">
        <input type="text" ng-model="somefield">
    </div>
</form>

      

        
        
        
      

    

It looks like both are input

bound to the same variable. They are not. Everything looks good when you edit the first one first input

, but as soon as you edit the second, they won't sync anymore. It has to do with how inheritance and scope binding work ( and there is a great answer for that on SO ). This doesn't happen if you bind to object properties (also when ng-model

-attribute is .

). Since controllerAs

you always bind to properties of the controller objects, so it naturally solves this problem:

<form ng-controller="myFormController as myForm">
    <input type="text" ng-model="myForm.somefield">

    <div ng-controller="someOtherController as other">
        <input type="text" ng-model="myForm.somefield">
    </div>
</form>

      

        
        
        
      

    

He gets rid of scope

(mostly)

Using scope

to create bindings controller

in old angular code is difficult to read, difficult to understand and completely unnecessary if you are using controllerAs

. You don't need to type scope

in every one anymore controller

, in fact you probably won't be typing it in any of most applications (you still need to do this if you want to use angular's event system). The result is cleaner controller code with a less weird pattern.

It prepares for angular 2

In angular 2, scope

will disappear and we will write everything as components . Using controllerAs

it allows you to work without scope

and forces you to think more component-oriented, thereby preparing you (and the applications that you will eventually want to port) for the 2.0 update.