画面コンポーネントの作成、ルーター（画面遷移）の実装

[gurezo]

画面ファイル及びページ遷移部品の作成

• Angular では、画面そのものや画面の部品の単位をコンポーネント(component)と呼びます。

メモ帳一覧画面用コンポーネント作成 15b3ed1

Note

ng generate
書式：ng generate 生成種類 生成名前 オプション
書式：ng g 生成種類 生成名前 オプション
npx は、Angular CLI がグローバルインストールされていない時に使います。
生成種類（schematic）については、ng generate を参照
実行例：npx ng g c todo-list

➜  frontend git:(frontend/component) npx ng g c todo-list
CREATE src/app/todo-list/todo-list.component.scss (0 bytes)
CREATE src/app/todo-list/todo-list.component.html (24 bytes)
CREATE src/app/todo-list/todo-list.component.spec.ts (611 bytes)
CREATE src/app/todo-list/todo-list.component.ts (246 bytes)

メモ帳一覧画面用コンポーネントの差分を git に add, commit

➜  frontend git:(frontend/component) ✗ git add .
➜  frontend git:(frontend/component) ✗ git commit -m 'メモ帳一覧画面用ンポーネント作成'
[frontend/component 15b3ed1] メモ帳一覧画面用コンポーネント作成
 4 files changed, 36 insertions(+)
 create mode 100644 frontend/src/app/todo-list/todo-list.component.html
 create mode 100644 frontend/src/app/todo-list/todo-list.component.scss
 create mode 100644 frontend/src/app/todo-list/todo-list.component.spec.ts
 create mode 100644 frontend/src/app/todo-list/todo-list.component.ts

メモ編集画面用コンポーネント作成 ca575d4

Note

ng generate
書式：ng generate 生成種類 生成名前 オプション
書式：ng g 生成種類 生成名前 オプション
npx は、Angular CLI がグローバルインストールされていない時に使います。
生成種類（schematic）については、ng generate を参照
実行例：npx ng g c todo

➜  frontend git:(frontend/component) npx ng g c todo
CREATE src/app/todo/todo.component.scss (0 bytes)
CREATE src/app/todo/todo.component.html (19 bytes)
CREATE src/app/todo/todo.component.spec.ts (582 bytes)
CREATE src/app/todo/todo.component.ts (227 bytes)

メモ編集画面用コンポーネントの差分を git に add, commit

➜  frontend git:(frontend/component) ✗ git add .
➜  frontend git:(frontend/component) ✗ git commit -m 'メモ編集画面用コポーネント作成
[frontend/component ca575d4] メモ編集画面用コンポーネント作成
 4 files changed, 36 insertions(+)
 create mode 100644 frontend/src/app/todo/todo.component.html
 create mode 100644 frontend/src/app/todo/todo.component.scss
 create mode 100644 frontend/src/app/todo/todo.component.spec.ts
 create mode 100644 frontend/src/app/todo/todo.component.ts

ページがありません表示用コンポーネント作成 5abd56d

Note

ng generate
書式：ng generate 生成種類 生成名前 オプション
書式：ng g 生成種類 生成名前 オプション
npx は、Angular CLI がグローバルインストールされていない時に使います。
生成種類（schematic）については、ng generate を参照
実行例：npx ng g c page-not-found

➜  frontend git:(frontend/component) npx ng g c page-not-found
CREATE src/app/page-not-found/page-not-found.component.scss (0 bytes)
CREATE src/app/page-not-found/page-not-found.component.html (29 bytes)
CREATE src/app/page-not-found/page-not-found.component.spec.ts (640 bytes)
CREATE src/app/page-not-found/page-not-found.component.ts (265 bytes)

ページがありません表示用コンポーネントの差分を git に add, commit

➜  frontend git:(frontend/component) ✗ git add .
➜  frontend git:(frontend/component) ✗ git commit -m 'ページがありません表示用コンポーネント作成'
[frontend/component 5abd56d] ページがありません表示用コンポーネント作成
 4 files changed, 36 insertions(+)
 create mode 100644 frontend/src/app/page-not-found/page-not-found.component.html
 create mode 100644 frontend/src/app/page-not-found/page-not-found.component.scss
 create mode 100644 frontend/src/app/page-not-found/page-not-found.component.spec.ts
 create mode 100644 frontend/src/app/page-not-found/page-not-found.component.ts

class => default class cd2ca6a

• 各画面のコンポーネントを default class に変更することにより、ルーターの実装を簡素することが出来ます。

ページ遷移時の遅延読み込み（ Lazy loading ）する為のルーター実装 1241b82

Note

ルーティングと遅延読み込み
Lazy loading and default exports

• class => default class に変更することにより、遅延読み込みの実装が下記のように簡素になります。

export const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    // default class での実装
    loadComponent: () => import('./todo-list/todo-list.component'),
    // class での実装   
    // loadComponent: () =>
    //   import('./todo-list/todo-list.component').then(
    //     (cmpt) => cmpt.TodoListComponent
    //   ),
  },

まとめ

• 上記手順がこのプルリクエストの作業になります。