AngularにRoutingを追加する方法を説明します。
Routingを追加するにはAngularの RouterModuleを使います。
大まかに以下のような事をやります。
- ルーティング管理用のモジュールを追加する。
- ルーティングの設定を追加する。
- AppComponentでルーティングされたコンポーネントを表示する。
まずngコマンドでルーティング管理用のモジュールを作ります。Angularのチュートリアルによれば、これがベストプラクティスとのこと。
ng generate module app-routing --flat --module=app
src/app以下にapp-routing.module.ts が作成されるので、編集します。
routes にルーティングの設定を追加する。
import { NgModule } from '@angular/core'; // RouterModuleを使う宣言 import { RouterModule ,Routes } from '@angular/router'; // Routingに追加したい任意のコンポーネント。 import { HomeComponent } from './home/home.component'; import { HogehogeComponent } from './hogehoge/hogehoge.component'; // ルーティングの設定をここに追加します。 const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'hogehoge/:id', component: HogehogeComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
AppComponentのテンプレートで、ルーティングされたコンポーネントが表示されるようにします。
<h1>タイトル</h1> <!-- ↓ここにルーティングされたモジュールが表示される --> <router-outlet></router-outlet>
これだけでルーティングの設定完了です。
公式ドキュメントの以下が参考になります。
Angular 日本語ドキュメンテーション – ルーティング
以上です。
逆引きAngular目次
ngコマンド(Angular CLI)
Angularアプリケーションを起動する(ng serve)
Angularアプリケーションをビルドする(ng build)
Angularでファイルが変更されたら自動的にビルドする(ng build –watch)
Angularのコンポーネントを追加する(ng generate component [コンポーネント名])
Angularのサービスを追加する(ng generate service [サービス名])
テンプレート
Angularのngifでtrueとfalseの場合ごとにテンプレートを切り替える
フォーム
Angularでフォームに入力した値をリアルタイムに表示する