什么是＆QUOT的优势;控制器＆QUOT;在角？ [英] What is the advantage of "Controller as" in Angular?

问题描述

什么是使用控制器为角语法的优势在哪里？难道只是为控制器创建别名还是有幕后的一些其他技术原因？

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 scenes?

我新的角度，想知道更多关于这个语法。

I am new to Angular and want to know more about this syntax.

推荐答案

controllerAs -syntax具有多重优势：

controllerAs-syntax has multiple advantages:

Clartiy

请看下面的例子：

<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>

通过阅读这一块code，你不能告诉其中主题从何而来。它是否属于的ContainerController ，到 paragraphController 或者是从上面宋输入只是一个随机浮动范围的变量？

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?

通过使用 controllerAs 这是很清楚的：

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>

您可以立即看到主题是 paragraphController 的属性。这使得code很多更具可读性的整体，因为它迫使开发商作出明确谁在范围的函数和变量属于

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.

绑定到属性

当您使用旧的控制器语法，当你在不同的范围多个绑定相同的可变奇怪的事情都可能发生。考虑这个例子：

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>

看起来既像输入，则绑定到同一个变量。他们不是。一切看起来像它在编辑第一个输入第一，但只要​​你编辑第二个，他们不会同步上涨了正常工作。这与方式的范围，继承和结合工作（做，有一个很好的答案在这在SO ）。当您绑定对象属性（又名时，有一个这不会发生。在 NG-模型 -attribute ）。随着 controllerAs 绑定到反正控制器对象的属性，所以它自然解决了这个问题：

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)

使用范围以创建绑定控制器 S IN老角code是难以阅读，很难理解，如果你使用完全没有必要 controllerAs 。您不必再注入范围到每一个控制器，其实你可能不会在任何在大多数注入它应用程序（你仍然需要做的，所以如果你想使用角事件系统）。这将导致清洁控制器 - code有那么奇怪的样板。

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.

据有关角2

在角2，范围将消失，作为组件的，我们会写的一切。使用 controllerAs 让您无需范围，并迫使你觉得工作更加组件化，从而$ ​​P $ pparing你（与应用程序，你最终将要迁移）的2.0更新。

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.

这篇关于什么是＆QUOT的优势;控制器＆QUOT;在角？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！