Angularを使ったプロジェクトの開始 - 記憶に残す、記録に残る

自分でやっててもたまに忘れて調べ直すし、人に説明するときのためにもなりそうなのでメモ書き

とりあえずNode.jsはインストールしてる必要がある。
nodejs.org

必要なものはこれくらいかな？
Gitとか、VisualStudioCodeとかのツール類はすでにインストールされているものとする。

簡単なTaskManagerを作成する。
新しくディレクトリを作成する。

mkdir task-manager
cd task-manager
ng new frontApp

少し待つとひな型が作成されるので試しに起動してみる。

cd frontApp
ng serve --open

これでひとまず土台はできた！

次にアプリのデザインを整えるためにAngular Materialをプロジェクトに加える。
material.angular.io

作成されたAngularのディレクトリないでコマンドを実行したら終わり。

ng add @angular/material

単純なToDoアプリをアプリを作る。

扱うデータは以下の通り

データモデルのディレクトリ内にデータ構造を規定するクラスを作成する

ng g class model/user
ng g class model/task

これでクラスが作成されたので詳細を詰めていく。

次にユーザー一覧用のコンポーネントを作成する。

ng g component userList

ユーザーリストからそれぞれのユーザのタスクを扱える詳細コンポーネントも作成しておく

ng g component userDetail

あとは各コンポーネントを作成して、ルーティングして、データ取得のためのサービスを作成したら終わり。
ルーターはひな型作成時にルータ使用にYesを選択していれば作る必要はない。サーバーとの間でデータを扱うためのサービスを作成する。

ng g service dataService