Açısal 2 - Yönlendirme

Yönlendirme, kullanıcıları ana sayfada seçtikleri seçeneğe göre farklı sayfalara yönlendirmeye yardımcı olur. Bu nedenle, seçtikleri seçeneğe bağlı olarak, gerekli Açısal Bileşen kullanıcıya sunulacaktır.

Bir Angular 2 uygulamasında yönlendirmeyi nasıl uygulayabileceğimizi görmek için gerekli adımları görelim.

Step 1 - index.html dosyasına temel referans etiketini ekleyin.

<!DOCTYPE html>
<html>
   <head>
      <base href = "/">
      <title>Angular QuickStart</title>
      <meta charset = "UTF-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      
      <base href = "/">
      <link rel = "stylesheet" href = "styles.css">

      <!-- Polyfill(s) for older browsers -->
      <script src = "node_modules/core-js/client/shim.min.js"></script>
      <script src = "node_modules/zone.js/dist/zone.js"></script>
      <script src = "node_modules/systemjs/dist/system.src.js"></script>
      <script src = "systemjs.config.js"></script>

      <script>
         System.import('main.js').catch(function(err){ console.error(err); });
      </script>
   </head>

   <body>
      <my-app></my-app>
   </body>
</html>

Step 2- Uygulama için iki rota oluşturun. Bunun için adında 2 dosya oluşturunInventory.component.ts ve product.component.ts

Step 3 - Aşağıdaki kodu product.component.ts dosyasına yerleştirin.

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

@Component ({
   selector: 'my-app',
   template: 'Products',
})
export   class   Appproduct  {
}

Step 4 - Aşağıdaki kodu Inventory.component.ts dosyasına yerleştirin.

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

@Component ({
   selector: 'my-app',
   template: 'Inventory',
})
export class AppInventory  {
}

Her iki bileşen de süslü bir şey yapmaz, sadece anahtar kelimeleri bileşene göre oluştururlar. Dolayısıyla Envanter bileşeni için, kullanıcıya Envanter anahtar kelimesini gösterecektir. Ürünler bileşeni için de ürün anahtar kelimesini kullanıcıya gösterecektir.

Step 5 - app.module.ts dosyasında aşağıdaki kodu ekleyin -

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { Appproduct } from './product.component';
import { AppInventory } from './Inventory.component';
import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
   { path: 'Product', component: Appproduct },
   { path: 'Inventory', component: AppInventory },
];

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

Yukarıdaki program hakkında aşağıdaki noktalara dikkat edilmesi gerekir -

AppRoutes, biri Appproduct bileşeni ve diğeri AppInventory bileşeni olmak üzere 2 yol içerir.
Her iki bileşeni de bildirdiğinizden emin olun.
RouterModule.forRoot, rotaların uygulamaya eklenmesini sağlar.

Step 6 - app.component.ts dosyasına aşağıdaki kodu ekleyin.

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

@Component ({
   selector: 'my-app',
   template: `
   <ul>
      <li><a [routerLink] = "['/Product']">Product</a></li>
      <li><a [routerLink] = "['/Inventory']">Inventory</a></li>
   </ul>
   <router-outlet></router-outlet>`
})
export class AppComponent  { }

Yukarıdaki programla ilgili olarak aşağıdaki noktaya dikkat edilmelidir -

<router-outlet> </router-outlet>, kullanıcının seçtiği seçeneğe bağlı olarak bileşeni oluşturmak için yer tutucudur.

Şimdi, tüm kodu kaydedin ve uygulamayı npm kullanarak çalıştırın. Tarayıcıya gidin, aşağıdaki çıktıyı göreceksiniz.

Şimdi Envanter bağlantısını tıklarsanız, aşağıdaki çıktıyı alacaksınız.

Hata Rotası Ekleme

Yönlendirme'de bir hata yolu da eklenebilir. Bu, kullanıcı uygulamada bulunmayan bir sayfaya giderse gerçekleşebilir.

Bunu uygulamaya nasıl başlayabileceğimize bir bakalım.

Step 1 - Aşağıda gösterildiği gibi NotFound.component.ts olarak bir PageNotFound bileşeni ekleyin -

Step 2 - Aşağıdaki kodu yeni dosyaya ekleyin.

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

@Component ({  
   selector: 'my-app',  
   template: 'Not Found', 
})  
export class PageNotFoundComponent {  
}

Step 3 - Aşağıdaki kodu app.module.ts dosyasına ekleyin.

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { Appproduct } from './product.component' 
import { AppInventory } from  './Inventory.component' 
import { PageNotFoundComponent } from  './NotFound.component' 
import { RouterModule, Routes } from '@angular/router';  

const appRoutes: Routes = [ 
   { path: 'Product', component: Appproduct }, 
   { path: 'Inventory', component: AppInventory }, 
   { path: '**', component: PageNotFoundComponent } 
];  

@NgModule ({ 
   imports: [ BrowserModule, 
   RouterModule.forRoot(appRoutes)], 
   declarations: [ AppComponent,Appproduct,AppInventory,PageNotFoundComponent], 
   bootstrap: [ AppComponent ] 
}) 

export class AppModule {
}

Yukarıdaki programla ilgili olarak aşağıdaki noktaya dikkat edilmelidir -

Artık yol adında fazladan bir yolumuz var: '**', bileşen: PageNotFoundComponent. Dolayısıyla, ** varsayılan rotaya uymayan herhangi bir rota içindir. PageNotFoundComponent bileşenine yönlendirilecekler.

Şimdi, tüm kodu kaydedin ve uygulamayı npm kullanarak çalıştırın. Tarayıcınıza gidin ve aşağıdaki çıktıyı göreceksiniz. Şimdi, herhangi bir yanlış bağlantıya gittiğinizde aşağıdaki çıktıyı alacaksınız.