More Related Content
Similar to Angular2実践入門 (20)
More from Shumpei Shiraishi (20)
Angular2実践入門
- 5. スターターキット作りました
• https://goo.gl/WiM2zn
– 短縮前: https://github.com/shumpei/angular2-webpack-starter-minimum
• Angular2をWebpackで始めるための最小構成。
– 教育用途、もしくは開発環境を自作したい人向け
• Out-of-boxを求めるなら以下がおすすめ
– angular-seed・・・公式のスターターキット。全
部入り。
– angular-webpack-starter・・・それなりにコンパ
クトで割と全部入り
- 6. 動かしてみる
$ git clone https://github.com/shumpei/angular2-
webpack-starter-minimum
$ cd angular2-webpack-starter-minimum
$ npm install
$ npm start
http://localhost:8080/webpack-dev-server/
- 10. import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
templateUrl: '/src/components/app.component.html'
})
export class AppComponent {
}
app.component.ts
- 11. import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
templateUrl: '/src/components/app.component.html'
})
export class AppComponent {
}
コンポーネント定義
（デコレーター）
app.component.ts
- 12. import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
templateUrl: '/src/components/app.component.html'
})
export class AppComponent {
}
<my-app>で
埋め込めるように
app.component.ts
- 13. import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
templateUrl: '/src/components/app.component.html'
})
export class AppComponent {
}
テンプレート
ファイルのURL
app.component.ts
- 16. import {Component} from 'angular2/core';
@Component({
selector: 'my-alert-button',
templateUrl: '/src/components/alert-
button.component.html'
})
export class AlertButtonComponent {
}
alert-button.component.ts
<button>Click me!</button>
alert-button.component.html
<my-alert-button>で
埋め込めるように
- 17. import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
templateUrl: '/src/components/app.component.html',
directives: [AlertButtonComponent]
})
export class AppComponent {
}
使用するディレク
ティブを宣言
app.component.ts
<h1>My first Angular2 app!</h1>
<my-alert-button></my-alert-button>
alert-button.component.html
ディレクティブを
利用
- 23. import {Injectable} from 'angular2/core';
@Injectable()
export class MyService {
loadData(): string[] {
return ['a', 'b', 'c'];
}
}
DI可能なサービスの
定義
my.service.ts
- 24. ...
import {MyService} from '../services/my.service';
@Component({
selector: 'my-app',
templateUrl: '/src/components/app.component.html',
directives: [AlertButtonComponent],
providers: [MyService]
})
export class AppComponent {
private data: string[];
constructor(private myService: MyService) {
this.data = myService.loadData();
}
}
プロバイダの指定
my.service.ts
Inject!
- 29. @Component({
selector: 'my-app',
template: `
<h1>My first Angular2 app!</h1>
<my-alert-button></my-alert-button>
<ul>
<li *ngFor="#item of data">{{item}}</li>
</ul>
`,
styles: [`
h1 {
color: red;
}
`],
directives: [AlertButtonComponent],
providers: [MyService]
})
export class AppComponent {...}
alert-button.component.ts
app.component.ts
HTMLもCSSも
デコレータに埋め込
める
- 33. その1: ハードル高くない？
• 前提技術大杉。
– TypeScript (ES.next全部+型)
– モジュールバンドラー
– RxJS
– そしてもちろんAngular2
• 意外とそうでもなかった（個人的には）
– Angularの文脈を引き継いでいる
– TypeScriptはJavaっぽい（白石は元Java屋）
– RxJSは最初から詳しく知っている必要なし
– Webpackの調整が一番時間かかった。。
• でもこれは誰か一人がやればいいこと
- 36. その3: バンドラーを何にする？
• TechFeedではWebpackを選択
– 実績豊富
– なんでもできそう
– 既に下調べが済んでいた
• その他の選択肢について
– Browserify…未調査
– System.js
• 現在のところAngular2公式？
• 後発なため情報が少なめ
• JSPMも組み合わせる必要あり？
• 参考文献
– http://webpack.github.io/docs/comparison.html
– http://ilikekillnerds.com/2015/07/jspm-vs-webpack/
- 39. その6: テンプレートがキモい
• 慣れろ
• 新しいメンタルモデルを理解すれば、少しは楽に
なる。
– こいつはHTMLじゃない。HTML Plusだ。
– タグの属性と(DOMの)プロパティはそもそも似て非
なるものだ。
– [ ]はプロパティを指している
– 属性ってやつは、プロパティの初期化に過ぎない。
<!-- 属性でスタイルを指定 -->
<div style="font-size: 16px"></div>
<!-- プロパティでスタイルを指定 -->
<div [style.fontSize]="16px"></div>
- 42. その9: ページネーションしたい
• よくあるユースケースだけど、世界中が現在実装方法
を模索中
• ぼくらはObservableの簡単なラッパーを作りました
– 以下はイメージを伝えるための擬似コード
interface PagedObservable<T> extends Observable<T> {
nextPage(): void;
}
class EntryService {
getTimeline(): PagedObservable<Entry[]>
}
class TimelineComponent {
timeline: PagedObservable<Entry[]>;
more() { this.timeline.nextPage(); }
}
