یکی از ویژگی های اصلی هر برنامه وب، navigation است و برای فعال کردن آن در پروژه خود، باید از routing استفاده کنیم. Angular navigation ،Router را از یک view به view بعدی، زمانی که کاربران task های برنامه را انجام می‌دهند، فعال میکند.
در منوی navigation خود، سه گزینه منو خواهیم داشت: یکی برای صفحه home، دیگری برای عملیات owner و آخرین مورد برای عملیات account. امیدواریم این به شما کمک کند که مزایای استفاده از چندین ماژول در داخل یک پروژه و اینکه چگونه بارگذاری محتوای lazy به عملکرد بهتر برنامه ما کمک می کند را درک کنید.
اگر می خواهید تمام آموزشهای لازم و پایه مربوط به آموزش گام به گام Angular را ببینید ، لطفاً روی این لینک کلیک کنید: مقدمه آموزش گام به گام Angular.
ایجاد یک منوی Navigation
بنابراین با ایجاد یک menu component جدید کار خود را شروع میکنیم:
|
1 |
ng g component menu --skip-tests |
ما قصد داریم از کلاس های Bootstrap برای پیاده سازی منوی navigation در فایل menu.component.html استفاده کنیم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div class="row"> <div class="col"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">Account-Owner Home</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapseNav" aria-controls="collapseNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapseNav"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link" href="#">Owner Actions </a> </li> <li class="nav-item"> <a class="nav-link" href="#">Account Actions </a> </li> </ul> </div> </div> </nav> </div> </div> |
در حال حاضر، ما فایل menu.component.ts را تغییر نمی دهیم.
اما، ما قصد داریم فایل app.component.html خود را تغییر دهیم:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="container"> <div class="row"> <div class="col"> <app-menu></app-menu> </div> </div> <div class="row"> <div class="col"> <app-home></app-home> </div> </div> </div> |
اکنون، می‌توانیم پروژه angular خود را با تایپ کردن ng serve -o اجرا کنیم.
به محض اجرای پروژه، منوی خود را روی صفحه نمایش می‌بینیم:
اضافه کردن قابلیت Collapse به NavBar
در حال حاضر، اگر صفحه‌مان را کوچک کنیم، می‌توانیم دکمه همبرگر را ببینیم، که وقتی روی آن کلیک کنیم، باید آیتم‌های منو را نشان دهد. اما در حال حاضر این اتفاق نمی افتد، زیرا ما تمام قسمتهای جاوا اسکریپت را برای Bootstrap نصب نکرده ایم و نمیخواهیم هم این کار را بکنیم.
آنچه ما می خواهیم این است که تا جایی که می توانیم از ngx-bootstrap با تمام component هایی که در اختیار ما قرار میدهد استفاده کنیم.
با این اوصاف، ما از کامپوننت Collapse از ngx-bootstrap برای فعال کردن منوی collapsable خود استفاده می کنیم.
بنابراین، ابتدا component را در import ،app.module میکنیم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { CollapseModule } from 'ngx-bootstrap/collapse'; ... @NgModule({ declarations: [ AppComponent, HomeComponent, MenuComponent ], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, CollapseModule.forRoot() ], |
در این فایل، می‌توانیم متوجه یک MenuComponent در داخل آرایه declarations نیز شویم. این قبل از ایجاد navigation import ،component شده بود.
سپس، یک property را در فایل menu.component.ts اضافه می کنیم:
|
1 2 3 4 5 6 7 8 9 |
export class MenuComponent implements OnInit { isCollapsed: boolean = false; constructor() { } ngOnInit(): void { } } |
و در نهایت، ما قصد داریم کد NavBar HTML خود را اصلاح کنیم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div class="row"> <div class="col"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">Account-Owner Home</a> <button class="navbar-toggler" type="button" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapseNav" [collapse]="!isCollapsed" [isAnimated]="true"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link" href="#">Owner Actions </a> </li> <li class="nav-item"> <a class="nav-link" href="#">Account Actions </a> </li> </ul> </div> </div> </nav> </div> </div> |
در اینجا رویداد (click) را اضافه کرده ایم که باعث میشود که هر بار که روی دکمه همبرگر کلیک می کنیم وضعیت ویژگی isCollapsed را تغییر دهد. همچنین توجه داشته باشید که value ویژگی aria-controls باید با مقدار id در div که در زیر button قرار گرفته است یکی باشد. علاوه بر این، در div ذکر شده، value را برای انتخابگر [collapse] تعیین می کنیم تا نمایان بودن محتوای ما را کنترل کند و با استفاده از ورودی [isAnimated] انیمیشن را روی true قرار می دهیم.
تمام کاری که باید انجام میدادیم همین بود. حالا می توانیم صفحه را کوچک کنیم و وقتی دکمه همبرگر ظاهر شد، می توانیم روی آن کلیک کرده و آیتم های منو را ببینیم.
پیکربندی Angular Routing
برای فعال کردن navigation بین تمام صفحات داخل این پروژه، باید مسیریابی Angular را تنظیم کنیم. ماژول routing قبلاً برای ما ایجاد شده است زیرا ما در طول ایجاد پروژه آن را درخواست کرده بودیم.
ما می توانیم این را در فایل app.module.ts ببینیم:
|
1 2 3 4 5 6 7 8 9 10 |
import { AppRoutingModule } from './app-routing.module'; ... imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, CollapseModule.forRoot() ], |
AppRoutingModule ماژولی است که مسئول مسیریابی Angular است.
اکنون، تنها کاری که باید انجام دهیم این است که فایل app-routing.module.ts را اصلاح کنیم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import { HomeComponent } from './home/home.component'; import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; const routes: Routes = [ { path: 'home', component: HomeComponent }, { path: '', redirectTo: '/home', pathMatch: 'full' } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } |
بنابراین، ما اینجا، دو مسیر را در داخل آرایه routes اضافه می کنیم. این آرایه routes قبلاً در تابع RouterModule.forRoot برای تعریف مسیرها برای برنامه ما ارائه شده بود.
هنگامی که بیش از یک ماژول در داخل برنامه ایجاد می کنیم، می توانیم از تابع ()forRoot ارائه شده توسط RouterModule، فقط در ماژول main(root) استفاده کنیم. در بقیه ماژول ها باید از تابع ()forChild استفاده کنیم. تابع ()forRoot آرایه ای از object ها را به عنوان یک پارامتر می پذیرد. هر عنصر از این آرایه از path و target component آن path تشکیل شده است. بنابراین، مسیر: home به این معنی است که در آدرس http://localhost:4200/home، قرار است HomeComponent را به کار گیریم. خط دیگر داخل آرایه redirect ،routes پیش فرض به home page است.
اکنون، برای فعال کردن محتوا از مسیرها، باید app.component.html را اصلاح کنیم:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="container"> <div class="row"> <div class="col"> <app-menu></app-menu> </div> </div> <div class="row"> <div class="col"> <router-outlet></router-outlet> </div> </div> </div> |
router-outlet یک container برای محتوای routing است. بنابراین اساساً، تمام محتوای مربوط به آدرسی که ما به آن مسیریابی می کنیم در داخل این container نمایان می شود.
حال اگر به localhost:4200 برویم، باید بتوانیم همان نتیجه قبلی را ببینیم، اما این بار، ما home component خود را از طریق <router-outlet> نمایان میکنیم و نه از طریق <app-home> selector.
علاوه بر این، اگر روی هر آیتم دیگری از منو کلیک کنیم، به طور خودکار به home page هدایت می شویم.
Style دادن به Link ها
اگر بخواهیم به لینک فعال در منو استایل بدهیم، باید تگ <a> را تغییر دهیم:
|
1 2 |
<a class="navbar-brand" [routerLink]="['/home']" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Account-Owner Home</a> |
با routerLinkActive، نام کلاس CSS را که می‌خواهیم برای استایل دادن به لینک فعال استفاده کنیم، تنظیم میکنیم. علاوه بر این، routerLinkActiveOptions به ما اجازه می دهد که فقط در صورتی که پیوند و URL با یکدیگر دقیقا مطابقت داشته باشد، یک کلاس اضافه کنیم. در نهایت، ما دیگر از ویژگی href برای navigation استفاده نمی کنیم. در عوض، ما از دستور [routerLink] برای navigate به مسیر routing خود استفاده می کنیم.
اکنون در فایل menu.component.css، کلاس active. را نیز اضافه می کنیم:
|
1 2 3 4 5 |
.active{ font-weight: bold; font-style: italic; color: #fff; } |
بسیار عالی. اگر برنامه خود را بررسی کنیم، می‌بینیم که پیوند Account-Owner Home اکنون سفید و پررنگ است.
ایجاد Not-Found Component
ما در حال حاضر یک navigation فعال داریم.
برای تکمیل قسمت Angular Routing در این post، می‌خواهیم کامپوننتی با نام not-found ایجاد کنیم. برنامه قرار است زمانی که کاربر، مسیری را که URL آن در برنامه موجود نیست را تایپ کند کاربر را به این component هدایت کند.
برای انجام این کار، این دستور که با آن آشنایی دارید را اجرا میکنیم:
|
1 |
ng g component error-pages/not-found --skip-tests |
ساختار پوشه به این صورت است:
فایل not-found.component.ts را اصلاح میکنیم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-not-found', templateUrl: './not-found.component.html', styleUrls: ['./not-found.component.css'] }) export class NotFoundComponent implements OnInit { notFoundText: string = `404 SORRY COULDN'T FIND IT!!!`; constructor() { } ngOnInit(): void { } } |
باید به مقدار رشته ویژگی notFoundText توجه کنیم. ما از apostrophe اینجا استفاده نمی کنیم بلکه از backtick (`) استفاده می کنیم. تمام محتوای داخل backtick ها به عنوان یک رشته در نظر گرفته می شود، حتی علامت apostrophe در رشته.
در ادامه، فایل not-found.component.html را اصلاح میکنیم:
|
1 2 3 |
<p> {{notFoundText}} </p> |
همچنین، باید فایل not-found.component.css را اصلاح کنیم:
|
1 2 3 4 5 6 |
p { font-weight: bold; font-size: 50px; text-align: center; color: #f10b0b; } |
در نهایت، ما قصد داریم محتوای داخل آرایه routes را تغییر دهیم:
|
1 2 3 4 5 6 |
const routes: Routes = [ { path: 'home', component: HomeComponent }, { path: '404', component: NotFoundComponent }, { path: '', redirectTo: '/home', pathMatch: 'full' }, { path: '**', redirectTo: '/404', pathMatch: 'full' } ]; |
در اینجا دو تغییر وجود دارد. با اولین تغییر، مسیر 404 را تعریف کرده ایم و NotFoundComponentcomponent را به آن مسیر اختصاص داده ایم. اکنون component ما در localhost:4200/404 قابل مشاهده است. تغییر دوم به این معنی است که هرگاه مسیری را وارد کنیم که با هیچ یک از مسیرهای تعریف شده ما مطابقت نداشته باشد، برنامه ما را به صفحه 404 هدایت می کند.
به فرض، تایپ کردن localhost:4200/whatever باید صفحه not found را برگرداند. همچنین، ممکن است سعی کنیم به localhost:4200/404 برویم که برنامه ما را دومرتبه به همان صفحه هدایت میکند.
نتیجه گیری
همانطور که متوجه شده اید، ایجاد منو و استفاده از routing در پروژه angular بسیار ساده است. اگرچه اینجا ما پروژه بزرگی ایجاد نکرده ایم، اما به اندازه ای بزرگ است که استفاده، پیکربندی و مسیریابی به تمام صفحاتی که در حال حاضر داریم را نشان دهد. البته ما قصد داریم برای تمام صفحات جدیدی که به پروژه خود معرفی می کنیم مسیرهای بعدی را نیز ایجاد کنیم.
در قسمت بعدی این آموزش گام به گام، ما به شما نشان می دهیم که چگونه داده ها را fetch کنید و API را با HTTP و Observables مورد استفاده قرار دهید.
