【Angular】Angularでページ追加するお作法【AngularCLI】

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
現在正社員として5年働いたのちフリーランスとして独立しました。

Angularの解説シリーズです。

今回はAngularCLIでページを追加する際のお作法について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

AngularCLIを使ってページが追加できる

※PCにnpm、nodeがインストールされている前提で記述します。
　yarn等をお使いの方は読み替えてください。

環境がない人はcodesansbox等を使ってね！

実行環境

Angularのバージョンが古いと動かないことがあるよ！
うまく動かなければアップデートしてね！

実行環境

AngularCLIを使ってページを追加しよう
まとめ

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フォローしてもらえると嬉しいです🦈

twitter
instagram