Angular After Tutorial 写経

[kasaharu]

https://gitbook.lacolaco.net/angular-after-tutorial/

プロジェクトの追加

• Generate Project

$ ng g app after-tutorial --style scss --prefix at
$ yarn prettier
$ yarn lint after-tutorial --fix

• npm scripts の追加
• CircleCI の設定追加
• コードカバレッジのレポート設定と閾値設定

アプリケーションの作成

ユーザーリストの取得

• User interface 作成

$ ng g interface user --project after-tutorial

• ngOnInit() を使うときは OnInit を implements する
• HttpClient を使っているので spec に HttpClientTestingModule をインポートする

コンポーネントの分割

• UserListItemComponent 作成

$ ng g c components/user-list-item --project after-tutorial

• ChangeDetectionStrategy を使用したパフォーマンス改善
• UserListComponent 作成

$ ng g c components/user-list --project after-tutorial

サービスの作成と状態管理

• UserService 作成

$ yarn ng g service services/user --project after-tutorial

• service の spy を使ったコンポーネントのテスト
• BehaviorSubject のテストの書き方が課題

フォームと状態管理

• ユーザーリスト用の state と initialState を実装
• StoreService の作成

$ yarn ng g service services/store --project after-tutorial

• UserService の変更
• UserService を UserListUsecase にリネーム
• UserListFilterComponent を作成

$ yarn ng g c components/user-list-filter --project after-tutorial

• リアクティブフォームを使用するので ReactiveFormsModule を AppModule にインポート

ルーティングと状態管理

• User 型の拡張
• UserApiService の作成

$ yarn ng g service services/user-api --project after-tutorial

• HTTP リクエストの責務を Usecase から service に移譲
• UserDetailPageComponent の作成

$ yarn ng g c components/user-detail-page --project after-tutorial

• ルーティングの作成

$ yarn ng generate module app-routing --flat --module=app --project after-tutorial

• usecase の作成

$ yarn ng generate service usecases/user-detail --project after-tutorial

[kasaharu]

#263 で「フォームと状態管理」までを写経

[kasaharu]

完了したのでクローズ