Angular入門 4日目
社内ツールをバックエンドをGo(goa)で、フロントエンドをAngularで作ることにした。
4日目。
今日やったこと
ルーティング
そもそもルーティングの設計がおかしかったのと、謎の思い込みがあって、関係ないところで時間をつぶしていた。
// 抜粋 const appRoutes: Routes = [ { path: 'projects', component: ProjectsComponent }, { path: 'projects/new', component: ProjectDetailComponent }, { path: 'projects/:id', component: ProjectDetailComponent }, ];
この状態で /projects/new
にアクセスすると、route parameter(と言うらしい)のidはnewになる。当たり前なんだけど、整数値の時だけ /projects/:id
に振り分けられるという思い込みをしていた。
それに、Serviceでデータを取得する箇所でエラーが出ていたのに、ルーティングでのエラーだと勘違いしていた。
新規用ページの作成
編集ページを流用して、idが取れないときには空のオブジェクトを作ってComponentで使うようにした。
ようやく、一覧、新規、編集、削除とできた。
rxjs
Observable について深く気にしてなかったけど、rxjsと関係があるらしい。
使いこなせると、多分このコードも上手く直せるんだろうな。
getProject() { let id = +this.route.snapshot.params['id']; if (id > 0) { this.projectService.getProject(id) .subscribe(project => this.project = project as Project); } else { this.project = new Project(); } }
雑感
細かいところで色々わかってないところはあるものの、CRUDを実装したので、ダミーデータで一応動くようになった。
あとは、バリデーションとそれのメッセージ通知辺りかな。