Routing'i Etkinleştirme

Çoğu uygulama için, uygulamanın tek bir sayfadan fazlasına ihtiyaç duyduğu bir nokta gelir. Bu zaman kaçınılmaz olarak geldiğinde, yönlendirme (routing) kullanıcılar için performans hikayesinin büyük bir parçası haline gelir.

Bu aktivitede, uygulamanızı Angular Router kullanacak şekilde nasıl kuracağınızı ve yapılandıracağınızı öğreneceksiniz.

1. Bir app.routes.ts dosyası oluşturun

   app.routes.ts dosyasının içinde aşağıdaki değişiklikleri yapın:

   1. @angular/router paketinden Routes'u içe aktarın.
   2. Routes tipinde routes adında bir sabit dışa aktarın ve değer olarak [] atayın.

   import {Routes} from '@angular/router';
   
   export const routes: Routes = [];

2. Sağlayıcıya yönlendirme ekleyin

   app.config.ts dosyasında, uygulamayı aşağıdaki adımlarla Angular Router için yapılandırın:

   1. @angular/router'dan provideRouter fonksiyonunu içe aktarın.
   2. ./app.routes.ts dosyasından routes'u içe aktarın.
   3. providers dizisinde routes'u argüman olarak geçirerek provideRouter fonksiyonunu çağırın.

   import {ApplicationConfig} from '@angular/core';
   import {provideRouter} from '@angular/router';
   import {routes} from './app.routes';
   
   export const appConfig: ApplicationConfig = {
     providers: [provideRouter(routes)],
   };

3. Bileşende RouterOutlet'i içe aktarın

   Son olarak, uygulamanızın Angular Router'ı kullanmaya hazır olduğundan emin olmak için, uygulamaya yönlendiricinin istenen içeriği nerede göstermesini beklediğinizi söylemeniz gerekir. Bunu, @angular/router'dan RouterOutlet direktifini kullanarak gerçekleştirin.

   App şablonunu <router-outlet /> ekleyerek güncelleyin

   import {RouterOutlet} from '@angular/router';
   
   @Component({
   ...
   template: `
       <nav>
         <a href="/">Home</a>
         |
         <a href="/user">User</a>
       </nav>
       <router-outlet />
     `,
   imports: [RouterOutlet],
   })
   export class App {}

Uygulamanız artık Angular Router kullanmaya hazır. Harika is! 🙌

Uygulamamız için rotaları tanımlamanın bir sonraki adımını öğrenmek için devam edin.