“Controller as"的优势是什么?在角? [英] What is the advantage of "Controller as" in Angular?

问题描述

在 Angular 中使用Controller as"语法有什么好处?只是为控制器创建别名还是在幕后有其他一些技术原因?

我是 Angular 的新手，想了解更多关于这种语法的信息.

解决方案

controllerAs-syntax 有多重优势:

清晰

考虑以下示例:

<h2>改善您的生活！</h2><p ng-controller="paragraphController">我们经常谈论{{topic}}，但我们真的了解它吗?阅读本文以增强您对{{topic}}的了解</p>

光看这段代码，你是分不清topic从哪里来的.它属于 containerController，属于 paragraphController 还是只是来自上面的 sone 输入的随机浮动范围变量?

通过使用 controllerAs 很清楚:

<h2>改善您的生活！</h2><p ng-controller="paragraphController 作为段落">我们经常谈论{{paragraph.topic}}，但我们真的了解它吗?阅读本文以增强您对{{paragraph.topic}}的了解</p>

您可以立即看到topic 是paragraphController 的一个属性.这使得代码整体更具可读性，因为它迫使开发人员明确范围中的函数和变量属于谁.

绑定到属性

当您使用旧的 controller 语法时，当您在不同范围内对相同"变量进行多个绑定时，可能会发生奇怪的事情.考虑这个例子:

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

</表单>

看起来两个 input 都绑定到同一个变量.他们不是.当您首先编辑第一个 input 时，一切看起来都正常，但是一旦您编辑第二个，它们将不再同步.这与范围继承和绑定的工作方式有关(对此有一个很好的答案在SO).当您绑定到对象属性时(也就是当您的 ng-model-attribute 中有 . 时)不会发生这种情况.使用 controllerAs 无论如何你都绑定到控制器对象的属性，所以它自然地解决了这个问题:

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

</表单>

它摆脱了范围(大部分)

使用 scope 在旧的 Angular 代码中创建与 controller 的绑定很难阅读、难以理解并且如果您使用 controllerAs.您不再需要将 scope 注入每个 controller，事实上，您可能不会在大多数应用程序中注入它(如果您想这样做，您仍然需要这样做)使用角度事件系统).这导致控制器代码更简洁，样板文件更少.

它为 Angular 2 做准备

在 angular 2 中，scope 将消失并且我们将把所有东西都写成组件.使用 controllerAs 可以让您在没有 scope 的情况下工作，并迫使您思考更多面向组件的问题，从而为 2.0 更新做好准备(以及您最终要迁移的应用程序).

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

这篇关于“Controller as"的优势是什么?在角?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！