mac OSX El Capitan Sierra で Angular 2 入門 (チュートリアル体験)　1

#Angular2のチュートリアル体験

[LEARNING ANGULAR](https://angular.io/docs/ts/latest/guide/learning-angular.html)を参照すると

```
1. Setup for local Angular development, if you haven't already done so.

2. Take the Tour of Heroes tutorial.
    The Tour of Heroes takes you step-by-step from setup to a full-featured example that demonstrates the essential characteristics of a professional
    application: a sensible project structure, data binding, master/detail, services, dependency injection, navigation, and remote data access.

//イカ省略
```
とあるので1.のセットアップから2.のチュートリアルまでを一通りやってみる。
めちゃくちゃクエッションマークばっかりで間違いもあると思うけど、自分用の備忘録に。

#1.に従ってSetup

[SETUP FOR LOCAL DEVELOPMENT](https://angular.io/docs/ts/latest/guide/setup.html)を参照

```
1. Create a project folder (you can call it quickstart and rename it later).
2. Clone or download the QuickStart seed into your project folder.
3. Install npm packages.
4. Run npm start to launch the sample application.
```

この前[nodeはインストールした](http://qiita.com/chimakei/items/28f746b0b65d37595565)ので`git clone`でそのまま行けそう

```
1. git clone https://github.com/angular/quickstart.git quickstart
2. cd quickstart
3. npm install
4. npm start
```

なんかブラウザで表示された
![スクリーンショット 2016-12-18 14.13.55.png](https://qiita-image-store.s3.amazonaws.com/0/97116/36b9787f-9ecd-d1ef-ceaa-e6f04f6c631c.png)

とりあえずこれで1.のSetupは完了？かな？

*家に帰って別macでやったら`npm start`でエラーになった。[ここ](http://stackoverflow.com/questions/41232228/running-npm-start-fails-due-to-error)を参照してpackage.jsonの`"@types/selenium-webdriver": "^2.53.33"`を`"@types/selenium-webdriver": "2.53.33"`に変更して再度`npm install`して解決。無事`npm start`できた

#いよいよ本命のチュートリアル
[TUTORIAL: TOUR OF HEROES](https://angular.io/docs/ts/latest/tutorial/)

一ページ目はたぶんどんなの作るのかっていう解説だと思うので2ページ目から。
そこら辺が知りたければ自分で。

[THE HERO EDITOR](https://angular.io/docs/ts/latest/tutorial/toh-pt1.html)

```
Follow the setup instructions for creating a new project named angular-tour-of-heroes after which the file structure should look like this:
```

？？？…しょっぱなからワカンね。英語よくわかんね。
と思ったけど、quickstartをフォルダ名だけ変えてcloneしろってことか・・・。
`When we're done with this first episode, the app runs like this live example.`は終わったらこうなってるはずっていうサンプルかな？

というわけでSetupのcloneのフォルダ名だけ変えてあとは同じように実行

```
$ git clone https://github.com/angular/quickstart.git angular-tour-of-heroes
$ cd angular-tour-of-heroes/
$ npm install
$ npm start
```
`npm start`で自動でコンパイルしてくれるらしい？からガンガン更新しようZE
ここまではチュートリアル環境作ろうぜという内容

#ここからようやくチュートリアル

まず`app/app.component.ts`の一部(AppComponent class)を更新

```ts:app.component.ts
export class AppComponent {
  title = 'Tour of Heroes';
  hero = 'Windstorm';
}
```

さらに同一ファイルで`@component`のtemplate部分を編集してさっきのプロパティを読み込んだ形に変更

```ts:app.component.ts
template: '<h1>{{title}}</h1><h2>{{hero}} details!</h2>'
```

これを保存すると`npm start`してれば画面が勝手に切り替わる…はず。[localhost:3000](http://localhost:3000/)

`interpolation `（補間？）について詳しく知りたい場合は[こちら](https://angular.io/docs/ts/latest/guide/displaying-data.html)を参照だそうだけどとりあえずスルー。
後で余裕があるときに読む。多分読まない。いや読む。

`import`してる所のすぐ下にHero　Classを追加

```ts:app.component.ts
import { Component } from '@angular/core';
//--追加 ここから
export class Hero {
  id: number;
  name: string;
}
//--追加 ここまで

```

するとさっき変更した`AppComponent`でHero Classを使えるので利用する形に変更

```ts:app.component.ts
export class AppComponent {
  title = 'Tour of Heroes';
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}
```

でさらに同じようにtemplateも編集

```ts:app.component.ts
template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>'
```

#あとは見た目悪いからHTML整えようぜ的な内容かな

こうしてみたり

```ts:app.component.ts
template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2><div><label>id: </label>{{hero.id}}</div><div><label>name: </label>{{hero.name}}</div>'
```

複数行出かけるようにしてみたり

```ts:app.component.ts
template:`
  <h1>{{title}}</h1>
  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>
  <div><label>name: </label>{{hero.name}}</div>
  `
```

`input`追加してみたり

```ts:app.component.ts
template:`
  <h1>{{title}}</h1>
  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>
  <div>
    <label>name: </label>
    <input value="{{hero.name}}" placeholder="name">
  </div>
  `
```

#双方向データバインディングの話

双方向バインンディングについては[双方向データバインディングを学ぶ](http://liruu.com/angularjs/angularjs-note/chap05.html)を参照しました。
分かりやすくは説明できないので詳しくはもうちょっとどっかで本格的に学ぶ必要があると思う。

とりあえず双方向バインディングをしたい。
そのためにはapp/app.module.tsを編集
`FormsModule`packageをimportする必要があるようで、さらに`@NgModule`decorator's の`imports`を配列にFormsModuleを追加

```ts:app.module.ts 
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// 追加
import { FormsModule }   from '@angular/forms';

import { AppComponent }  from './app.component';

@NgModule({
  imports:      [
    BrowserModule,
    // 追加
    FormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
```

ここら辺を詳しくやりたい場合はGUIDE的にはかなり先の章になっている二つを参照するといいらしい
[FORMS](https://angular.io/docs/ts/latest/guide/forms.html#!#ngModel)とか[Two-way binding with NgModel](https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngModel)

今は無視

ここまでで二つのファイルを編集してそれぞれこんな感じになったはず

```ts:app.component.ts
import { Component } from '@angular/core';
export 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>
      <input [(ngModel)]="hero.name" placeholder="name">
    </div>
    `
})
export class AppComponent {
  title = 'Tour of Heroes';
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}
```

```ts:app.module.ts 
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';

import { AppComponent }  from './app.component';

@NgModule({
  imports:      [
    BrowserModule,
    FormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
```

これで最初のステップは終了

inputに入力すると画面に反映されるはず
[http://localhost:3000/](http://localhost:3000/)