Angular2のチュートリアル体験
LEARNING ANGULARを参照すると
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を参照
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はインストールしたのでgit cloneでそのまま行けそう
1. git clone https://github.com/angular/quickstart.git quickstart
2. cd quickstart
3. npm install
4. npm start
なんかブラウザで表示された
とりあえずこれで1.のSetupは完了？かな？
*家に帰って別macでやったらnpm startでエラーになった。ここを参照してpackage.jsonの"@types/selenium-webdriver": "^2.53.33"を"@types/selenium-webdriver": "2.53.33"に変更して再度npm installして解決。無事npm startできた
いよいよ本命のチュートリアル
一ページ目はたぶんどんなの作るのかっていう解説だと思うので2ページ目から。
そこら辺が知りたければ自分で。
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)を更新
export class AppComponent {
title = 'Tour of Heroes';
hero = 'Windstorm';
}
さらに同一ファイルで@componentのtemplate部分を編集してさっきのプロパティを読み込んだ形に変更
template: '<h1>{{title}}</h1><h2>{{hero}} details!</h2>'
これを保存するとnpm startしてれば画面が勝手に切り替わる…はず。localhost:3000
interpolation （補間？）について詳しく知りたい場合はこちらを参照だそうだけどとりあえずスルー。
後で余裕があるときに読む。多分読まない。いや読む。
importしてる所のすぐ下にHero Classを追加
import { Component } from '@angular/core';
//--追加 ここから
export class Hero {
id: number;
name: string;
}
//--追加 ここまで
するとさっき変更したAppComponentでHero Classを使えるので利用する形に変更
export class AppComponent {
title = 'Tour of Heroes';
hero: Hero = {
id: 1,
name: 'Windstorm'
};
}
でさらに同じようにtemplateも編集
template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>'
あとは見た目悪いからHTML整えようぜ的な内容かな
こうしてみたり
template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2><div><label>id: </label>{{hero.id}}</div><div><label>name: </label>{{hero.name}}</div>'
複数行出かけるようにしてみたり
template:`
<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div><label>name: </label>{{hero.name}}</div>
`
input追加してみたり
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>
`
双方向データバインディングの話
双方向バインンディングについては双方向データバインディングを学ぶを参照しました。
分かりやすくは説明できないので詳しくはもうちょっとどっかで本格的に学ぶ必要があると思う。
とりあえず双方向バインディングをしたい。
そのためにはapp/app.module.tsを編集
FormsModulepackageをimportする必要があるようで、さらに@NgModuledecorator's のimportsを配列にFormsModuleを追加
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とかTwo-way binding with NgModel
今は無視
ここまでで二つのファイルを編集してそれぞれこんな感じになったはず
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'
};
}
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/