Angular 2.0迁移路径 [英] Angular 2.0 migration path

问题描述

我正在准备讨论今天准备为Angular 2.0做好准备"，我打算讨论为了简化迁移路径而需要进行的应用程序结构更改(我知道Angular 2.0尚未准备好，但是基本概念是准备好).

I am preparing a talk about "Be ready for Angular 2.0 today" and I intend to talk about application structure changes needed in order to make the migration path easier (I know, Angular 2.0 is not ready, but the basic concepts are ready).

为了演示一个之前"应用程序，我启动了一个演示项目，以普通的旧" Angular 1.x方式编写.然后，我打算将该应用程序的结构更改为组件树，并通过属性(类似于Angular 2中的属性绑定和事件绑定)在组件(指令)之间进行通信.事件绑定将通过属性event-methods进行.下一步将更改代码以使用Typescript，然后最后一部分将使用实际的Angular 2.0编写相同的应用程序.

I started a demo project in order to demonstrate a "before" app, written the plain "old" Angular 1.x way. I then intend to change this app's structure to be written as component tree and communicate between components (directives) via attributes (similar to property binding and event binding in Angular 2. The event binding will be via attribute event-methods). The next step will be changing the code to use Typescript and then last part will be to write the same app using actual Angular 2.0.

我的问题是-我有用Angular 1.x编写的html输入，使用ng-model和两种方式进行数据绑定.我想尽可能地将其更改为"Angular 2 way"-意味着通过属性和事件与其父组件进行通信.这是我的演示项目(用虚线标记了组件故障)

My question is - I have html inputs written in Angular 1.x, using ng-model, and two way databinding. I want to change it to be as much "Angular 2 way" as I can - meaning communicate with their parent component via attributes and events. This is my demo project (component breakdown is marked using dashes)

我想到的唯一方法就是不使用ng-model，例如:

The only way I can think about doing it is not using ng-model, something like:

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

任何评论将不胜感激！

推荐答案

要使其成为最Angular 1的方法，最简单的方法是在Angular 2 ng-model中使用模板驱动的表单(请参见示例.

To make it the most Angular 1 way, the simplest would be to use template driven forms in Angular 2 ng-model (see 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的情况下使用ng-model，因为它仅将模型与视图同步，反之亦然.这将是输入的Angular 2版本:

If you prefer not to use the form builder API, ng-model can be used without it as it only synchronizes the model with the view and vice-versa. This would be the Angular 2 version for the input:

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

这篇关于Angular 2.0迁移路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！