Angular Router Giriş

Angular Router Nedir ?

Angular framework kendi router modülü ile gelmektedir. Router sayesinde, url değişmesine rağmen aynı index.html dosyasındaki kalıp, ana template’ i kaybetmeyip, sadece route bazlı template’ in ana template’ e inject edilmesini sağlayabilirsiniz.
Bu sayede, Single Page Application oluşturabilirsiniz.

Neden Single Page Application ?

Geleneksel web uygulamaları, url değiştikçe, her yeni url’ i sıfırdan yükler. Teorik olarak bu mantık doğrudur. Çünkü her url’ in içeriği birbirinden %100 oranda farklı olabilir. Lakin gerçek hayatta modern web siteleri bu denli farklara sahip sayfalar barındırmamaktadır. İşlevsellik açısından, modern websiteleri en başta 3′ e bölünür. Header, Body, Footer şeklinde. Header ve footer hiçbir zaman sayfalar arasında %100 farklılık göstermez. Keza Body kısmıda göstermez. Bu sebeple her url’ in sıfırdan yüklenmesi gereksizdir.
Ayrıca, View katmanının Backend’ den Frontend’ e kaydırılması gerektiğini düşünen ve bu konuda son derece haklı olan bir görüşte hakimdir.
Modern web uygulamalarında backend sadece kendi işine odaklanmalıdır. Business logic’ i gerçeklemelidir ve dış dünya ile json vb. formatlar üzerinden konuşmalıdır.

OnePage ve SinglePageApplication karıştırılmamalıdır

Sık karşılaşılan bir hatadır. OnePage 1 tek url’ den oluşur. Sayfa içerisindeki değişimler, birden çok view’ ın alt alta bulunması sayesinde, scroll edilerek sağlanır. Yada TabPage yapısı ile sadece başlığı tıklanan sayfanın CSS görünürlüğü aktif edilir. Lakin zengin bir web uygulamasının ihtiyaçlarını karşılamaz.

Angular Router Kurulumu;

• Angular Router, framework’ ün içerisinde dahili olarak gelmektedir. Lakin tüm angular modülleri gibi, eğerki kullanacağınızı belirtmezseniz, projeye dahil olmaz. Router Modülü import etmenin en doğru yeri, en tepedir. Yani AppModule’ dür. Router Module yanında, Routes tipini de import etmek, route larınızı yazarken yardımcı olması açısından faydalıdır;

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

• Artık route’ larımızı yazabiliriz. Her route, Routes tipinde olacaktır;

const appRoutes: Routes = [
  {}
];

• appRoutes adında Routes tipinde objeler barındıracak olan dizimizi oluşturduk. Her yeni route objesini yazmaya başladığınızda, IDE’ niz destekliyorsa, size route pattern’ ini gösterdiğini göreceksiniz;

const appRoutes: Routes = [
  {path: '', component: AppComponent},
  {path: 'about', component: AboutComponent}
];

• path değeri boş olan bir route ekledim, anasayfamız herhangi bir path gerektirmiyor. component değerine ise, ilgili path çağrıldığında, görüntülenecek component’ i giriyoruz.

• about path’ i ekledim. Url/about linkine gidildiğinde bu route çalışacak ve AboutComponent görüntülenecek.

• route ları da belirledikten sonra artık uygulamamıza ekleyebiliriz. NgModule decorator’ ü içerisindeki imports özniteliği dizisine aşağıdaki şekilde ekliyoruz;

imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(appRoutes)
  ],

• RouterModule’ ün forRoot metodu içerisinde, yukarıda tanımlamış olduğumuz appRoutes dizisini ekledik. Bu sayede Angular artık route’ larımızı tanıyor.
  AppModule’ ün son hali;

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

import { AppComponent } from './app.component';

import {Routes, RouterModule} from '@angular/router';
import { AboutComponent } from './about/about.component';

const appRoutes: Routes = [
  {path: '', component: AppComponent},
  {path: 'about', component: AboutComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• Router Module’ ün sayfa geçişlerini yapabilmesi için, sayfa geçişlerinin içinde yapılacağı directive’ i template’ e eklememiz gerekiyor. Bu directive’ i örnek olması açısından AppComponent’ in template’ ine ekliyorum;

<div class="container">

  <router-outlet></router-outlet>

</div>

• Artık route değişikliğinde, her yeni route’ a component’ in view’ ı router-outlet directive’ i içerisinde kendine yaşam alanı bulacak.

Angular Router uygulamalarında görüşmek üzere 🙂