कोणीय 2 - रूटिंग

रूटिंग उपयोगकर्ताओं को मुख्य पृष्ठ पर चुने गए विकल्प के आधार पर उपयोगकर्ताओं को विभिन्न पृष्ठों तक निर्देशित करने में मदद करता है। इसलिए, उनके द्वारा चुने गए विकल्प के आधार पर, आवश्यक कोणीय घटक उपयोगकर्ता को प्रदान किया जाएगा।

आइए यह देखने के लिए आवश्यक चरण देखें कि हम एक कोणीय 2 एप्लिकेशन में रूटिंग को कैसे लागू कर सकते हैं।

Step 1 - index.html फ़ाइल में आधार संदर्भ टैग जोड़ें।

<!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- आवेदन के लिए दो मार्ग बनाएं। इसके लिए 2 फाइल बनाई जाएंगीInventory.component.ts तथा product.component.ts

Step 3 - product.component.ts फ़ाइल में निम्न कोड रखें।

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

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

Step 4 - Inventory.component.ts फ़ाइल में निम्न कोड रखें।

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

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

दोनों घटक कुछ भी फैंसी नहीं करते हैं, वे केवल घटक के आधार पर कीवर्ड प्रस्तुत करते हैं। तो इन्वेंट्री घटक के लिए, यह उपयोगकर्ता को इन्वेंटरी कीवर्ड प्रदर्शित करेगा। और उत्पादों के घटक के लिए, यह उपयोगकर्ता को उत्पाद कीवर्ड प्रदर्शित करेगा।

Step 5 - app.module.ts फ़ाइल में, निम्न कोड जोड़ें -

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 { }

उपरोक्त कार्यक्रम के बारे में निम्नलिखित बातों पर ध्यान देने की आवश्यकता है -

AppRoutes में 2 मार्ग हैं, एक Appproduct घटक है और दूसरा AppInventory घटक है।
दोनों घटकों को घोषित करना सुनिश्चित करें।
RouterModule.forRoot एप्लिकेशन में मार्गों को जोड़ना सुनिश्चित करता है।

Step 6 - app.component.ts फ़ाइल में, निम्न कोड जोड़ें।

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  { }

<राऊटर-आउटलेट> </ राऊटर-आउटलेट> घटक को प्रस्तुत करने के लिए प्लेसहोल्डर है जिसके आधार पर उपयोगकर्ता विकल्प चुनता है।

अब, सभी कोड को सहेजें और npm का उपयोग करके एप्लिकेशन चलाएं। ब्राउज़र पर जाएं, आपको निम्न आउटपुट दिखाई देगा।

अब यदि आप इन्वेंट्री लिंक पर क्लिक करते हैं, तो आपको निम्न आउटपुट मिलेगा।

एक त्रुटि मार्ग जोड़ना

रूटिंग में, कोई त्रुटि मार्ग भी जोड़ सकता है। यह तब हो सकता है जब उपयोगकर्ता उस पृष्ठ पर जाता है जो एप्लिकेशन में मौजूद नहीं है।

आइए देखें कि हम इसे कैसे लागू कर सकते हैं।

Step 1 - नीचे दिखाए गए अनुसार NotFound.component.ts के रूप में एक PageNotFound घटक जोड़ें -

Step 2 - नई फ़ाइल में निम्न कोड जोड़ें।

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

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

Step 3 - app.module.ts फ़ाइल में निम्न कोड जोड़ें।

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 {
}

अब हमारे पास एक अतिरिक्त मार्ग है जिसे पथ कहा जाता है: '**', घटक: PageNotFoundComponent। इसलिए, ** किसी भी मार्ग के लिए है जो डिफ़ॉल्ट मार्ग के लायक नहीं है। वे PageNotFoundComponent घटक को निर्देशित किए जाएंगे।

अब, सभी कोड को सहेजें और npm का उपयोग करके एप्लिकेशन चलाएं। अपने ब्राउज़र पर जाएं, और आपको निम्न आउटपुट दिखाई देगा। अब, जब आप किसी गलत लिंक पर जाते हैं, तो आपको निम्न आउटपुट मिलेगा।