试着接触Angular 2入门：NgModel

2 年 ago
雅, 悟
2 minutes

【20160819更新】我撰写了一篇与rc.5兼容的文章。Angular 2入门：尝试使用NgModel [rc.5兼容]
请注意，本文所述内容已过时，敬请不要作为参考。

你好。我是今井。
最近，我在一个名为ng-kyoto的Angular用户社区担任组织者。由于Angular 2这个与之前的Angular JS完全不同的框架即将进入β版，我第一次开始接触它。

当我第一次接触Angular JS时，最深刻的印象是双向绑定。我很想看看在Angular 2中双向绑定是如何发展的。

请注意：本文将Angular 1.x称为Angular JS，将Angular 2.x称为Angular 2。

前提 tí) – condition, premise

    • すでにAngularJSにある程度触れられている方を対象とします。

@armorik83氏の記事を読まれた前提で話を進めていきます。
この記事時点でのAngular2のバージョンは2.0.0-alpha.47です。

官方网站

    • https://angular.io/

 

    https://github.com/angular/angular

从模型到视图

让我们试试通过MVC模型中的Model将值反映到View中。

import "reflect-metadata";
import "zone.js";
import {bootstrap, Component} from "angular2/angular2";

@Component({
    selector: "my-app",
    template: `
        <h1>{{title}}</h1>
    `
})
class MyApp {
  public title = "Hello";
}

bootstrap(MyApp);

从@armorik83的文章的角度来看，这非常简单。我们将导入看作是一个咒语，并获取所需的API。在首次启动时，我们会引入需要的引导文件和组件定义，然后进行使用。我们会使用@Component来描述类似于Angular JS中的指令的对象，并且似乎也有Decorator。我们会编写Class和HTML模板，供Component使用。最后，我们会编写最终的入口点bootstrap。

从视图到模型

在视图到模型的过程中，让我们尝试将获取的值绑定到输入元素。在Angular JS中，您可能已经使用了ng-model指令，但在Angular 2中，有一个名为NgModel的指令存在。

import "reflect-metadata";
import "zone.js";
import {bootstrap, Component, FORM_DIRECTIVES} from "angular2/angular2";

@Component({
    selector: "my-app",
    directives: [FORM_DIRECTIVES],
    template: `
        <h1>{{title}}</h1>
        <input type='text' [(ng-model)]="title">
    `
})
class MyApp {
  title: string = "Hello World!";
}

bootstrap(MyApp);

要想熟悉 TypeScript，不简单呢，但还是挺简单的。[…] 这种写法很有特点。也可以用 bindon-ng-model 的方式，但是 [(…)] 更受推崇。
[…] 表示输入属性，(…) 表示输出属性。可以认为输入属性是放置值的地方，输出属性表示值发生变化时的操作。
试试看，去掉 (…)。

import "reflect-metadata";
import "zone.js";
import {bootstrap, Component, FORM_DIRECTIVES} from "angular2/angular2";

@Component({
    selector: "my-app",
    directives: [FORM_DIRECTIVES],
    template: `
        <h1>{{title}}</h1>
        <input type='text' [ng-model]="title">
    `
})
class MyApp {
  title: string = "Hello World!";
}

bootstrap(MyApp);

我认为值已经解除了绑定。所以，让我们添加ng-model-change以在值发生更改时进行绑定。

import "reflect-metadata";
import "zone.js";
import {bootstrap, Component, FORM_DIRECTIVES} from "angular2/angular2";

@Component({
    selector: "my-app",
    directives: [FORM_DIRECTIVES],
    template: `
        <h1>{{title}}</h1>
        <input type='text' [ng-model]="title" (ng-model-change)="title=$event">
    `
})
class MyApp {
  title: string = "Hello World!";
}

bootstrap(MyApp);

这样的话，[(ng-model)]=”title” 可以被替换为 [ng-model]=”title” (ng-model-change)=”title=$event”。顺便说一下，根据了解 Angular 2，它更倾向于单向绑定而不是双向绑定的设计。从Inputs和Outputs这两个词的表达方式也可以看出这种思想。不过因为还是Alpha版本，可能会有重大改动，请注意。

最后

你觉得怎么样？我也是第一次接触Angular 2，但感觉比Angular JS更容易写。大家现在试试Angular 2怎么样？我把写的代码贴出来了。感谢ng-kyoto的大家给予的审查！明天是@rdlabo。

bannerAds