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

この記事は2017年9月28日に書かれたものです。内容が古い可能性がありますのでご注意ください。


ルーティングする|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を生成する上で必須の仕組みなので、しっかりと手順を理解しておく必要があると思いました。

  • このエントリーをはてなブックマークに追加

PAGE TOP