نحوه تنظیم مسیریابی در Angular برای ایجاد برنامه های تک صفحه ای

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

این کتابخانه موسیقی من برنامه چندین صفحه خواهد داشت که هر کدام جزئیات متفاوتی درباره یک آلبوم نمایش می دهند. اجرای مسیریابی به کاربران این امکان را می دهد که بین این صفحات حرکت کنند و جزئیات آلبوم های مختلف را بدون نیاز به بارگذاری مجدد کامل صفحه مشاهده کنند. این آموزش چالش‌هایی را که هنگام ایجاد یک برنامه تک صفحه‌ای با آن مواجه می‌شوید، مانند حفظ وضعیت برنامه و ارائه یک تجربه کاربری روان، و نحوه غلبه بر این چالش‌ها با استفاده از مسیریابی Angular را پوشش می‌دهد.

پیش نیازها

قبل از شروع، باید موارد زیر را روی دستگاه خود نصب کنید:

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

مسیریابی فرآیند پیمایش بین صفحات یا نماهای یک برنامه است. در Angular، مسیریابی برای ایجاد یک برنامه تک صفحه ای (SPA) استفاده می شود که در آن محتوا به صورت پویا و بدون بازخوانی صفحه بارگذاری می شود.

مسیریابی در انگولار و هدف آن

مسیریابی در Angular مکانیزمی است که برای پیمایش بین اجزا و نماهای مختلف در یک برنامه تک صفحه ای استفاده می شود. این امکان را به ما می دهد تا URL های مختلفی را برای اجزای مختلف تعریف کنیم و هنگامی که کاربر به یک URL خاص هدایت می شود، مؤلفه مربوطه بدون بارگیری مجدد صفحه نمایش داده می شود. این یک تجربه کاربری یکپارچه را فراهم می کند و عملکرد برنامه را بهبود می بخشد.

انواع مسیریابی در Angular

دو نوع مسیریابی در Angular وجود دارد: مسیریابی سمت مشتری و مسیریابی سمت سرور.

مسیریابی سمت مشتری: مسیریابی سمت کلاینت رایج ترین نوع مسیریابی در Angular است. در مسیریابی سمت کلاینت، منطق مسیریابی توسط روتر Angular در مرورگر مدیریت می شود و سرور فقط صفحه اولیه HTML را ارائه می دهد. هنگامی که کاربر روی یک لینک کلیک می کند یا یک URL را وارد می کند، روتر Angular درخواست را قطع می کند و مؤلفه مربوطه را بدون بازخوانی صفحه در نمای بارگذاری می کند.

مسیریابی سمت سرور: مسیریابی سمت سرور در Angular کمتر رایج است، اما هنوز مفهوم مهمی برای درک آن است. در مسیریابی سمت سرور، منطق مسیریابی توسط سرور مدیریت می شود که HTML هر صفحه را تولید کرده و به مرورگر ارسال می کند. هنگامی که کاربر روی یک لینک کلیک می کند یا یک URL را وارد می کند، سرور یک صفحه HTML جدید ایجاد می کند و آن را به مرورگر می فرستد. این رویکرد برای برنامه هایی با محتوای پویا زیاد یا برای بهینه سازی سئو مفید است.

مسیریابی در یک برنامه تک صفحه ای چگونه کار می کند؟

در یک برنامه تک صفحه ای، تمام محتوا به صورت پویا بارگذاری می شود و از URL برای پیمایش بین اجزا و نماهای مختلف استفاده می شود. هنگامی که کاربر روی یک پیوند کلیک می کند یا یک URL را وارد می کند، روتر Angular درخواست را قطع می کند و آن را با مسیری که در برنامه تعریف شده مطابقت می دهد. هنگامی که یک مسیر منطبق پیدا شد، مؤلفه مربوطه در نمای بارگذاری می شود و URL به روز می شود تا وضعیت جدید برنامه را منعکس کند. سپس کاربر می‌تواند با کلیک کردن روی پیوندها یا با استفاده از دکمه‌های برگشت و جلو مرورگر بین اجزای مختلف به عقب و جلو حرکت کند و محتوا بدون بارگیری مجدد صفحه به صورت پویا بارگیری می‌شود.

Routing در Angular یک ویژگی قدرتمند و منعطف است که به توسعه دهندگان اجازه می دهد تا برنامه های تک صفحه ای غنی و تعاملی را به راحتی ایجاد کنند. با درک مفاهیم و اصول مسیریابی، می‌توانید اپلیکیشن‌هایی ایجاد کنید که تجربه‌ای یکپارچه و جذاب را برای کاربر فراهم کنند.

راه اندازی Angular Routing

برای شروع، اجازه دهید از Angular CLI برای ایجاد یک برنامه Angular جدید استفاده کنیم. دستور زیر را در ترمینال یا خط فرمان خود اجرا کنید:

ng new my-music-library

هنگامی که دستور ng new را برای ایجاد یک برنامه Angular جدید اجرا می کنید، یک سری سوالات برای پیکربندی پروژه از شما خواسته می شود. در اینجا خلاصه ای از دستورات و انتخاب های توصیه شده است:

• آیا می خواهید مسیریابی Angular را اضافه کنید؟ (y/N) – برای افزودن Angular routing به برنامه خود، y را پاسخ دهید. این یک ماژول مسیریابی جداگانه ایجاد می کند که می توانید از آن برای تعریف مسیرهای برنامه خود استفاده کنید.

• از کدام فرمت شیوه نامه می خواهید استفاده کنید؟ (از کلیدهای جهت دار استفاده کنید) – از کلیدهای جهت دار برای انتخاب فرمت شیوه نامه دلخواه خود استفاده کنید. پیش فرض CSS است، اما می توانید Sass، SCSS، Less یا Stylus را نیز انتخاب کنید.

پس از انتخاب ها، دستور یک برنامه Angular جدید به نام ایجاد می کند my-music-library.

سپس با اجرای دستور زیر دایرکتوری را به پوشه پروژه تغییر دهید:

cd my-music-library

ایجاد چندین مسیر در Angular

بیایید مسیرهایی را برای خود تعریف کنیم کتابخانه موسیقی من کاربرد. ما دو نمای اصلی خواهیم داشت: لیستی از آلبوم ها و نمای جزئیات برای هر آلبوم. برای تعریف این مسیرها، محتویات را جایگزین کنید src/app/app-routing.module.ts فایل با کد زیر:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AlbumListComponent } from './album-list/album-list.component';
import { AlbumDetailComponent } from './album-detail/album-detail.component';

const routes: Routes = [
  { path: '', redirectTo: '/albums', pathMatch: 'full' },
  { path: 'albums', component: AlbumListComponent },
  { path: 'albums/:id', component: AlbumDetailComponent },
  { path: '**', redirectTo: '/albums' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

این کد را وارد می کند AlbumListComponent و AlbumDetailComponent و سه مسیر را تعریف می کند:

• مسیر خالی به مسیر هدایت می شود /albums مسیر.
• این /albums مسیر AlbumListComponent را بارگیری می کند.
• این /albums/:id مسیر AlbumDetailComponent را با شناسه آلبوم مربوطه بارگذاری می کند.
• این ** مسیر به مسیر هدایت می شود /albums اگر مسیر دیگری درخواست شود.

ایجاد کامپوننت برای مسیرها

ما همچنین نیاز به ایجاد AlbumListComponent و AlbumDetailComponent که در مسیرها به آنها اشاره کردیم. برای تولید کامپوننت ها دستور زیر را اجرا کنید:

ng generate component album-list
ng generate component album-detail

این دو جزء جدید در src/app دایرکتوری فراخوانی شد album-list و album-detail. باز کن src/app/album-list/album-list.component.ts فایل و کد زیر را جایگزین محتوا کنید:

import { Component, OnInit } from '@angular/core'
import { HttpClient } from '@angular/common/http'

@Component({
  selector: 'app-album-list',
  templateUrl: './album-list.component.html',
  styleUrls: ['./album-list.component.css'],
})
export class AlbumListComponent implements OnInit {
  albums: any[] = []

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get<any[]>('/assets/albums.json').subscribe((albums) => {
      this.albums = albums
      console.log(this.albums)
    })
  }
}

این کد را تعریف می کند AlbumListComponent به عنوان یک کلاس TypeScript که رابط OnInit را پیاده سازی می کند. همچنین سرویس HttpClient را از آن وارد می کند @angular/common/http module، که به کامپوننت اجازه می دهد تا درخواست های HTTP را انجام دهد.

این ngOnInit روش برای بارگذاری داده ها برای مؤلفه لغو می شود. در این مورد، کامپوننت یک درخواست HTTP GET را به آن ارسال می کند assets/albums.json فایل برای بازیابی لیستی از آلبوم ها با فرمت JSON. روش subscribe برای رسیدگی به پاسخ و اختصاص داده ها به ویژگی آلبوم های جزء استفاده می شود.

اکنون فایل app.module.ts را به روز کنید تا آن را وارد کنید HttpClientModule در ماژول برنامه خود و آن را به آرایه واردات اضافه کنید.

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AlbumListComponent } from './album-list/album-list.component';
import { AlbumDetailComponent } from './album-detail/album-detail.component';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    AlbumListComponent,
    AlbumDetailComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

بعد، را باز کنید src/app/album-detail/album-detail.component.ts فایل و کد زیر را جایگزین محتوا کنید:

import { Component, OnInit } from '@angular/core'
import { ActivatedRoute } from '@angular/router'
import { HttpClient } from '@angular/common/http'

@Component({
  selector: 'app-album-detail',
  templateUrl: './album-detail.component.html',
  styleUrls: ['./album-detail.component.css'],
})
export class AlbumDetailComponent implements OnInit {
  albumId!: number
  album: any
  musicList: any[] = []

  constructor(private route: ActivatedRoute, private http: HttpClient) {}

  ngOnInit() {
    const id = this.route.snapshot.paramMap.get('id')
    if (id !== null) {
      this.albumId = +id
      this.http.get<any[]>('/assets/albums.json').subscribe((albums) => {
        this.album = albums.find((album) => album.id === this.albumId)
        this.musicList = this.album.musicList
        console.log(this.albumId,this.album)
      })
    }
  }
}

این کد به روز شده را تعریف می کند AlbumDetailComponent به عنوان یک کلاس TypeScript که هر دو را تزریق می کند ActivatedRoute خدمات و HttpClient سرویس. سرویس ActivatedRoute برای دریافت شناسه آلبوم از پارامترهای URL استفاده می شود، در حالی که HttpClient این سرویس برای بازیابی جزئیات آلبوم و لیست موسیقی از albums.json فایل.

این ngOnInit روش ابتدا از روش عکس فوری استفاده می کند ActivatedRoute سرویس برای بازیابی شناسه آلبوم از URL. سپس قبل از فرستادن آن به شماره و تخصیص آن به شماره، بررسی می کند که آیا شناسه پوچ نیست albumId ویژگی.

پس از آن، جزء مشترک می شود HttpClient روش دریافت سرویس برای بازیابی albums.json فایل. این subscribe متد یک تابع فراخوانی می گیرد که آرایه ای از آلبوم ها را به عنوان پارامتر دریافت می کند. متد find برای فیلتر کردن و برگرداندن شی آلبومی که با albumId مطابقت دارد استفاده می شود. هنگامی که آلبوم پیدا شد، آن است musicList اموال به musicList خاصیت جزء

این رویکرد از نیاز به حل‌کننده اجتناب می‌کند، زیرا داده‌ها مستقیماً از آن واکشی می‌شوند albums.json فایل. با این حال، شایان ذکر است که این رویکرد نسبت به استفاده از یک حل کننده، به عنوان کل، مقیاس پذیرتر است albums.json هر بار که مؤلفه بارگیری می شود، فایل واکشی می شود.

حال ایجاد کنید albums.json فایل در assets دایرکتوری و کد زیر را اضافه کنید:

[
  {
    "id": 1,
    "title": "Thriller",
    "artist": "Michael Jackson",
    "year": 1982,
    "genre": "Pop"
  },
  {
    "id": 2,
    "title": "Abbey Road",
    "artist": "The Beatles",
    "year": 1969,
    "genre": "Rock"
  },
  {
    "id": 3,
    "title": "The Dark Side of the Moon",
    "artist": "Pink Floyd",
    "year": 1973,
    "genre": "Progressive Rock"
  }
]

سپس اضافه کنید src/assets/albums.json به آرایه دارایی ها در angular.json فایل:

...
"assets": [
   "src/favicon.ico",
    "src/assets",
   "src/assets/albums.json"
 ],
 ...

ایجاد قالب برای کامپوننت ها

در مرحله بعد، ما باید قالب های HTML را برای اجزای خود ایجاد کنیم. باز کن src/app/album-list/album-list.component.html فایل و کد زیر را جایگزین محتوا کنید:

<h1>Album List</h1>

<div *ngFor="let album of albums">
  <h2>{{ album.title }}</h2>
  <p>Artist: {{ album.artist }}</p>
  <p>Year: {{ album.year }}</p>
  <p>Genre: {{ album.genre }}</p>
  <a [routerLink]="['/albums', album.id]">View details</a>
</div>

این کد قالب HTML را برای AlbumListComponent. کد از دستورالعمل ساختاری داخلی Angular استفاده می کند ngFor برای حلقه زدن از طریق آرایه آلبوم ها و نمایش جزئیات هر آلبوم.

برای هر آلبوم، آن را نمایش می دهد title، artist، year، و genre. همچنین با استفاده از routerLink دستورالعمل، که به کاربر اجازه می دهد تا به آن پیمایش کند AlbumDetailComponent برای مشاهده جزئیات آلبوم

پیوند با استفاده از یک آرایه ایجاد می شود، جایی که اولین عنصر مسیر است AlbumDetailComponent و عنصر دوم است id از آلبوم در حال نمایش این آرایه به routerLink دستورالعمل با استفاده از نحو binding ویژگی [routerLink].

به طور مشابه، را باز کنید src/app/album-detail/album-detail.component.html فایل و کد زیر را جایگزین محتوا کنید:

<h2>Album Details</h2>
<div *ngIf="album">
  <h3>{{ album.title }}</h3>
  <p>Artist: {{ album.artist }}</p>
  <p>Year: {{ album.year }}</p>
  <p>Genre: {{ album.genre }}</p>
</div>

این کد طرح بندی را برای AlbumDetailComponent چشم انداز. شامل یک h2 عنوانی که می گوید Album Details و دو عنصر div اولین عنصر div استفاده می کند *ngIf تا فقط محتوای آن نمایش داده شود اگر album تعریف شده است. اطلاعات مربوط به را نمایش می دهد album، از جمله آن title، artist، year، و genre.

عنصر div دوم نیز استفاده می کند *ngIf تا فقط محتوای آن نمایش داده شود اگر musicList حداقل یک مورد دارد این یک عنوان فرعی “ترانه ها” و لیستی از آهنگ های استفاده شده را نشان می دهد *ngFor برای حلقه زدن از طریق هر آهنگ و نمایش آن title و duration.

افزودن پیوندهای ناوبری

در نهایت، اجازه دهید برخی از پیوندهای ناوبری را به برنامه خود اضافه کنیم. باز کن src/app/app.component.html فایل و کد زیر را جایگزین محتوا کنید:

<h1>My Music Library</h1>
<nav>
  <a routerLink="/albums">Albums</a>
</nav>
<router-outlet></router-outlet>

این کد یک عنوان برای برنامه تعریف می کند، یک پیوند ناوبری که به آن اشاره می کند /albums مسیر، و الف عنصری که مولفه را برای مسیر فعلی نمایش می دهد.

ng serve