尝试进行 Angular 2 的“英雄之旅”教程

首先

上回进行了快速入门，对Angular有了一定的了解。

所以，我想要开始做教程，但是…

「英雄之旅？（Tour of Heroes）」

Angular的教程相当有趣。
因此，我将继续进行教程。

更改目录名称

首先根据angular2-tour-of-heroes中的指示，将目录名称进行更改。

$ cd ../
$ mv angular2-quickstart/ angular2-tour-of-heroes/
$ cd angular2-tour-of-heroes

嗯，另外，关于上次的谜题，是说要始终运行npm run tsc来启动TypeScript的感知功能。

顺便说一下，在这附近使用grant之类的东西是否必要呢？因为我觉得只用tsc就足够了，这样就可以了吧？

更改标题

请提前在两个终端中执行以下命令。

$ npm run tsc

$ npm start

因为教程上说要添加以下内容，所以尝试将其添加到 app.ts 文件中。

class AppComponent {
  public title = 'Tour of Heroes';
  public hero = 'Windstorm';
}

因为还写着要添加以下内容，所以需要追加。

template: '<h1>{{title}}</h1><h2>{{hero}} details!</h2>'

结果如下。

import {bootstrap, Component} from 'angular2/angular2';
@Component({
    selector: 'my-app',
    template: '<h1>{{title}}</h1><h2>{{hero}} details!</h2>'
})
class AppComponent {
  public title = 'Tour of Heroes';
  public hero = 'Windstorm';
}

bootstrap(AppComponent);

浏览器已经变成了以下的样子。

Tour of Heroes

Windstorm details!

自動地进行变化真的很令人惊讶！但是，机制（因果关系）仍然不明。

展示英雄

由于要添加一个专门用于英雄的类，所以请将以下内容添加到app.ts的顶部。

import {bootstrap, Component} from 'angular2/angular2';
class Hero {
  id: number;
  name: string;
}
@Component({
    selector: 'my-app',
    template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>'
})
class AppComponent {
  public title = 'Tour of Heroes';
  public hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}

bootstrap(AppComponent);

最终会创造出上述的状态。

因此，有一个主题是在实施后提供更详细信息，进一步进行以下更改。

import {bootstrap, Component} from 'angular2/angular2';
class Hero {
  id: number;
  name: string;
}
@Component({
    selector: 'my-app',
    template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2><div><label>id: </label>{{hero.id}}</div><div><label>name: </label>{{hero.name}}</div>'
})
class AppComponent {
  public title = 'Tour of Heroes';
  public hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}

bootstrap(AppComponent);

如果继续这样下去，模板会变得难以阅读，所以使用Here Document可以变成以下的样子。

import {bootstrap, Component} from 'angular2/angular2';
class Hero {
  id: number;
  name: string;
}
@Component({
    selector: 'my-app',
    template: `
<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div><label>name: </label>{{hero.name}}</div>`
})
class AppComponent {
  public title = 'Tour of Heroes';
  public hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}

bootstrap(AppComponent);

注意：请使用反引号(`)，而不是单引号(‘)。这对于写Qiita的人来说很熟悉。

编辑英雄名称

接下来，我们要编写接收数据的处理程序。

import {bootstrap, Component} from 'angular2/angular2';
class Hero {
  id: number;
  name: string;
}
@Component({
    selector: 'my-app',
    template: `
  <h1>{{title}}</h1>
  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>
  <div>
    <label>name: </label>
    <div><input value="{{hero.name}}" placeholder="name"></div>
  </div>
`
})
class AppComponent {
  public title = 'Tour of Heroes';
  public hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}

bootstrap(AppComponent);

使用输入框进行输入。
然而，由于这样无法反映输入数据，所以将input部分更改如下。

<input [(ng-model)]="hero.name" placeholder="name">

我被告知要添加NgModel…

EXCEPTION: No value accessor for ' ' in [null]

最後他們告訴你要用FORM_DIRECTIVES，最終結果如下：

import {bootstrap, Component, FORM_DIRECTIVES} from 'angular2/angular2';
class Hero {
  id: number;
  name: string;
}
@Component({
  selector: 'my-app',
  template:`
    <h1>{{title}}</h1>
    <h2>{{hero.name}} details!</h2>
    <div><label>id: </label>{{hero.id}}</div>
    <div>
      <label>name: </label>
      <div><input [(ng-model)]="hero.name" placeholder="name"></div>
    </div>
    `,
  directives: [FORM_DIRECTIVES]
})
class AppComponent {
  public title = 'Tour of Heroes';
  public hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}
bootstrap(AppComponent);

当你在浏览器上看到这个时，更改英雄名字将立即反映出来。

最后

只要把代码放在程序的哪个部分就能解决问题，可能是因为英语的影响，我很难理解。就连把@Component的”directives”放在”selector”之上也不能正常运行……。

尽管如此， Angular 的特色即数据绑定仍然令人印象深刻，输入的文字能够立即反映出来真是太棒了。相比 Angular 1，对 HTML 的负担减少了，因此感觉更加易于处理。

而且，我认为@ Component的范围已经限制在内部，所以对数据的修改只影响其中一部分，这也是一个很好的变化。
另一方面，我不知道该如何编写才能在整个应用中应用想要的变量（例如在index.html中写上{{hero.name}}但没有转换）。

另外，無法將模板部分以HTML文件的形式導出非常不方便。我期待在接下來的教程中找到解決這個問題的方法。