Υποενότητα 13.1: Δρομολόγηση - Πρακτική
Site: | ΕΛ/ΛΑΚ Moodle |
Course: | WEB II - Προηγμένος σχεδιασμός |
Book: | Υποενότητα 13.1: Δρομολόγηση - Πρακτική |
Printed by: | Guest user |
Date: | Friday, 13 December 2024, 7:58 AM |
Εισαγωγή
Σε αυτήν την υποενότητα, καλύπτουμε τα βασικά στοιχεία της δρομολόγησης - Angular routing. Eξετάζουμε πώς ο δρομολογητής - router module στο Angular επιτρέπει την πλοήγηση μεταξύ των προβολών διαφόρων components που αποτελούν μέρος μιας εφαρμογής Angular. Θα:
- Υλοποιήσετε στην εφαρμογή σας με πολλαπλές components των οποίων οι προβολές μπορούν να εμφανίζονται μία κάθε φορά και περιηγηθείτε μεταξύ τους
- Υλοποιήσετε έναν βασικό δρομολογητή - router χρησιμοποιώντας το Angular routing module για να ενεργοποιήσετε την πλοήγηση ανάμεσα στις προβολές.
Προσθήκη Footer
Ανοίξτε το τερματικό σας και μεταβείτε στον φάκελο angularChocoYourname
Για να προσθέσετε μια νέα συνιστώσα, το υποσέλιδο - footer, χρησιμοποιώντας το Angular CLI, πληκτρολογήστε τα ακόλουθα στη γραμμή εντολών
ng generate component footer
Ανοίξτε τον φάκελο angularChocoYourname
στο Visual Editor code και ελέγξτε τη δημιουργία:
Ενημερώστε την template, footer.component.html
, και το styles.css
as follows:
Λάβετε υπόψη ότι το Angular έχει αυτόματα ενημερώσει το app.module.ts
Ενημερώστε το αρχείοι app.component.html
να συμπεριλάβει το υποσέλιδο ως εξής:
<app-footer></app-footer>
Με τον προηγούμενο κώδικα ολοκληρωμένο, ανοίξτε το τερματικό σας και μεταβείτε στον υποφακέλο angularChocoYourname
και τρέξτε ng serve
για να εκτελέσετε την εφαρμογή σας. Στο πρόγραμμα περιήγησης περιηγηθείτε στο URL localhost:4200
Αυτός ο κώδικας θα δημιουργήσει μια σελίδα που εμφανίζεται ως εξής:
Κάντε μια Git commit με το μήνυμα "Angular Footer".
Προσθήκη Συνιστωσών
Προσθέστε δυο νέες συνιστώσες - components στην εφαρμογή σας:
ng generate component about
ng generate component home
Θα χρησιμοποιήσουμε αυτά τα στοιχεία στην υλοποίηση του δρομολογητή - router, που θα μας δώσει τη δυνατότητα να πλοηγηθούμε μέσα από αυτές.
Προσθήκη ενός Router Module
Προσθέστε ένα νέο module με το όνομα app-routing
.
ng generate module app-routing
Αυτό θα δημιουργήσει ένα νέο αρχείο με το όνομαapp-routing.module.ts
στον φάκελο app-routing .
Αυτό το module θα παρέχει λειτουργίες δρομολόγησης για την εφαρμογή μας. Αμέσως μετά θα το εφαρμόσουμε στο app module για να ενεργοποιήσουμε τη δρομολόγηση.
Ενημέρωση του app.module.ts
Ενημερώστε το app.module.ts file to για να χρησιμοποιήσετε το Routing Module:
. . .
import { AppRoutingModule } from './app-routing/app-routing.module';
@NgModule({
. . .
imports: [
BrowserModule,
AppRoutingModule
],
. . .
})
. . .
Παρατηρήστε
- την εισαγωγή
{ AppRoutingModule } from './app-routing/app-routing.module';
. - την εισαγωγή αυτού του
AppRoutingModule
στηνimports
array του decorator@NgModule
.
Προσθήκη διαδρομών
Στη συνέχεια, δημιουργήστε ένα νέο αρχείο με όνομα routes.ts
στον φάκελο app-routing
και ενημερώστε το ως εξής:
import { Routes } from '@angular/router';
import { MenuComponent } from '../menu/menu.component';
import { DishdetailComponent } from '../dishdetail/dishdetail.component';
import { HomeComponent } from '../home/home.component';
import { AboutComponent } from '../about/about.component';
export const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'menu', component: MenuComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' }
];
Παρατηρήστε
- την εισαγωγή των
{ Routes } from '@angular/router';
. Ο τύπος Routes είναι προαιρετικός και επιτρέπει σε ένα IDE wμε υποστήριξη TypeScript ή τον μεταγλωττιστή TypeScript να επικυρώνει εύκολα τη διαμόρφωση της διαδρομής σας κατά τη διάρκεια της ανάπτυξης. - την εισαγωγή των components
- τον ορισμό της σταθεράς -
constant routes, of type Routes
. Η διαμόρφωση του δρομολογητή αντιπροσωπεύει όλες τις πιθανές καταστάσεις που θα χρειαστεί να εφαρμοστεί.
Ενημέρωση του Router
Το υπάρχον αρχείο app-routing.module.ts
περιλαμβάνει
Ενημερώστε το αρχείο app-routing.module.ts
για να χρησιμοποιήσετε τις διαδρομές που ορίσαμε ήδη ως εξής:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { routes } from './routes';
@NgModule({
imports: [
CommonModule,
RouterModule.forRoot(routes)
],
exports: [ RouterModule ],
declarations: []
})
export class AppRoutingModule { }
Παρατηρήστε
- την εισαγωγή του
{ RouterModule, Routes } from '@angular/router'
. - την εισαγωγή των
{ routes } from './routes';
- Η δημιουργία του Router Module AppRoutingModule στην imports array στον decorator @NgModule:
RouterModule.forRoot(routes)
.
Με αυτόν τον τρόπο δημιουργείται μια ενότητα δρομολόγησης που περιλαμβάνει τις οδηγίες του δρομολογητή, τη διαμόρφωση του δρομολογητή και την παράσταση της υπηρεσίας router. - Επιπλέον, καθορίζουμε επίσης το RouterModule στην ιδιότητα exports::
exports: [RouterModule]
.
Ενημέρωση του app.component.html
Ενημερώστε το αρχείοapp.component.html :
<router-outlet></router-outlet>
<app-footer></app-footer>
Εδώ δεν χρειαζόμαστε πλέον τον "σύνδεσμο" στο app-menu αφού η "σύνδεση" θα γίνει με τη χρήση του δρομολογητή.
Παρόλο που η εφαρμογή μας έχει τώρα διαμόρφωση δρομολόγησης, πρέπει ακόμα να πούμε στον Angular Router πού μπορεί να τοποθετήσει τα συστατικά στοιχεία στο DOM.
Όταν η εφαρμογή μας ξεκινά, το Angular εμφανίζει το AppComponent επειδή το AppComponent περιλαμβάνεται στην ιδιότητα bootstrap του AppModule.
Για να δηλώσετε στον δρομολογητή πού μπορεί να τοποθετήσει components, πρέπει να προσθέσετε το στοιχείο <router-outlet> </ router-outlet> στο HTML του AppComponent.
Ενημέρωση του footer.component.html
Τέλος, ενημερώστε τους συνδέσμους στο αρχείο footer.component.html
:
<ul class="list-unstyled">
<li><a routerLink="/home" >Home</a></li>
<li><a routerLink="/menu" >Menu</a></li>
</ul>
To Angular χρησιμοποείτ το tag routerLink
για τη σύνδεση αντί για την href attribute
The Results
Με τον προηγούμενο κώδικα ολοκληρωμένο, ανοίξτε το τερματικό σας και μεταβείτε στον υποφακέλο angularChocoYourname
και τρέξτε ng serve
για να εκτελέσετε την εφαρμογή σας. Στο πρόγραμμα περιήγησης περιηγηθείτε στο URL localhost:4200
Κάντε μια Git commit με το μήνυμα "Angular Routing".
- See more about Angular Routing