مسیریابی (Routing) در انگولار 7 – آموزش انگولار 7

چهارشنبه ۶ شهریور ۱۳۹۸
بازدید ۱,۶۲۳ نفر
آرتین
(10 امتیاز از 2 رای)
Loading...

تصویر angular7-routing_6838 مسیریابی (Routing) در انگولار 7 - آموزش انگولار 7

مسیریابی (Routing) در انگولار 7

به طور کلی منظور از مسیریابی (Routing) در انگولار، جا به جا شدن بین صفحات مختلف است. تا به حال سایت های زیادی را دیده اید که شما را با یک لینک به صفحه دیگر منتقل می کنند. همان کار را می توان با استفاده از مسیریابی انجام داد. همانطور که در بخش های قبلی توضیح داده شد، یک کامپوننت جدید ایجاد کنید تا نحوه استفاده از مسیریابی در انگولار 7 را بررسی کنیم.

در فایل app.module.ts مانند نمونه زیر ماژول مربوط به مسیریابی را اضافه کنید:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

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

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { NewCmpComponent } from './new-cmp/new-cmp.component';

import { ChangeTextDirective } from './change-text.directive';

import { SqrtPipe } from './app.sqrt';

@NgModule({

declarations: [

SqrtPipe,

AppComponent,

NewCmpComponent,

ChangeTextDirective

imports: [

BrowserModule,

AppRoutingModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

در کد فوق ما AppRoutingModule را به بخش imports ها اضافه کرده ایم.

در زیر محتوای فایل app-routing.module را مشاهده می کنید:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [];
@NgModule({
   imports: [
      RouterModule.forRoot(routes)
   ],
   exports: [RouterModule]
})
export class AppRoutingModule { }

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

import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

@NgModule({

imports: [

RouterModule.forRoot(routes)

exports: [RouterModule]

})

export class AppRoutingModule { }

فایل فوق هنگام تنظیم مسیریابی برای پروژه به صورت خودکار تولید می شود. اگر این فایل ایجاد نشود، باید آن را خودتان ایجاد کنید. در کد فوق Routes, RouterModule از @angular/router اضافه شده اند. Routes آرایه ای از مسیرهای ثابت است که پروژه به آن ها نیاز دارد.

مسیرهای ثابت همانطور که در NgModule نشان داده شده است به RouterModule داده می شوند. به منظور نمایش جزئیات مسیریابی به کاربر، باید از دستورالعمل <router-outlet> استفاده شود.

مانند نمونه زیر (app.component.html):

<h1>Angular 7 Routing Demo</h1>
<router-outlet></router-outlet>

1 2	<h1>Angular 7 Routing Demo</h1> <router-outlet></router-outlet>

در ادامه ما دو کامپوننت جدید با نام های Home و Contact Us ایجاد و با استفاده از مسیریابی بین آنها پیمایش می کنیم.

کامپوننت Home

با استفاده از دستور زیر کامپوننت مورد نظر را ایجاد می کنیم:

ng g component home

1	ng g component home

خروجی دستور:

C:\projectA7\angular7-app>ng g component home CREATE
src/app/home/home.component.html (23 bytes) CREATE
src/app/home/home.component.spec.ts (614 bytes) CREATE
src/app/home/home.component.ts (261 bytes) CREATE
src/app/home/home.component.css (0 bytes) UPDATE
src/app/app.module.ts (692 bytes)

C:\projectA7\angular7-app>ng g component home CREATE

src/app/home/home.component.html (23 bytes) CREATE

src/app/home/home.component.spec.ts (614 bytes) CREATE

src/app/home/home.component.ts (261 bytes) CREATE

src/app/home/home.component.css (0 bytes) UPDATE

src/app/app.module.ts (692 bytes)

کامپوننت Contact Us

با استفاده از دستور زیر کامپوننت مورد نظر را ایجاد می کنیم:

ng g component contactus

1	ng g component contactus

خروجی دستور:

C:\projectA7\angular7-app>ng g component contactus
CREATE src/app/contactus/contactus.component.html (28 bytes)
CREATE src/app/contactus/contactus.component.spec.ts (649 bytes)
CREATE src/app/contactus/contactus.component.ts (281 bytes)
CREATE src/app/contactus/contactus.component.css (0 bytes)
UPDATE src/app/app.module.ts (786 bytes)

C:\projectA7\angular7-app>ng g component contactus

CREATE src/app/contactus/contactus.component.html (28 bytes)

CREATE src/app/contactus/contactus.component.spec.ts (649 bytes)

CREATE src/app/contactus/contactus.component.ts (281 bytes)

CREATE src/app/contactus/contactus.component.css (0 bytes)

UPDATE src/app/app.module.ts (786 bytes)

کار ایجاد کامپوننت های جدید تمام شد. در زیر می توانید جزئیات مربوط به کامپوننت های جدید را مشاهده کنید (app.module.ts):

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { HomeComponent } from './home/home.component';
import { ContactusComponent } from './contactus/contactus.component';
@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      HomeComponent,
      ContactusComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

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

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { NewCmpComponent } from './new-cmp/new-cmp.component';

import { ChangeTextDirective } from './change-text.directive';

import { SqrtPipe } from './app.sqrt';

import { HomeComponent } from './home/home.component';

import { ContactusComponent } from './contactus/contactus.component';

@NgModule({

declarations: [

SqrtPipe,

AppComponent,

NewCmpComponent,

ChangeTextDirective,

HomeComponent,

ContactusComponent

imports: [

BrowserModule,

AppRoutingModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

حال جزئیات مسریابی را به فایل app-routing.module اضافه می کنیم.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ContactusComponent } from './contactus/contactus.component';
const routes: Routes = [
   {path:"home", component:HomeComponent},
   {path:"contactus", component:ContactusComponent}
];
@NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
})
export class AppRoutingModule { }

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

import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home/home.component';

import { ContactusComponent } from './contactus/contactus.component';

const routes: Routes = [

{path:"home", component:HomeComponent},

{path:"contactus", component:ContactusComponent}

];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule { }

همانطور که مشاهده کردید کامپوننت هایی که برای مسیریابی لازم هستند هم در app.module.ts وارد شده اند و هم در app-routing.module.ts برای بهتر کردن کار می توانیم آنها را در یک جا وارد کنیم.

برای این کار ما یک آرایه از کامپوننت های مسیریابی را در فایل app-routing.module.ts ایجاد و آن را export می کنیم. سپس در فایل app.module.ts آن آرایه را import می کنیم. در این صورت ما می توانیم به آن کامپوننت دسترسی داشته باشیم.

محتوای تغییر یافته فایل app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ContactusComponent } from './contactus/contactus.component';
const routes: Routes = [
   {path:"home", component:HomeComponent},
   {path:"contactus", component:ContactusComponent}
];
@NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
})
export class AppRoutingModule { } export const
RoutingComponent = [HomeComponent,ContactusComponent];

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

import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home/home.component';

import { ContactusComponent } from './contactus/contactus.component';

const routes: Routes = [

{path:"home", component:HomeComponent},

{path:"contactus", component:ContactusComponent}

];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule { } export const

RoutingComponent = [HomeComponent,ContactusComponent];

همانطور که مشاهده می کنید، آرایه RoutingComponent در فایل app.module.ts وارد شده است:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

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

import { AppRoutingModule , RoutingComponent} from './app-routing.module';

import { AppComponent } from './app.component';

import { NewCmpComponent } from './new-cmp/new-cmp.component';

import { ChangeTextDirective } from './change-text.directive';

import { SqrtPipe } from './app.sqrt';

@NgModule({

declarations: [

SqrtPipe,

AppComponent,

NewCmpComponent,

ChangeTextDirective,

RoutingComponent

imports: [

BrowserModule,

AppRoutingModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

تا اینجا کار ایجاد مسیرها تمام شده است. حال باید آن ها به کاربر نمایش دهیم.

در داخل app.component.html دو دکمه ایجاد و مسیرهای که ساخته ایم را به آن ها می دهیم:

<h1>Angular 7 Routing Demo</h1>
<nav>
   <a routerLink = "/home">Home</a>
   <a routerLink = "/contactus">Contact Us </a>
</nav>
<router-outlet></router-outlet>

<h1>Angular 7 Routing Demo</h1>

<nav>

<a routerLink = "/contactus">Contact Us </a>

</nav>

<router-outlet></router-outlet>

خروجی در مرورگر:

تصویر angular7-routing_6838_1 مسیریابی (Routing) در انگولار 7 - آموزش انگولار 7

حال برای بهتر کردن ظاهر برنامه استایل زیر را به app.component.css اضافه کنید:

a:link, a:visited {
   background-color: #848686;
   color: white;
   padding: 10px 25px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
}
a:hover, a:active {
   background-color: #BD9696;
}

a:link, a:visited {

background-color: #848686;

color: white;

padding: 10px 25px;

text-align: center;

text-decoration: none;

display: inline-block;

}

a:hover, a:active {

background-color: #BD9696;

}

خروجی بعد از استایل دادن: