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

Solution 1:

controllerAs-syntax has multiple 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 can not tell where topic comes from. Does it belong to the containerController, to the paragraphController or is it just a random floating scope variable from sone input above?

By using controllerAs it 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 immediately see that topic is a property of paragraphController. This makes code a lot more readable overall, as it forces the developer to make clear who the functions and variables in the scope belong to.

Binding to properties

When you are using the old controller syntax, 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 inputs are bound to the same variable. They are not. Everything looks like it works fine when you edit the first input first, but as soon as you edit the second one, they won't sync up anymore. This has to do with the way scope-inheritance and binding work(and there is an excellent answer on this on SO). This does not happen when you bind to object properties (aka when there is a . in your ng-model-attribute). With controllerAs you bind to properties of the controller objects anyways, so it naturally solves that 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>

It gets rid of scope(mostly)

The use of scope to create bindings to controllers in old angular code is hard to read, hard to understand and completely unnecessary if you use controllerAs. You no longer have to inject scope into every single controller, in fact you will probably not inject it in any in most applications (you still need to do so if you want to use the angular event system). This results in cleaner controller-code with less strange boilerplate.

It prepares for Angular 2

In angular 2, scope will be gone and we will write everything as components. Using controllerAs lets you work without scope and forces you to think more component-oriented, thus preparing you (and the applications you eventually will want to migrate) for the 2.0 update.