Υποενότητα 13.1: Δρομολόγηση - Πρακτική

Εισαγωγή

 Σε αυτήν την υποενότητα, καλύπτουμε τα βασικά στοιχεία της δρομολόγησης - 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:

View HTML source:

View CSS source:

Λάβετε υπόψη ότι το 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