Angular 2.0迁移路径

Angular 2.0 migration path

我正在准备一个关于 "Be ready for Angular 2.0 today" 的演讲,我打算讨论为使迁移路径更容易而需要进行的应用程序结构更改(我知道,Angular 2.0 还没有准备好,但是基本概念准备好了)。

我开始了一个演示项目以演示 "before" 应用程序,以 "old" Angular 1.x 的方式编写。然后我打算更改此应用程序的结构以编写为组件树并通过属性在组件(指令)之间进行通信(类似于 属性 绑定和 Angular 中的事件绑定 2.事件绑定将通过属性事件方法)。下一步将更改代码以使用 Typescript,然后最后一部分将使用实际 Angular 2.0.

编写相同的应用程序

我的问题是 - 我使用 ng-model 和双向数据绑定在 Angular 1.x 中编写了 html 输入。我想尽可能多地将其更改为 "Angular 2 way" - 这意味着通过属性和事件与其父组件进行通信。这是我的演示项目(组件分解用破折号标记)

我能想到的唯一方法就是不使用 ng-model,比如:

<input ng-keyup="ctrl.event()" value={{ctrl.value}} />

任何意见将不胜感激!!

要使其成为最 Angular 1 种方式,最简单的方法是在 Angular 2 ng-model 中使用模板驱动表单(参见 here), and compare that with a ng-model Angular 1 form. Apart from some template syntax changes, they should look very similar. check here for a running example.

如果您不想使用表单生成器 API,ng-model 可以在没有它的情况下使用,因为它只使模型与视图同步,反之亦然。这将是输入的 Angular 2 版本:

<input [(ng-model)]="value" (keyup)="event()">