Angular Outsourcing Route Configuration

Şimdiye kadar yaptığımız tüm route tanımlamalarını uygulamamızın ana modulünde yani appModule‘ de gerçekleştirdik. Lakin appModule dosyası olabildiğince sade olmalı. Bu teknik bir gereksinim değil ! Ama ileride uygulamanız büyüdükçe hayli fazla sayıda route tanımlamanız olacak. Bu tanımlamaların kullandığı Component’ leri de aynı dosya içerisinde yazmanız gerekecek. Böyle bir durumda, appModule dosyası okunmaktan çok uzak bir dosya haline gelir.
Bu sebeple route tanımlamalarımızı, ayrı bir module içerisinde gerçekleştirmeliyiz.

App Routing Module

• Tüm route’ ları AppRoutingModule modülü altında toplayacağım. Bu modüle vereceğiniz isim tamamen size kalmış. "app-routing-module.ts" adında "app" klasörü altında bir dosya açıyorum.
• Yeni bir module oluşturduğumuz için, "NgModule" interface’ ini import ediyorum;

import {NgModule} from '@angular/core';

• Route tanımlamaları yapacağımız için "Routes, RouterModule" import ediyorum;

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

• Route tanımlarımın kullanacağı tüm component’ leri import ediyorum. Burda import edecekleriniz, tamamen sizin uygulamanızdaki component’ ler olacak;

import { ProductComponent } from './product/product.component';
import { HomeComponent } from './home/home.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

• Daha önce yaptığımız route tanımlamalarını bu module’ e taşıyorum;

const appRoutes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'product/:id', component: ProductComponent},
  {path: 'not-found', component: PageNotFoundComponent},
  {path: 'herhangiBirUrl', redirectTo: '/not-found'},
  {path: '**', redirectTo: '/not-found'}
];

• Sıra geldi, NgModule decorator deklerasyonuna;

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

• import içerisinde, RouterModule‘ ü alıyoruz ve forRoot metodu içerisinde, yukarıda tanımladığımız route’ ları ekliyoruz.

• exports üzerinden ise, route’ larını tanımladığımız RouterModule’ ü export ediyoruz. Yani dışarı çıkarıyoruz. Nereye ? AppRoutingModule’ ü import edeceğimiz module’ e. Bu module de tahmin edeceğiniz üzere, AppModule olacak.

• En sonunda ise, "AppRoutingModule" ün class’ ını tanımlıyoruz;

export class AppRoutingModule {}

• Sıra geldi, AppRoutingModule‘ ü AppModule‘ e import etmeye;

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

@NgModule({
  imports: [
    AppRoutingModule
  ]
})

• Route’ larımızın kullandığı component’ leri AppModule içerisinde import etmeli ve AppModule’ ün decarator’ ü içerisinde declarations özelliği içerisinde yazmalıyız. Burada import ve declare edeceğiniz component’ ler tamamen sizin uygulamanızdaki componentler olacaktır !!! Ben örnek olması açısından yazıyorum.

import { ProductComponent } from './product/product.component';
import { HomeComponent } from './home/home.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

@NgModule({
  declarations: [
    AppComponent,
    ProductComponent,
    HomeComponent,
    PageNotFoundComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ]
})

• Tebrikler, artık herşey tamamlandı. Bundan sonra route tanımlamalarınızı yeni açtığımız AppRoutingModule üzerinde tanımlayabilirsiniz.

AppRoutingModule ve AppModule’ ün son hali;

• AppRoutingModule;

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

import { ProductComponent } from './product/product.component';
import { HomeComponent } from './home/home.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const appRoutes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'product/:id', component: ProductComponent},
  {path: 'not-found', component: PageNotFoundComponent},
  {path: 'herhangiBirUrl', redirectTo: '/not-found'},
  {path: '**', redirectTo: '/not-found'}
];

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

export class AppRoutingModule {}

• AppModule;

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

import { AppComponent } from './app.component';
import { ProductComponent } from './product/product.component';
import { HomeComponent } from './home/home.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

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

@NgModule({
  declarations: [
    AppComponent,
    ProductComponent,
    HomeComponent,
    PageNotFoundComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

CANLI ÖRNEK;