Merhabalar arkadaşlar. Bu yazıda Routing konusunu ele alacağız.

Önceki yazılarda gördüğümüzden hatırlayacağımız şekilde bizim bir app.component’imiz ve app.module’ümüz vardı. Şimdi biz Angular CLI yardımı ile create-employee ve list-employees adında iki component oluşturacağız ve Angular CLI app.module’ü bizim için güncelleyecek.

Komut Satırı/Terminal üzerinden cd ile projemize geçtikten sonra ng g c employee/create-employee –spec=false –flat=true komutunu verelim. Komuttaki ng Angular CLI’dan gelmekte, g generate, c component anlamındadır. employee/create-employee ifadesi ile de employee klasörü altında create-employee component’ini oluştur diyoruz. Şu an için unit testler ile ilgilenmediğimizden –spec=false dedik. –flat=true ile dedicated folder oluşturma dedik.

Akabinde bir de listeleme işlemi için component oluşturalım. Bunun için de ng g c employee/list-employees –spec=false –flat=true komutunu verelim.

İki komut çıktısından görebileceğimiz gibi Component’lar oluşturuldu ve app.module güncellendi.

Şimdi bu yazının konusu olan Routing işlemi için de bir Routing modülü oluşturalım. Yine komut satırı üzerinden ng g m app-routing –flat=true –module=app komutunu verelim. Buradaki yukarıdaki komutlardan farklı olarak –module=app görmekteyiz, bu da oluşturulan yeni modülden app.module’ünden haberi olsun dememiz için kullanılmaktadır. Bu komutu verdiğimizde de yine app.module güncellenecektir.

app.module.ts

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

import { AppComponent } from './app.component';
import { CreateEmployeeComponent } from './employee/create-employee.component';
import { ListEmployeesComponent } from './employee/list-employees.component';
import { AppRoutingModule } from './app-routing.module';

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

2 component’i ve 1 modül’ü oluşturma işleminin ardından app.module.ts dosyamızın içeriği yukarıdaki halini alıyor. Oluşturduğumuz 2 component ve 1 modül import edilmiş, declarations’da 2 component’i, imports’da 1 modülü görmekteyiz. bootstrap kısmında da AppComponent’i görüyoruz ki bu da uygulama ayağa kalkarken AppComponent ile birlikte kalkacak demektir.

Şimdi sırada oluşturduğumuz iki component’i ve routing modülünü kullanma işi var. app-routing.module.ts dosyasını açalım ve aşağıdaki gibi güncelleyelim:

AppRoutingModule.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes} from '@angular/router';
import { ListEmployeesComponent } from './employee/list-employees.component';
import { CreateEmployeeComponent } from './employee/create-employee.component';

const appRoutes : Routes = [
  { path:'list',component:ListEmployeesComponent },
  { path:'create',component:CreateEmployeeComponent },
  { path:'',redirectTo:"/list", pathMatch: 'full' }
];

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

Yukarıdaki dosyayı adım adım inceleyecek olursak:

  • ListEmployeesComponent ve CreateEmployeeComponent componentlerini import ettik.
  • appRoutes ismindeki ve Routes tipindeki constant’a path tanımlamaları yapılmış bir array atadık. Array içerisinde list path’ine gelen isteklerin ListEmployeesComponent’inine, create path’ine gelen isteklerin CreateEmployeeComponent’ine, default path’in de list path’ine redirect edilmesini söyledik.
  • @NgModule içerisinde RouterModule.forRoot(appRoutes) ifadesi ile oluşturduğumuz appRoutes’u kayda geçirdik (import ettik), RouterModule sınıfını da az sonra göreceğimiz tag’inin tanınması için kullanacağız.

app.component.html

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" routerLinkActive="active" routerLink="list">List</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLinkActive="active" routerLink="create">Create</a>
      </li>
    </ul>
  </div>
</nav>
<router-outlet></router-outlet>

app.component.html dosyamız bizim uygulamamızı ilk oluşturduğumuzda gelen html dosyamızdı. Diğer oluşturduğumuz component’lere ve dolayısı ile o component’lere ait HTML dosyalarını kullanma işlemini de bu HTML dosyası üzerinden yapacağız. Dosyamız içerisinde iki adet a tag’i bulunmakta. routerLinkActive özelliği aktif CSS sınıfı ataması yapılmak için kullanılıyor. routerLink özelliği de a tag’inin hangi component’le ilişkilendirileceğini söylüyor.

router-outlet özelliğine gelecek olursak bizim tanımladığımız a tag’lerine tıklandığında çağıralacak component’lere ait html’ler bu router-outlet tag’inin içerisinde yayınlanacak. Tıklandığında dinamik olarak değişim gerçekleşecektir. Biz List ya da Create butonuna tıkladığımızda onlara ait HTML sayfaları getirilip app.component.html içindeki router-outlet tag’inin içinde yayınlanıyor.

ng s -o komutunu çalıştırdımızda uygulama default list path’i ile çalışıyor olacaktır. Bu nedenle adres çubuğunda http://localhost:4200/list adresini ve sayfa açıldığında da list-employees works! yazısını göreceğiz.

Create linkine tıkladığımızda da http://localhost:4200/create adresini adres çubuğunda görecek ve create-employee works! yazısını ekranda göreceğiz.

Bu yazıda anlatacaklarım da bu kadar arkadaşlar. Bir sonraki yazıda görüşmek üzere.

Görüşene kadar sağlıcakla kalın.