みなさんこんにちは、現役エンジニアのサメハックです
未経験からWebエンジニアに転職し、
現在正社員として5年働いたのちフリーランスとして独立しました。
Angularの解説シリーズです。
今回はAngularCLIでページを追加する際のお作法について学んでいきましょう!
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!
この記事を読むと・・・
- AngularCLIを使ってページが追加できる
※PCにnpm、nodeがインストールされている前提で記述します。
yarn等をお使いの方は読み替えてください。
環境がない人はcodesansbox等を使ってね!
実行環境
Angularのバージョンが古いと動かないことがあるよ!
うまく動かなければアップデートしてね!
うまく動かなければアップデートしてね!
AngularCLIを使ってページを追加しよう
Angularでは、よくあるWebサイトのように
HTMLファイルを作成するだけではページの追加は出来ません。
ここでは、AngularCLIを用いてページを追加するお作法について学びましょう。
必要な作業としては以下になります。
- コンポーネントの追加
- app.module.tsに追加したコンポーネントを追記
- ルーティング設定
Angularのお作法を知ろう!
前提
【Angular】ルーティングを設定しよう!【RouterModule】
今回はルーティング設定の際に作ったAngularアプリをベースに
ページを追加していきます。
コンポーネントを追加しよう!
コマンド
ng generate component new-page
このように以下の4つのファイルが作成されました。
- new-page.component.html
- new-page.component.scss
- new-page.component.spec.ts
- new-page.component.ts
これだけではただファイルが追加されただけで、画面には表示できないよ!
app.module.tsに追記※注意点あり
app.module.tsに今回作成したコンポーネントを
読み込む記述を追記する必要があるのですが、
AngularCLIのバージョンによっては
コンポーネントを作成した際に自動で読み込みがされるので
その場合は自力での記述は不要です。
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { Page1Component } from './page1/page1.component';
import { Page2Component } from './page2/page2.component';
import { Page3Component } from './page3/page3.component';
import { TopPageComponent } from './top-page/top-page.component';
import { AppRoutingModule } from './app-routing.module';
import { NewPageComponent } from './new-page/new-page.component'; // 追記
@NgModule({
declarations: [
AppComponent,
Page1Component,
Page2Component,
Page3Component,
TopPageComponent,
NewPageComponent, // 追記
],
imports: [BrowserModule, AppRoutingModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
システムが異なる場合や、AngularCLIを使わない場合は
自力で追記する必要があるよ!
自力で追記する必要があるよ!
ルーティング設定
app.routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Page1Component } from './page1/page1.component';
import { Page2Component } from './page2/page2.component';
import { Page3Component } from './page3/page3.component';
import { TopPageComponent } from './top-page/top-page.component';
// 新規ページのコンポーネントを読み込み
import { NewPageComponent } from './new-page/new-page.component';
// ルート情報を設定
const routes: Routes = [
{ path: '', redirectTo: 'top', pathMatch: 'full' },
{ path: 'top', component: TopPageComponent },
{ path: 'page1', component: Page1Component },
{ path: 'page2', component: Page2Component },
{ path: 'page3', component: Page3Component },
// 新規ページのルーティング設定
{ path: 'new-page', component: NewPageComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
これでルーティングの設定がされたよ!
ポイント
ここまでの設定を全て対応しすることで
ようやくAngularアプリにページを追加することが出来ます。
Angularは使用上システムが煩雑になりやすいので
ページ追加がうまく行かない場合は
ルーティングファイルやモジュールファイルが
正しく設定されているかを確認することが重要です。
ページの追加が出来てえらい!
おまけ:リンクの設定
app.component.html
<ul>
<li>
<a routerLink="">トップページ</a>
</li>
<li>
<a routerLink="page1">ページ1</a>
</li>
<li>
<a routerLink="page2">ページ2</a>
</li>
<li>
<a routerLink="page3">ページ3</a>
</li>
<!-- 新規ページのリンク -->
<li>
<a routerLink="new-page">新規ページ</a>
</li>
</ul>
<router-outlet></router-outlet>
まとめ
- ■AngularCLIでページを追加するには以下の3点を行う
- コンポーネントの追加
- app.module.tsに追加したコンポーネントを追記
- ルーティング設定
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈