-
Angularプロジェクトを作成します。
ng new
コマンドを使用して新しいプロジェクトを作成します。 -
モジュールを生成します。
ng generate module
コマンドを使用して新しいモジュールを生成します。たとえば、以下のようにコマンドを入力します。
ng generate module my-module --routing
--routing
フラグを使用することで、ルーティング機能を有効にしたモジュールが生成されます。
- ルーティングの設定を行います。生成されたモジュール内のルーティングファイル(通常は
my-module-routing.module.ts
)を開き、必要なルートを定義します。たとえば、以下のようなコードを追加します。
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class MyModuleRoutingModule { }
上記の例では、''
パス(ルートパス)にHomeComponent
を関連付け、'about'
パスにAboutComponent
を関連付けています。
- モジュールを他のコンポーネントで使用します。生成したモジュールを他のコンポーネントで使用するには、
imports
配列にモジュールを追加します。たとえば、app.module.ts
のimports
配列に以下のように追加します。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyModule } from './my-module/my-module.module'; // 生成したモジュールをインポート
import { AppComponent } from './app.component';
@NgModule({
imports: [BrowserModule, MyModule], // モジュールを追加
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
これにより、他のコンポーネントで生成したモジュールの機能を利用することができます。
以上が、Angularでルーティングを備えたモジュールを生成する方法です。この方法に従うことで、簡単にルーティング機能を実装したモジュールを作成することができます。