What is the advantage of using \"Controller as\" syntax in Angular? Is it just to create an alias for a controller or does it have some other technical reasons behind the sc
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 input
s 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 controller
s 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.