Angular4入門_Vol.3

参考サイト

https://www.codingforentrepreneurs.com/projects/try-angular-v4/

Mapping Urls with Router Moudle

• routermoduleを使って、urls のmappingをする。

• まず、src/app/app.routing.tsファイルを作成する。

import { NgModule }            from '@angular/core';
import { RouterModule, Routes} from '@angular/router';

import { VideoListComponent } from './video-list/video-list.component';
import { VideoDetailComponent } from './video-detail/video-detail.component';

const appRoutes: Routes = [ //appRoutes は、Routesでアノテーションする。Routesは、すでにimportしたclass
  {
    path:"videos", // pathは、url
    component: VideoListComponent, // pathにアクセスしたときに実行されるcomponentのことかな。outlet-routerの対象になるselectorってことなのかな。
  },
  {
    path:"videos/:slug", //:slugの部分は、djangoでいうと{pk:pk}とかに当たる部分かな。
    component: VideoDetailComponent,
  },
]

// 以下はいまのところさっぱりわからんから、公文としておぼえておこう。
@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes
    )
  ],
  exports:[
    RouterModule
  ]
})
export class AppRoutingModule{ }

• 次に作成した、AppRoutingModuleをapp.module.tsにimportする。

...
import { AppRoutingModule } from './app.routing';
...

@NgModule({
  declarations: [
    AppComponent,
    VideoListComponent,
    VideoDetailComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• app.component.htmlにrouter-outletselectorを入れる。

<h1>{{ title }} is cool!</h1> <p>{{ description }}</p>
<hr>
<video-list></video-list>
<router-outlet></router-outlet>

• localhost:4200にアクセスしてみる。。。error発生！

Error: Cannot match any routes. URL Segment: 'item-3'
Error: Cannot match any routes. URL Segment: 'item-3'

• app.routing.tsに設定した通り、http://127.0.0.1:4200/videos にアクセスしてみる。videos-listはうまく表示された！

• http://127.0.0.1:4200/videos/item-1にアクセスしてみる。こちらも、video-detail works!が表示された！

• app.routing.ts を少し修正する。pathが無いときのcomponentも指定しておく。これで、http://127.0.0.1:4200のときに、VideoListComponentが実行されるようになる。

...

const appRoutes: Routes = [
  {
    path:"",
    component: VideoListComponent,
  },
  {
    path:"videos",
    component: VideoListComponent,
  },
  {
    path:"videos/:slug",
    component: VideoDetailComponent,
  },
]
...