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

3 سال پیش

امتیاز دهید post

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

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

مسیریابی در اصل به معنای پیمایش بین صفحات است. شما سایت های زیادی را با لینک هایی که شما را به یک صفحه جدید هدایت می کنند دیده اید. این را می توان با استفاده از مسیریابی به دست آورد. در اینجا صفحاتی که به آنها اشاره می کنیم به صورت کامپوننت خواهند بود. ما قبلا نحوه ایجاد یک کامپوننت را دیده ایم. اجازه دهید اکنون یک کامپوننت ایجاد کنیم و نحوه استفاده از مسیریابی با آن را ببینیم.

در طول راه اندازی پروژه، ما از قبل ماژول مسیریابی را گنجانده ایم و همانطور که در زیر نشان داده شده است در app.module.ts موجود است –

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 همانطور که در بالا نشان داده شده است اضافه شده و در آرایه واردات گنجانده شده است.

جزئیات فایل 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 است. این آرایه ای است که تمام مسیرهایی را که در پروژه خود نیاز داریم را در خود جای می دهد.

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

همانطور که در زیر نشان داده شده است در app.component.html اضافه شده است

&lt;h1&gt;Angular 7 Routing Demo&lt;/h1&gt; 
&lt;router-outlet&gt;&lt;/router-outlet&gt;

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

اکنون اجازه دهید 2 مؤلفه به نام های Home و Contact Us ایجاد کنیم و با استفاده از مسیریابی بین آنها حرکت کنیم.

Component Home

ابتدا در مورد خانه بحث خواهیم کرد. در زیر دستور Component Home آمده است

ng g component home

1	ng g component home

C:\projectA7\angular7-app&gt;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)

Component Contact Us

در زیر نحوی برای Component Contact Us آمده است –

ng g component contactus

1	ng g component contactus

C:\projectA7\angular7-app&gt;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.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 { }

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.

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

این روشی است که ما آن را انجام داده ایم 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 { }

بنابراین اکنون کار ما با تعریف مسیرها تمام شده است. ما باید همان را به کاربر نمایش دهیم، بنابراین اجازه دهید دو دکمه Home و Contact Us را در app.component.html اضافه کنیم و با کلیک بر روی دکمه های مربوطه، نمای کامپوننت را در دستورالعمل <router-outlet> نمایش می دهد. در add.component.html اضافه کرده اند.

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

app.component.html

&lt;h1&gt;Angular 7 Routing Demo&lt;/h1&gt; 
&lt;nav&gt; 
   &lt;a routerLink = "/home"&gt;Home&lt;/a&gt; 
   &lt;a routerLink = "/contactus"&gt;Contact Us &lt;/a&gt; 
&lt;/nav&gt; 
&lt;router-outlet&gt;&lt;/router-outlet&gt;

<h1>Angular 7 Routing Demo</h1>

<nav>

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

</nav>

<router-outlet></router-outlet>

در html، انکر لینک‌های، Home و Contact us را اضافه کرده‌ایم و از routerLink برای دادن مسیر به مسیرهایی که در app-routing.module.ts ایجاد کرده‌ایم استفاده کرده‌ایم.

بگذارید اکنون همان را در مرورگر آزمایش کنیم –

Routing Demo

به این ترتیب ما آن را در مرورگر دریافت می کنیم. اجازه دهید برخی از استایل ها را اضافه کنیم تا پیوندها خوب به نظر برسند.

ما css زیر را در 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;

}

این نمایش پیوندها در مرورگر – است

Display Links
برای مشاهده جزئیات کامپوننت خانه همانطور که در زیر نشان داده شده است، روی پیوند Home کلیک کنید

Home Link
بر روی تماس با ما کلیک کنید تا جزئیات اجزای آن را مطابق زیر مشاهده کنید –

Contact Us
با کلیک بر روی لینک، آدرس صفحه را نیز در نوار آدرس در حال تغییر خواهید دید. همانطور که در تصویر بالا نشان داده شده است، جزئیات مسیر را در انتهای صفحه اضافه می کند.

منبع.

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

امتیاز دهید post

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

نویسنده مطلب saber

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

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

app.module.ts

Component Home

Component Contact Us

app.component.html

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

دیدگاه شما

بدون دیدگاه

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

app.module.ts

Component Home

Component Contact Us

app.component.html

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

دیدگاه شما

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

بدون دیدگاه