Goal
anguar-material-templateを参考に、Angular13に対応したシンプルなテンプレートを用意する。(上記TemplateはAngular８に対応。) Step1 では。Homeページのルーティングを設定するまでの流れを整理する。
Reference
Step1: 大枠の作成
新しいアプリケーションの作成
新しいアプリケーションを新たに作成する。Angularmaterial のインストールまで行う。
ng new kinako-angular-material-template
Getting STarted with angular material
Rootページの作成
アプリケーションを新規作成すると、app.componentが自動で作成されている。実際のアプリケーションでは、このapp.component.tsおよび、html, scssには、特に記述することがないため、不要なhtmlとscssファイルを削除し、tsファイルのみを更新する。
この時、app.component.tsのComponent宣言には、デフォルトでhtmlファイルと、Style seetのファイルパスが設定されている。しかし、app.componentで複雑な実装をする予定がないため、これらは削除して、以下のようにシンプルな記述を設定する。
@Component({ selector: 'app-root', template: `<router-outlet></router-outlet>` })
Homeページの作成
app.compoent.tsがシンプルになったが、現時点では、Routing設定が何もされていないため、どこのページも表示がされない。そこで、初期画面となるHomeページを設定する。
まず、Homeページを配置するためのディレクトリを作成する。src/app/配下のディレクトリは、すべてModuleがそのディレクトリのルートになるようにしたい（下記参照）ため、新しい画面を作成するときは、以下のコマンドをセットで実行するようにする。
kinako-angular-material-template\src\app\home>tree /f
src/app/home
│ home-routing.module.ts -- home領域のルーティング
│ home.module.ts -- home領域のルート
│
└─home-home -- home領域の初期画面。
home-home.component.html
home-home.component.scss
home-home.component.spec.ts
home-home.component.ts
実行するコマンドは以下の通り。
ng g module home ng g module home\home-routing --flat true ng g component home\home-home
Layout componentの作成
後々必要になるので。共通したLayoutを定義するCompoentも用意しておく。このleyout compornentには、それぞれのページで共通して利用するヘッダーやフッターなどの設定を行う。 Layout componentは。共通して利用するものなので、sharedディレクトリに格納する。sharedディレクトリは、src/app直下のディレクトリになるため、moduleファイルがsharedディレクトリの直下にいるように構成する。
ng g module shared ng g component layout
ルーティングの構成
ページが作成できたので、ルーティングを設定していく。初めに設定が必要なのは、app-routing.module.ts。
const routes: Routes = [
{
path: 'home',
loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
},
{
path: '**',
redirectTo:'home'
}
];
home/home.moduleに遷移するための設定と、**の設定をhomeにリダイレクトさせる設定を追加する。この設定で、現状のアプリケーションをデバッグ実行したときに、home.moduleが実行される。
home.moduleでは、home-routing.moduleをimportしているためhome.moduleが実行されるときに、home-rouging.moduleがimportされる。home-routing.moduleがimportされると、home-rougin.moduleで指定したrouting設定にPathが引き渡される。
http://localhost:4200/homeでリクエストが来た際は、空の文字列が、http://localhost:4200/home/testでリクエストが来たときは、test文字列が指定される。
最後に、home-routing.moduleのrouting設定を行う。
const routes: Routes = [
{
path: '',
component: LayoutComponent,
children: [
{ path: '', component: HomeHomeComponent },
]
}
];
componentに、HomeHomeComponentを指定するのではなく、LayoutComponentを指定しているのは、共通して利用するLayoutを実装しているのがLayoutCompoenentだからである。LayoutCompoenent２がもしあった場合、画面によっては、別の共通レイアウトを指定することができるため、app-compoentでガチっとした共通レイアウトを指定する野に比べて、柔軟なLayoutを指定することができる。
layoutComponentのrouter-outletに引き渡すため、子要素としてHomeHomeComponentを指定している。
ここまででできたディレクトリ構造まとめ
src/app
│ app-routing.module.ts
│ app.component.ts
│ app.module.ts
│
├─home
│ │ home-routing.module.ts
│ │ home.module.ts
│ │
│ └─home-home
│ home-home.component.html
│ home-home.component.scss
│ home-home.component.spec.ts
│ home-home.component.ts
│
└─shared
│ shared.module.ts
│
└─layout
layout.component.html
layout.component.scss
layout.component.spec.ts
layout.component.ts
shardには、ルーティングが必要ないため、routing moduleが入っていない。
Point
ディレクトリ構成
appディレクトリ配下の構成は以下のようになっている。
src/app │ app-routing.module.ts │ app.component.ts │ app.module.ts ├─Page (feature module) │ │ feature-routing.module.ts │ │ feature.module.ts │ │ │ └─feature-home │ feature-home.component.html │ feature-home.component.scss │ feature-home.component.spec.ts │ feature-home.component.ts
あるfeatureには、必ず、routing moduleと、moduleが存在する。また、homeページも同様に作成する。 そのほかのページが必要な場合は、homeページと同じように作成していく。
src/app │ app-routing.module.ts │ app.component.ts │ app.module.ts ├─Page (feature) │ │ feature-routing.module.ts │ │ feature.module.ts │ │ │ feature-home │ │ feature-home.component.html │ │ feature-home.component.scss │ │ feature-home.component.spec.ts │ │ feature-home.component.ts │ feature-page-a │ feature-page-a.component.html │ feature-page-a.component.scss │ feature-page-a.component.spec.ts │ feature-page-a.component.ts
これは、feature-moduleと呼ばれているNG-Moduleの持つ一つの概念らしい。
フィーチャーモジュールは構造的なベストプラクティスであり、コアAngular APIのコンセプトと対照的です。 フィーチャーモジュールは、ユーザーのワークフロー、ルーティング、フォームなど、 特定のアプリケーションのニーズにフォーカスした一貫した機能のセットを提供します。 ルートモジュール内だけですべてを完結できますが、 フィーチャーモジュールはアプリケーションを集中した領域に分割するのに役立ちます。 フィーチャーモジュールは、それが提供するサービスや共有するコンポーネント、 ディレクティブ、およびパイプを介して、ルートモジュールおよび他のモジュールと連携します。
遅延ロード
遅延ロード を使い、Homeページをロードした際にのみ、その子要素をロードするように設定を行った。
Angularモジュールを遅延ロードするには、次のように、AppRoutingModuleのroutes設定でloadChildrenを(componentの代わりに)使用します。
もとにしたアプリケーションでは、以下のように定義されていたが、Angularのバージョンが変わったためか、実装方法が変更されていた。
//from
{
path: 'dashboard',
loadChildren: './dashboard/dashboard.module#DashboardModule',
canActivate: [AuthGuard]
},
//to
{
path: 'home',
loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
},
