社内ツールをバックエンドを 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 とかのキャストを使ったりするところでは、実際動かすと上手くいかない。
キャストする時はその辺注意した方が良さそう。