ルーティングする｜AngularでWebサイト作成

Angularの学習の為に、AngularでWebサイトを作ってみることにしました（Angularのバージョンは4.3.6です）。
適宜作業内容をまとめていきます。

基本的な部分は公式チュートリアルなどを参考にしながら進めています。

今回はURLに応じて動作させるコンポーネントを切り分けるルーティングを行っていきます。

開発環境

・OS：Windows8.1 64bit
・node：v7.2.1
・npm：4.0.5
・Angular：4.3.6
・開発ツール：VisualStudioCode

手順

手順1.Routingモジュールの作成

app.module.tsにルーティングの設定を記述していってもよさそうですが、
今回はルーティング専用Moduleとしてappフォルダ下にAppRoutingModule.tsを作成しました。

import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
import { LoginComponent } from './login/login.component'
import { MyPageComponent } from './mypage/mypage.component'

const routes: Routes = [
    {
        path: 'login',
        component: LoginComponent
    },
    {
        path: 'mypage',
        component: MyPageComponent
    },
]

@NgModule({
    imports:[
        RouterModule.forRoot(routes)
    ],
    exports:[
        RouterModule
    ]
})
export class AppRoutingModule{}

手順2.AppRoutingModuleをAppModuleのimportsに追加

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
～省略～
import { AppRoutingModule } from './app-routing.module'; //←追加

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    MyPageComponent,
  ],
  imports: [
    ～省略～
    AppRoutingModule,//←追加
  ],
  providers: [
    ～省略～
  ],
  ～省略～
})
export class AppModule { }

手順3.router-outletの追加

app.component.htmlにRouterOutletディレクティブを追加します。

<div id="main" class="container">
  <router-outlet></router-outlet>
</div>

このrouter-outlet内に、それぞれのコンポーネントが表示されることになります。

手順4.コンポーネントを作成

angularCLIでコンポーネントを生成しましょう。

ng generate component Login
ng generate component MyPage

それぞれのコンポーネントのHTML内容を任意で修正してみます。

.手順5.確認

ブラウザで
http://localhost:4200/login
http://localhost:4200/mypage
にアクセスしてみましょう。
それぞれのコンポーネントの内容が正しければOKです。

感想

今回はルーティングを設定してみました。
SPAを生成する上で必須の仕組みなので、しっかりと手順を理解しておく必要があると思いました。

WEBアプリケーション関連 人気連載リンク

基礎からPHPWEBアプリ解発を学ぶなら・・
PHP基礎 連載

より実践的なWEBアプリ開発講座！Bootstrap活用を学ぶなら・・
魁！小野の塾 連載