Help us understand the problem. What is going on with this article?

Angular Rooter (サブモジュールの使い方)

More than 1 year has passed since last update.

Augularでのルーティングで以下の事が困ったのでまとめ

  • 複数のルーティング基点を作りたい (今回)
  • LazyLoadと認証ありなしでルーティングを分ける方法 (次回)

どんな事をしたいのか?

Screen Shot 2018-01-21 at 0.48.27.png

Screen Shot 2018-01-21 at 0.49.26.png

ソースコード(Github)とDemo(準備中)
※cssのgridを使用しています。ChromeかFirefoxで確認お願いします。

routerの設定

全ての親となるルーター

app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HelloComponent } from './hello/hello.component'

const routes: Routes = [
    { path:'', component:HelloComponent},
    { path:'shape', loadChildren:'./shapes/shapes.module#ShapesModule' }
];

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

LazyLoadで読み込みたいモジュールは、

{ path:'shape', loadChildren:'./shapes/shapes.module#ShapesModule' }

と指定する。

※注意1: LazyLoad対象のComponentとModuleはimportしない。するとバンドルされてします。
※注意2: Moduleのパスはapp/からはじめているチュートリアルもあり、実際何がベスト・プラクティスなのか分からない。今回はこれで動いた。

子供となるルーター

shape-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ShapeComponent } from '../shape/shape.component'
import { RectangleComponent } from '../rectangle/rectangle.component'
import { CircleComponent } from '../circle/circle.component'


const routes: Routes = [
    { path:'', component:ShapeComponent,
        children:[
            { path:'rectangle', component:RectangleComponent },
            { path:'circle', component:CircleComponent }
        ]
    }
];

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

forRoot関数ではなく、forChild関数を使用する。しかし、AngularCliを使ってmoduleを生成すればこの用に表記してあるので、そんなに心配しなくても大丈夫です。

imports: [RouterModule.forChild(routes)],

router-outletについて

今回の場合、router-outletはapp.component.htmlとshape.component.htmlに記述します。

app.component.html
<nav class="commonHeaderNavigation">
    <div class="navItem logo">
        RoutingDemo
    </div>
    <div class="navItemContainer">
        <a class="navItem" routerLink="/">
            to top
        </a>
        <a routerLink="shape" class="navItem">to shape</a>
    </div>
</nav>


<router-outlet></router-outlet>


<footer class="commonFooter">
    <div class="footerItem">
        demo by kota0
    </div>
</footer>
shape.component.html
<div class="container">
    <div class="sideMenu">
        <a routerLink="./rectangle" class="linkItem">to rectangle</a>
        <a routerLink="./circle" class="linkItem">to circle</a>
    </div>
    <div class="routerContainer">


        <router-outlet></router-outlet>


    </div>
</div>

router-outletタグの中にcomponentが読み込まれ描画されるのかと思っていたのですが、そうではなく、router-outletタグの直下に展開されます。ですので、表示領域を限られた範囲にしておきたい場合は、下記のようにrouter-outletをラッピングすると便利でした。

<div class="routerContainer">
    <router-outlet></router-outlet>
</div>

展開されたHTMLを見てみると、router-outletの兄弟要素としてapp-shapeや、app-rectangleが配置されています。
Screen Shot 2018-01-21 at 9.40.31.png

LazyLoadについて

親ルーター(app-routing.module.ts)で、下記のように指定しているとビルドされるJSファイルが別に生成され、リクエストが発生するまではクライアント側にソースが渡されません。

{ path:'shape', loadChildren:'./shapes/shapes.module#ShapesModule' }

認証系のとの組み合わせについて

認証が通らないとページを描画しないなどの処理もAngularに存在します。
こちらから(準備中)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした