Routing ekleyin

Bu eğitim dersi, uygulamanıza rotaların nasıl ekleneceğini gösterir.

Neler öğreneceksiniz

Bu dersin sonunda uygulamanız yönlendirme desteğine sahip olacaktır.

Yönlendirmenin kavramsal önizlemesi

Bu eğitim, Angular'da yönlendirmeyi tanıtır. Yönlendirme, uygulamadaki bir bileşenden diğerine navigasyon yapabilme yeteneğidir. Tek Sayfa Uygulamalarında (SPA), kullanıcı için istenen görünümü temsil etmek üzere sayfanın yalnızca bazı bölümleri güncellenir.

Angular Router, kullanıcıların rotalar tanımlamasına ve o rota uygulama tarafından istendiğinde ekranda hangi bileşenin görüntülenmesi gerektiğini belirtmesine olanak tanır.

Bu derste, ayrıntılar sayfasına navigasyon yapabilmek için uygulamanızda yönlendirmeyi etkinleştireceksiniz.

1. Varsayılan bir details bileşeni oluşturun

   1. Terminalden, Details bileşenini oluşturmak için aşağıdaki komutu girin:

       ng generate component details

      Bu bileşen, belirli bir konut konumu hakkında daha fazla bilgi sağlayan ayrıntılar sayfasını temsil edecektir.

2. Uygulamaya yönlendirme ekleyin

   1. src/app dizininde, routes.ts adında bir dosya oluşturun. Bu dosya, uygulamadaki rotaları tanımlayacağımız yerdir.

   2. main.ts dosyasında, uygulamada yönlendirmeyi etkinleştirmek için aşağıdaki güncellemeleri yapın:

      1. Routes dosyasını ve provideRouter fonksiyonunu içe aktarın:

         Import routing details in src/main.ts

         /*
          *  Protractor support is deprecated in Angular.
          *  Protractor is used in this example for compatibility with Angular documentation tools.
          */
         import {bootstrapApplication, provideProtractorTestingSupport} from '@angular/platform-browser';
         import {App} from './app/app';
         import {provideRouter} from '@angular/router';
         import routeConfig from './app/routes';
         
         bootstrapApplication(App, {
           providers: [provideProtractorTestingSupport(), provideRouter(routeConfig)],
         }).catch((err) => console.error(err));
         

      2. bootstrapApplication çağrısını yönlendirme yapılandırmasını dahil edecek şekilde güncelleyin:

         Add router configuration in src/main.ts

         /*
          *  Protractor support is deprecated in Angular.
          *  Protractor is used in this example for compatibility with Angular documentation tools.
          */
         import {bootstrapApplication, provideProtractorTestingSupport} from '@angular/platform-browser';
         import {App} from './app/app';
         import {provideRouter} from '@angular/router';
         import routeConfig from './app/routes';
         
         bootstrapApplication(App, {
           providers: [provideProtractorTestingSupport(), provideRouter(routeConfig)],
         }).catch((err) => console.error(err));
         

   3. src/app/app.ts dosyasında, bileşeni yönlendirme kullanacak şekilde güncelleyin:

      1. Router yönergeleri RouterOutlet ve RouterLink için dosya düzeyinde import'lar ekleyin:

         Import router directives in src/app/app.ts

         import {Component} from '@angular/core';
         import {Home} from './home/home';
         import {RouterLink, RouterOutlet} from '@angular/router';
         @Component({
           selector: 'app-root',
           imports: [Home, RouterOutlet, RouterLink],
           template: `
             <main>
               <a [routerLink]="['/']">
                 <header class="brand-name">
                   <img class="brand-logo" src="/public/logo.svg" alt="logo" aria-hidden="true" />
                 </header>
               </a>
               <section class="content">
                 <router-outlet />
               </section>
             </main>
           `,
           styleUrls: ['./app.css'],
         })
         export class App {
           title = 'homes';
         }
         

      2. @Component meta verileri imports'una RouterOutlet ve RouterLink ekleyin

         Add router directives to component imports in src/app/app.ts

         import {Component} from '@angular/core';
         import {Home} from './home/home';
         import {RouterLink, RouterOutlet} from '@angular/router';
         @Component({
           selector: 'app-root',
           imports: [Home, RouterOutlet, RouterLink],
           template: `
             <main>
               <a [routerLink]="['/']">
                 <header class="brand-name">
                   <img class="brand-logo" src="/public/logo.svg" alt="logo" aria-hidden="true" />
                 </header>
               </a>
               <section class="content">
                 <router-outlet />
               </section>
             </main>
           `,
           styleUrls: ['./app.css'],
         })
         export class App {
           title = 'homes';
         }
         

      3. template özelliğinde, <app-home /> etiketini <router-outlet> yönergesiyle değiştirin ve ana sayfaya geri dönüş bağlantısı ekleyin. Kodunuz bu kodla eşleşmelidir:

         Add router-outlet in src/app/app.ts

         import {Component} from '@angular/core';
         import {Home} from './home/home';
         import {RouterLink, RouterOutlet} from '@angular/router';
         @Component({
           selector: 'app-root',
           imports: [Home, RouterOutlet, RouterLink],
           template: `
             <main>
               <a [routerLink]="['/']">
                 <header class="brand-name">
                   <img class="brand-logo" src="/public/logo.svg" alt="logo" aria-hidden="true" />
                 </header>
               </a>
               <section class="content">
                 <router-outlet />
               </section>
             </main>
           `,
           styleUrls: ['./app.css'],
         })
         export class App {
           title = 'homes';
         }
         

3. Yeni bileşene rota ekleyin

   Önceki adımda, şablondaki <app-home> bileşenine olan referansı kaldırdınız. Bu adımda, o bileşene yeni bir rota ekleyeceksiniz.

   1. routes.ts dosyasında, bir rota oluşturmak için aşağıdaki güncellemeleri yapın.

      1. Home, Details ve rota tanımlarında kullanacağınız Routes türü için dosya düzeyinde import'lar ekleyin.

         Import components and Routes

         import {Routes} from '@angular/router';
         import {Home} from './home/home';
         import {Details} from './details/details';
         
         const routeConfig: Routes = [
           {
             path: '',
             component: Home,
             title: 'Home page',
           },
           {
             path: 'details/:id',
             component: Details,
             title: 'Home details',
           },
         ];
         
         export default routeConfig;
         

      2. Routes türünde routeConfig adında bir değişken tanımlayın ve uygulama için iki rota tanımlayın:

         Add routes to the app

         import {Routes} from '@angular/router';
         import {Home} from './home/home';
         import {Details} from './details/details';
         
         const routeConfig: Routes = [
           {
             path: '',
             component: Home,
             title: 'Home page',
           },
           {
             path: 'details/:id',
             component: Details,
             title: 'Home details',
           },
         ];
         
         export default routeConfig;
         

         routeConfig dizisindeki girişler, uygulamadaki rotaları temsil eder. İlk giriş, URL '' ile eşleştiğinde Home bileşenine navigasyon yapar. İkinci giriş, ilerideki bir derste tekrar ele alınacak bazı özel biçimlendirme kullanır.

   2. Tüm değişiklikleri kaydedin ve uygulamanın tarayıcıda çalıştığını doğrulayın. Uygulama hala konut konumları listesini görüntülemelidir.

Uygulamanızla büyük ilerleme kaydediyorsunuz, aferin.

Bu derste ele alınan konular hakkında daha fazla bilgi için: