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

ANGULAR

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

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

タイトルとURLをコピーしました