Angular2 & TypeScriptを勉強して分からなかったところや自分用メモをまとめていきます。
バージョン:alpha39とかその辺り
Angular2のビルトインライブラリにはHttpが含まれないため自分でインジェクトする必要がある。
import {HTTP_PROVIDERS} from 'angular2/http';
...
bootstrap(MyAppComponent, [... HTTP_PROVIDERS]);
公式マニュアルにはHTTP_BINDINGS HTTP_PROVIDERSの2通り記載がある。
Httpの説明ではHTTP_PROVIDERSを使っているのでこっちを使う事にする。
呼んでみる
class SampleClass {
constructor(http:Http) {
http.get('sample.json');
}
jsonが返ってこない...。
console.log()
してみるとこんなやつがいる。
e {_isScalar: false}
誰?
Observable
Angular2のHttpのレスポンスはObservable
を返す。
Observable
はMicrosoftのライブラリ RxJS のオブジェクトで、Angular1系で採用していた$q
に比べて柔軟で便利な機能が用意されている。
- メソッドチェインがthenだらけにならない
- チェイン内でキャンセルできる
- リトライなど便利そうなメソッドを持っている
jsonが欲しい...
class SampleClass {
public list:string[];
constructor(http:Http) {
http.get('sample.json')
.map(res => res.json())
.subscribe(res => this.list = res)
;
}
.map(res => res.json())
map()を使ってパース。
json()のほかにtext() blob()などが使える。
.subscribe(res => this.list = res)
subscribeは3つの関数を引数に取る。(success, error, complete)
ここではリクエストが成功した場合(第一引数)の処理を渡し、listプロパティに値を保存している。
何が入っているか見たい...
map() subscribe()のようにヘルパー関数を渡す場合は、関数内にデバッグ処理を入れる事ができる。
.map(res => {
console.log(res);
res.json();
})
// e {_body: "[{"no":1,"name":"ferret"}...
終わり
Observable
が何者なのかよく分からなくて、ただのGETにとんでもなく時間がかかった。このサイトで導入のメリットから使い方まで親切に解説されている。
Angular2 Observables, Http, and separating services and components
上記サイトに記載されているリンク。
公式マニュアルでサンプルが足りないと思った時は頼りになりそう。
angular playground