Angular Routing – Part 1

Untuk memudahkan tutorial, Anda bisa download file project start disini, untuk memudahkan mengikuti tutorial.

Project diatas masih belum ditambahkan routing, jadi semua component akan ditampilkan pada halaman awal (lihat gambar dibawah).

Tujuan dari modul ini akan menggunakan routing untuk memisahkan component.

Menambahkan Routing

Routing pada dasarnya adalah struktur data berupa array of object yang akan berisi informasi routing dari aplikasi. Berikut struktur dasar dari routing:

[{path: 'string-path', component:'namacomponent'}]

Perhatian, Empty Path atau ”, umum digunakan untuk mengakses component home.

Routing yang akan kita tambahkan adalah routing untuk component home dan users. Jadi component dapat diakses melalui link misalnya,

• / untuk mengakses home page.
• /users untuk menampilkan user list.
• /users/1 untuk menampilkan user berdasarkan id.

Secara logis, route perlu diregistrasikan pada scope aplikasi global, karena harus bisa diakses dimana saja. Jadi kita akan registrasikan route di app.module.ts.

Buka file app.module.ts lalu tambahkan code routing (lihat bagian dengan commentar)

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
//import library route
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { UsersComponent } from './users/users.component';
import { UserComponent } from './users/user/user.component';

//deklarasi route untuk home dan users
const appRoutes : Routes = [
  {path: '', component: HomeComponent},
  {path: 'users', component: UsersComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    UsersComponent,
    UserComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(appRoutes) // registrasi route yang dideklarasikan diatas.
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Menggunakan Route

Berikutnya kita perlu menambahkan directive router-outlet untuk lokasi dimana router akan melakukan component rendering berdasarkan path yang diberikan.

Buka file app.component.html, gunakna router outlet untuk menggantikan penggunaan component selector.

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <ul class="nav nav-tabs">
        <li role="presentation" class="nav-item active"><a href="#" class="nav-link">Home</a></li>
        <li role="presentation" class="nav-item active"><a href="#" class="nav-link" >Users</a></li>
      </ul>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <router-outlet></router-outlet>
    </div>
  </div>  
  <!-- sudah tidak digunakan diganti menggunakan routing -->
  <!-- <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <app-home></app-home>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <app-users></app-users>
    </div>
  </div> -->
</div>

Jika Anda coba akses route melalui address bar, maka aplikasi sudah menampilkan component berdasarkan route

Sampai disini kita sudah berhasil menambahkan route. Berikutnya kita akan gunakan Router Link pada navigasi.