آموزش مسیریابی در انگولار ۲

3 سال پیش

آموزش مسیریابی در انگولار ۲

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش مسیریابی در انگولار ۲ خواهیم پرداخت.

مسیریابی در هدایت کاربران به صفحات مختلف بر اساس گزینه ای که در صفحه اصلی انتخاب می کنند، کمک می کند. بنابراین بر اساس گزینه ای که انتخاب می کنند، قطعه انگولار مورد نیاز به کاربر ارائه می شود.

بیایید مراحل لازم را ببینیم تا ببینیم چگونه می توانیم مسیریابی را در برنامه انگولار ۲ پیاده سازی کنیم.

مرحله ۱ – برچسب مرجع اصلی را در فایل 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>

مرحله ۲ – دو مسیر برای برنامه ایجاد کنید. برای این کار ، ۲ فایل به نام Inventory.component.ts و product.component.ts ایجاد کنید

Open Editors
مرحله ۳ – کد زیر را در فایل product.component.ts قرار دهید.

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

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

مرحله ۴ – کد زیر را در فایل Inventory.component.ts قرار دهید.

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

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

هر دو جزء هیچ کار جالبی انجام نمی دهند، آنها فقط کلمات کلیدی را بر اساس جزء ارائه می دهند. بنابراین برای جزء موجودی، کلمه کلیدی موجودی را برای کاربر نمایش می دهد. و برای جزء محصولات، کلمه کلیدی محصول را به کاربر نشان می دهد.

مرحله ۵ – در فایل 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 شامل ۲ مسیر است ، یکی جزء Appproduct و دیگری جزء AppInventory است.
اطمینان حاصل کنید که هر دو جزء را اعلام کنید.
RouterModule.forRoot تضمین می کند که مسیرها را به برنامه اضافه کنید.

مرحله ۶ – در فایل 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  { }

نکته زیر در مورد برنامه فوق باید مورد توجه قرار گیرد –

<router-outlet> </router-outlet> محفوظ است تا کامپوننت را براساس گزینه ای که کاربر انتخاب می کند، ارائه دهد.

اکنون ، تمام کد را ذخیره کرده و برنامه را با استفاده از npm اجرا کنید. به مرورگر بروید، خروجی زیر را مشاهده خواهید کرد.

Product
حال اگر روی پیوند موجودی کلیک کنید، خروجی زیر را دریافت خواهید کرد.

افزودن مسیر خطا

در مسیریابی، می توانید یک مسیر خطا نیز اضافه کنید. اگر کاربر به صفحه ای که در برنامه وجود ندارد برود، این اتفاق می افتد.

بیایید ببینیم چگونه می توانیم این را پیاده سازی کنیم.

مرحله ۱ – مانند قسمت زیر یک جزء PageNotFound را به عنوان NotFound.component.ts اضافه کنید –

NotFound
مرحله ۲ – کد زیر را به فایل جدید اضافه کنید.

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

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

مرحله ۳ – کد زیر را به فایل 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 {
}

نکته زیر در مورد برنامه فوق باید مورد توجه قرار گیرد –

اکنون یک مسیر اضافی به نام path داریم: ‘**’ ، جزء: PageNotFoundComponent. بنابراین ، ** برای هر مسیری است که با مسیر پیش فرض متناسب نیست. آنها به جزء PageNotFoundComponent هدایت خواهند شد.

اکنون، تمام کد را ذخیره کرده و برنامه را با استفاده از npm اجرا کنید. به مرورگر خود بروید، خروجی زیر را مشاهده خواهید کرد. اکنون ، هنگامی که به پیوند اشتباه می روید ، خروجی زیر را دریافت خواهید کرد.

PageNotFound

منبع.

لیست جلسات قبل آموزش آنگولار ۲

برچسب ها : آموزش انگولار 2 آموزش طراحی وب سایت

نویسنده مطلب erfan molaei

آموزش مسیریابی در انگولار ۲

آموزش مسیریابی در انگولار ۲

افزودن مسیر خطا

لیست جلسات قبل آموزش آنگولار ۲

دیدگاه شما

بدون دیدگاه

آموزش مسیریابی در انگولار ۲

افزودن مسیر خطا

لیست جلسات قبل آموزش آنگولار ۲

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه