Angular入門 3日目

社内ツールをバックエンドをGo(goa)で、フロントエンドをAngularで作ることにした。

3日目。

今日やったこと

Observerableの対応

PromiseからObserverableに変えたら上手くいってなかった件、単純にデータの取得が間違っていただけだった。

  getProjects(): Observable<Project[]> {
    return this.http.get(this.projectURL)
      .map(res => res.json().data as Project[]);
  }

res.json().data の data が抜けていた。

チュートリアルの後半にsearch関係のがあって、関係ないと思って読んでなかったけど、ちゃんと書いてあった。 チュートリアルよく読もう…

Typescriptのキャストについて調べた

Typescript: cast an object to other type. How? And instanceof or typeof? - acdcjunior’s

as で良いっぽい。

編集、削除の機能追加

チュートリアルを参考に、update, deleteを実装した。

気になったのが、リストから個別に削除するのはまぁ簡単なんだけど、そのあとリストを更新しなくて良いんだろうか？

まぁでもブラウザ上は存在している（と思われる）データが実はなかったというのを知るタイミングの問題かな。

ルーティングがよくわからん

Rails のルーティングを参考に設定したいんだけど、

// 抜粋
const appRoutes: Routes = [
  {
    path: 'projects',
    component: ProjectsComponent
  },
  {
    path: 'projects/new',
    component: ProjectDetailComponent
  },
  {
    path: 'projects/:id',
    component: ProjectDetailComponent
  },
];

サブディレクトリのところが上手くいかない。:idの方が優先されるのかなぁ。

Angular2のRouting, Formsの簡単なサンプル。ついでにFlux。(2.0) - Qiita

この辺参考に明日やってみよう。

雑感

コードを書くときはTypescriptなので、型が間違ってるとかはちゃんとチェックしてくれるんだけど、as とかのキャストを使ったりするところでは、実際動かすと上手くいかない。
キャストする時はその辺注意した方が良さそう。