僕は技術ができない

技術のできないスーツ園児ニアが考えていること

Angularでプロジェクトの作成からページ遷移の実装まで

最近 Angular をはじめました。

プロジェクトを作成してからページ追加、ページ遷移の実装までの流れを一旦整理しておきたいと思います。

実装

プロジェクトの作成

適当にプロジェクトを作ってプロジェクト直下に潜ります。
1つ目の質問に Yes と答えています。これするとページ遷移の実装に必要な app-routing.module.ts が作られます。
2つ目の質問はお好みで。

$ ng new my-router-app
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? (Use arrow keys)
❯ CSS 
  SCSS   [ https://sass-lang.com/documentation/syntax#scss                ] 
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] 
  Less   [ http://lesscss.org                                             ] 
  Stylus [ http://stylus-lang.com                                         ] 

... 略 ...

$ cd my-router-app

コンポーネントの作成

コンポーネントを作っていきます。

$ ng generate component main
$ ng generate component page1

ルーティング設定

app-routing.module.ts にルーティング設定をします。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MainComponent } from './main/main.component'; // MainComponentをimport
import { Page1Component } from './page1/page1.component'; // Page1Componentをimport

const routes: Routes = [
  {path: '', component: MainComponent}, // MainComponentを追加
  {path: 'page1', component: Page1Component} // Page1Componentを追加
];

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

ng generate component をした時点で app.module.ts に以下のようにページが追記されていると思いますが、一応確認します。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MainComponent } from './main/main.component';
import { Page1Component } from './page1/page1.component';

@NgModule({
  declarations: [
    AppComponent,
    MainComponent, // MainComponent
    Page1Component // Page1Component
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

デフォルトのサンプルページを消す

デフォルトで作られるサンプルページが邪魔なので、消します。

<router-outlet></router-outlet> // これだけ残す

疎通確認

ローカルでServe

$ ng serve

rootのページ f:id:contemporarycuz:20190915135428p:plain

Page1のページ f:id:contemporarycuz:20190915135508p:plain

ページ追加ができました。