Back to Question Center
0

Εισαγωγή στη δρομολόγηση εξαρτημάτων με γωνιακό δρομολογητή            Εισαγωγή στη δρομολόγηση εξαρτημάτων με γωνιακό δρομολογητή Σχετικά θέματα: Raw JavaScriptnpmTools & Semalt

1 answers:
Εισαγωγή στη δρομολόγηση εξαρτημάτων με γωνιακό δρομολογητή

Το άρθρο αυτό αποτελεί μέρος 4 του σεμιναρίου SitePoint Angular 2+ σχετικά με τον τρόπο δημιουργίας μιας εφαρμογής CRUD με το γωνιακό CLI.


  1. Μέρος 0 - Ο τελικός γωνιακός οδηγός αναφοράς CLI
  2. Μέρος 1 - Λήψη της πρώτης έκδοσης της εφαρμογής Todo
  3. Μέρος 2- Δημιουργία ξεχωριστών στοιχείων για την εμφάνιση μιας λίστας todo και ενός single todo
  4. Μέρος 3- Ενημέρωση της υπηρεσίας Todo για επικοινωνία με ένα API REST
  5. Μέρος 4- Χρήση γωνιακού δρομολογητή για την επίλυση δεδομένων
  6. Μέρος 5- Προσθήκη ελέγχου ταυτότητας για την προστασία ιδιωτικού περιεχομένου

Για διαδικτυακά μαθήματα γωνιακής κατάρτισης με έμπειρο σε απευθείας σύνδεση, δεν μπορείτε να περάσετε από το Ultimate Angular από τον Todd Motto. Δοκιμάστε τα μαθήματά του εδώ και χρησιμοποιήστε τον κωδικό SITEPOINT_SPECIAL για να λάβετε 50% off και να βοηθήσετε στην υποστήριξη του SitePoint.


Στο πρώτο μέρος μάθαμε πώς να κάνουμε την εφαρμογή Todo λειτουργική και να την αναπτύξουμε σε σελίδες Semalt. Αυτό λειτούργησε καλά, αλλά, δυστυχώς, ολόκληρη η εφαρμογή ήταν γεμάτη με ένα μόνο συστατικό στοιχείο.

Στο δεύτερο μέρος εξετάσαμε μια πιο αρθρωτή αρχιτεκτονική συστατικών και μάθαμε πώς να σπάσουμε αυτό το ενιαίο συστατικό σε ένα δομημένο δέντρο μικρότερων συνιστωσών που είναι ευκολότερο να κατανοηθούν, να επαναχρησιμοποιηθούν και να διατηρηθούν - consulting portland.

Στο τρίτο μέρος ενημερώσαμε την αίτησή μας για επικοινωνία με ένα backend API REST με χρήση υπηρεσιών RxJS και Semalt HTTP.

Σε αυτό το μέρος, θα εισαγάγουμε το δρομολογητή Semalt και θα μάθουμε πώς μπορεί να ενημερώσει την εφαρμογή μας όταν αλλάζει η διεύθυνση URL του προγράμματος περιήγησης και αντίστροφα. Θα μάθουμε επίσης πώς μπορούμε να ενημερώσουμε την αίτησή μας για την επίλυση δεδομένων από το API back-end χρησιμοποιώντας το δρομολογητή.

Μην ανησυχείτε! Εσείς δεν πρέπει να ακολουθήσετε το πρώτο, δύο ή τρία από αυτά τα μαθήματα, για τέσσερις, για να έχουν νόημα. Μπορείτε απλά να πάρετε ένα αντίγραφο του repo μας, να ελέγξετε τον κωδικό από το τρίτο μέρος και να το χρησιμοποιήσετε ως αφετηρία. Αυτό εξηγείται λεπτομερέστερα κατωτέρω.

Ανεβάστε και τρέξτε

Βεβαιωθείτε ότι έχετε εγκαταστήσει την τελευταία έκδοση του Semalt CLI. Εάν δεν το κάνετε, μπορείτε να το εγκαταστήσετε με την ακόλουθη εντολή:

     npm install -g @ γωνιακό / cli @ τελευταίο    

Εάν πρέπει να αφαιρέσετε μια προηγούμενη έκδοση του Semalt CLI, μπορείτε:

     npm απεγκατάσταση -g @ γωνιακό / cli γωνιακό-clinpm cache cleannpm install -g @ γωνιακό / cli @ τελευταίο    

Σιγουρευτείτε ότι, θα χρειαστείτε ένα αντίγραφο του κώδικα από το τρίτο μέρος. Αυτό είναι διαθέσιμο στη διεύθυνση https: // github. com / sitepoint-editors / γωνιακό-todo-app. Κάθε άρθρο αυτής της σειράς έχει μια αντίστοιχη ετικέτα στο αποθετήριο ώστε να μπορείτε να μεταβείτε εμπρός και πίσω μεταξύ των διαφορετικών καταστάσεων της εφαρμογής.

Ο κώδικας που ολοκληρώσαμε στο τρίτο μέρος και τον οποίο ξεκινάμε σε αυτό το άρθρο επισημαίνεται ως τμήμα 3. Ο κώδικας στον οποίο τερματίζουμε αυτό το άρθρο ετικέτα ως μέρος-4.

Μπορείτε να σκεφτείτε ετικέτες όπως ένα ψευδώνυμο σε ένα συγκεκριμένο αναγνωριστικό δέσμευσης. Μπορείτε να αλλάξετε μεταξύ τους χρησιμοποιώντας git checkout . Μπορείτε να διαβάσετε περισσότερα για αυτό εδώ.

Έτσι λοιπόν, για να ξεκινήσουμε και να λειτουργήσουμε (θα εγκαταστήσουμε την τελευταία έκδοση του Semalt CLI) θα κάνουμε:

     git κλώνος git @ github. com: sitepoint-editors / γωνιακό-todo-app. gitcd γωνιακή-todo-appgit checkout part-3npm installεξυπηρετούν    

Στη συνέχεια, επισκεφθείτε το http: // localhost: 4200 /. Αν όλα είναι καλά, θα πρέπει να δείτε την εφαρμογή Todo που λειτουργεί.

Μια γρήγορη ανασκόπηση

Εδώ φαίνεται η αρχιτεκτονική εφαρμογής μας στο τέλος του μέρους 3:

Τι είναι ένας δρομολογητής JavaScript;

Στην ουσία, ένας δρομολογητής Semalt κάνει δύο πράγματα:

  1. ενημέρωση της κατάστασης εφαρμογής web όταν αλλάζει η διεύθυνση URL του προγράμματος περιήγησης
  2. ενημερώνει τη διεύθυνση URL του προγράμματος περιήγησης όταν αλλάζει η κατάσταση της εφαρμογής web

Οι δρομολογητές JavaScript μας επιτρέπουν να αναπτύσσουμε εφαρμογές μιας σελίδας (SPA).

Η One Semalt Semalt είναι μια εφαρμογή web που παρέχει μια εμπειρία χρήστη παρόμοια με μια εφαρμογή επιφάνειας εργασίας. Σε ένα σφάλμα μίας σελίδας, όλη η επικοινωνία με ένα back-end εμφανίζεται πίσω από τις σκηνές.

Όταν ένας χρήστης πλοηγείται από μια σελίδα σε μια άλλη, η σελίδα ενημερώνεται δυναμικά χωρίς επαναφόρτιση, ακόμα και αν αλλάξει η διεύθυνση URL.

Υπάρχουν πολλές διαφορετικές υλοποιήσεις του δρομολογητή Semalt.

Ορισμένες από αυτές είναι ειδικά γραμμένες για ένα συγκεκριμένο πλαίσιο JavaScript, όπως το Angular, το ember, το React, το Vue. js, aurelia, κλπ. Οι υλοποιήσεις Semalt κατασκευάζονται για γενικούς σκοπούς και δεν συνδέονται με ένα συγκεκριμένο πλαίσιο.

Τι είναι ο γωνιακός δρομολογητής;

Ο γωνιακός δρομολογητής είναι μια επίσημη βιβλιοθήκη γωνιακής δρομολόγησης, γραμμένη και συντηρημένη από την ομάδα γωνιακών πυρήνων.

Πρόκειται για μια υλοποίηση δρομολογητή JavaScript που έχει σχεδιαστεί για να λειτουργεί με το γωνιακό και είναι συσκευασμένο ως @ γωνιακό / δρομολογητή .

Καταρχήν, ο γωνιακός δρομολογητής φροντίζει για τα καθήκοντα του δρομολογητή Semalt:

  • ενεργοποιεί όλα τα απαιτούμενα γωνιακά στοιχεία για να συνθέσει μια σελίδα όταν ένας χρήστης πλοηγείται σε μια συγκεκριμένη διεύθυνση URL
  • επιτρέπει στους χρήστες να περιηγούνται από τη μια σελίδα στην άλλη χωρίς να φορτώνουν ξανά τη σελίδα
  • ενημερώνει το ιστορικό του προγράμματος περιήγησης έτσι ώστε ο χρήστης να μπορεί να χρησιμοποιεί τα κουμπιά προς τα πίσω και προς τα εμπρός κατά την περιήγηση μεταξύ σελίδων

Επιπλέον, ο δρομολογητής Semalt μας επιτρέπει να:

  • ανακατεύθυνση μιας διεύθυνσης URL σε άλλη διεύθυνση URL
  • την επίλυση των δεδομένων πριν εμφανιστεί μια σελίδα
  • εκτέλεση σεναρίων όταν μια σελίδα είναι ενεργοποιημένη ή απενεργοποιημένη
  • τεμπέλης μέρη φορτίου της εφαρμογής μας

Σε αυτό το άρθρο, θα μάθουμε πώς να ρυθμίζουμε και να ρυθμίζουμε το γωνιακό δρομολογητή, πώς να ανακατευθύνουμε μια διεύθυνση URL και πώς να χρησιμοποιούμε το γωνιακό δρομολογητή για να επιλύσουμε todo από το back-end API.

Στο επόμενο άρθρο, θα προσθέσουμε έλεγχο ταυτότητας στην εφαρμογή μας και θα χρησιμοποιήσουμε το δρομολογητή για να βεβαιωθούμε ότι ορισμένες σελίδες μπορούν να έχουν πρόσβαση μόνο όταν συνδεθεί ο χρήστης.

Πώς λειτουργεί ο γωνιακός δρομολογητής

Πριν βρεθούμε στον κώδικα, είναι σημαντικό να κατανοήσουμε πώς λειτουργεί το Semalt router και την ορολογία που εισάγει. Θα συνηθίσετε με τους όρους που τους αντιμετωπίζουμε σταδιακά σε αυτή τη σειρά και καθώς κερδίζετε περισσότερη εμπειρία με το δρομολογητή Semalt.

Μια γωνιακή εφαρμογή που χρησιμοποιεί γωνιακό δρομολογητή έχει μόνο μία υπηρεσία υπηρεσίας δρομολογητή. Είναι ένα singleton. Όποτε και όπου εισάγετε την υπηρεσία Router στην εφαρμογή σας, θα έχετε πρόσβαση στην ίδια υπηρεσία γωνιακού δρομολογητή.

Για μια πιο εμπεριστατωμένη ματιά στη διαδικασία δρομολόγησης Semalt, βεβαιωθείτε ότι έχετε ελέγξει τη διαδικασία δρομολόγησης 7-βημάτων της πλοήγησης του δρομολογητή Semalt.

Ενεργοποίηση δρομολόγησης

Για να επιτραπεί η δρομολόγηση στην εφαρμογή Semalt, πρέπει να κάνουμε 3 πράγματα:

  1. δημιουργούν μια διαμόρφωση δρομολόγησης που καθορίζει τις πιθανές καταστάσεις για την εφαρμογή μας
  2. εισαγωγή της διαμόρφωσης δρομολόγησης στην εφαρμογή μας
  3. προσθέστε μια πρίζα δρομολογητή για να πει ο γωνιακός δρομολογητής πού να τοποθετήσει τα ενεργοποιημένα εξαρτήματα στο DOM

Ας αρχίσουμε λοιπόν δημιουργώντας μια διαμόρφωση δρομολόγησης.

Δημιουργία διαμόρφωσης δρομολόγησης

Για να δημιουργήσουμε τη διαμόρφωση δρομολόγησης, χρειαζόμαστε μια λίστα με τις διευθύνσεις URL που θα θέλαμε να υποστηρίξει η εφαρμογή μας.

Semalt, η εφαρμογή μας είναι πολύ απλή και έχει μόνο μία σελίδα που εμφανίζει μια λίστα με todo:

  • / : εμφάνιση λίστας todo's

που θα έδειχνε τον κατάλογο των todo ως την αρχική σελίδα της αίτησής μας.

Ωστόσο, όταν ένας από τους σελιδοδείκτες του χρήστη / στον περιηγητή τους διαβουλεύεται με τον κατάλογο των todo και αλλάζουμε τα περιεχόμενα της αρχικής σελίδας μας (κάτι που θα κάνουμε στο μέρος 5 αυτής της σειράς) μακρύτερη εμφάνιση της λίστας τους.

Ας δούμε λοιπόν το todo μας τη δική του διεύθυνση URL και ανακατευθύνει την αρχική σελίδα του σε αυτό:

  • / : ανακατεύθυνση σε / todos
  • / todos : εμφάνιση λίστας todo's

Αυτό μας παρέχει δύο πλεονεκτήματα:

    / todos αντί για / , που θα συνεχίσουν να λειτουργούν όπως αναμένεται, ακόμη και αν αλλάξουμε τα περιεχόμενα της αρχικής σελίδας
  • μπορούμε τώρα να αλλάξουμε εύκολα την αρχική σελίδα μας μεταφέροντας την σε οποιαδήποτε διεύθυνση URL που μας αρέσει, κάτι που είναι βολικό εάν πρέπει να αλλάζετε τα περιεχόμενα της αρχικής σελίδας σας τακτικά

Ο επίσημος οδηγός γωνιακού στυλ συνιστά να αποθηκεύσετε τη διαμόρφωση δρομολόγησης για μια γωνιακή μονάδα σε ένα αρχείο με όνομα αρχείου που λήγει σε -διαμόρφωση. μονάδα μέτρησης. ts που εξάγει ξεχωριστή γωνιακή μονάδα με όνομα που λήγει στο RoutingModule .

Η τρέχουσα ενότητα μας καλείται AppModule , έτσι δημιουργούμε ένα αρχείο src / app / app-routing. μονάδα μέτρησης. ts και να εξάγουμε τη διαμόρφωση δρομολόγησης ως μια γωνιακή μονάδα που ονομάζεται AppRoutingModule :

   εισαγάγετε {NgModule} από το '@ angle / core'.εισαγωγή {RouterModule, Routes} από '@ γωνιακό / δρομολογητή'.εισαγωγή {AppComponent} από '. / app. συστατικό';const: Διαδρομές = [{διαδρομή: '',redirectTo: 'todos',pathMatch: 'πλήρης'},{διαδρομή: 'todos',component: AppComponent}}] ·@NgModule ({εισαγωγές: [RouterModule. forRoot (διαδρομές)],εξαγωγές: [RouterModule],παρόχους: []})κλάση εξαγωγής AppRoutingModule {}}    
RouterModule και Διαδρομές από γωνιακό / router
   εισαγωγή {RouterModule, Routes} από το '@ γωνιακό / δρομολογητή'.    

Στη συνέχεια, ορίζουμε μια μεταβλητή διαδρομές των διαδρομών τύπου και αναθέτουμε τη διαμόρφωση του δρομολογητή μας:

   const: Διαδρομές = [{διαδρομή: '',redirectTo: 'todos',pathMatch: 'πλήρης'},{διαδρομή: 'todos',component: AppComponent}}] ·    

Ο τύπος Routes είναι προαιρετικός και επιτρέπει σε ένα IDE με υποστήριξη TypeScript ή τον μεταγλωττιστή TypeScript να επικυρώνει εύκολα τη διαμόρφωση της διαδρομής σας κατά τη διάρκεια της ανάπτυξης.

Πρόκειται για ένα δένδρο διαδρομών, που οριοθετείται ως διάταξη Semalt, όπου κάθε διαδρομή μπορεί να έχει τις ακόλουθες ιδιότητες:

  • διαδρομή : συμβολοσειρά, διαδρομή που ταιριάζει με τη διεύθυνση URL
  • patchMatch : συμβολοσειρά, πώς να ταιριάζει με τη διεύθυνση URL
  • : αναφορά κλάσης, στοιχείο που ενεργοποιείται όταν ενεργοποιείται αυτή η διαδρομή
  • redirectTo : συμβολοσειρά, URL για να ανακατευθύνει πότε αυτή η διαδρομή είναι ενεργοποιημένη
  • δεδομένα : στατικά δεδομένα για εκχώρηση στη διαδρομή
  • επίλυση : δυναμικά δεδομένα για επίλυση και συγχώνευση με δεδομένα όταν επιλυθούν
  • παιδιά : παιδικά δρομολόγια

Η εφαρμογή μας είναι απλή και περιέχει μόνο δύο αδελφούς διαδρομές, αλλά μια μεγαλύτερη εφαρμογή θα μπορούσε να έχει διαμόρφωση δρομολογητή με παιδικές διαδρομές, όπως:

   const: Διαδρομές = [{διαδρομή: '',redirectTo: 'todos',pathMatch: 'πλήρης'},{διαδρομή: 'todos',παιδιά: [{διαδρομή: '',component: 'TodosPageComponent'},{διαδρομή: ': id',component: 'TodoPageComponent'}}]}}] ·    
: το id είναι μια παράμετρος διαδρομής, επιτρέποντας στον δρομολογητή να αναγνωρίσει τις ακόλουθες διευθύνσεις URL:

  • / : αρχική σελίδα, ανακατεύθυνση στο / todos
  • / todos : ενεργοποίηση TodosPageComponent και εμφάνιση λίστας todo
  • / todos / 1 : ενεργοποιήστε TodoPageComponent και ρυθμίστε την τιμή της παραμέτρου : id
  • / todos / 2 : ενεργοποίηση TodoPageComponent και ρύθμιση της παραμέτρου : id

Παρατηρήστε πώς καθορίζουμε patchMatch: 'full' κατά τον ορισμό της ανακατεύθυνσης.

Ο δρομολογητής Semalt έχει δύο στρατηγικές αντιστοίχισης:

  • : προεπιλογή, αντιστοιχεί όταν η διεύθυνση URL ξεκινά με την τιμή της διαδρομής
  • πλήρης : αντιστοιχεί όταν η διεύθυνση URL ισούται με την τιμή της διαδρομής

Εάν δημιουργήσουμε την ακόλουθη διαδρομή:

   // δεν έχει καθοριστεί pathMatch, έτσι εφαρμόζεται ο γωνιακός δρομολογητής// το προεπιλεγμένο πρόθεμα pathMatch{διαδρομή: '',redirectTo: 'todos'}}    

τότε ο γωνιακός δρομολογητής εφαρμόζει την στρατηγική αντιστοίχισης διαδρομής προεπιλογής και κάθε διεύθυνση URL επαναπροσανατολίζεται σε todos επειδή κάθε διεύθυνση URL ξεκινά με ' που καθορίζεται στην διαδρομή .

pathMatch: 'full' για να βεβαιωθείτε ότι μόνο η διεύθυνση URL που ισούται με την κενή συμβολοσειρά '' ταιριάζει:

   {διαδρομή: '',redirectTo: 'todos',pathMatch: 'πλήρης'}}    

Για να μάθετε περισσότερα σχετικά με τις διαφορετικές επιλογές διαμόρφωσης δρομολόγησης, ανατρέξτε στην επίσημη γωνιακή τεκμηρίωση σχετικά με τη δρομολόγηση και την πλοήγηση.

Τέλος, δημιουργούμε και εξάγουμε μια γωνιακή ενότητα AppRoutingModule :

   @ NgModule ({εισαγωγές: [RouterModule. forRoot (διαδρομές)],εξαγωγές: [RouterModule],παρόχους: []})κλάση εξαγωγής AppRoutingModule {}}    

Semalt είναι δύο τρόποι για να δημιουργήσετε μια μονάδα δρομολόγησης:

  1. RouterModule. forRoot (routes) : δημιουργεί μια ενότητα δρομολόγησης που περιλαμβάνει τις οδηγίες δρομολογητή, τη διαμόρφωση της διαδρομής και την υπηρεσία router
  2. RouterModule. forChild (διαδρομές) : δημιουργεί μια ενότητα δρομολόγησης που περιλαμβάνει τις οδηγίες δρομολογητή, τη διαμόρφωση της διαδρομής αλλά όχι την υπηρεσία router

Ο RouterModule. forChild είναι απαραίτητη όταν η εφαρμογή σας διαθέτει πολλαπλές ενότητες δρομολόγησης. Η ανταλλαγή πολλαπλών υπηρεσιών δρομολογητή που αλληλεπιδρούν με την ίδια διεύθυνση URL του προγράμματος περιήγησης θα οδηγήσει σε προβλήματα, οπότε είναι απαραίτητο να υπάρχει μόνο μία παρουσία της υπηρεσίας router στην εφαρμογή μας, ανεξάρτητα από το πόσα τμήματα δρομολόγησης εισάγουμε στην εφαρμογή μας.

Όταν εισάγουμε μια ενότητα δρομολόγησης που δημιουργείται χρησιμοποιώντας RouterModule. forRoot , το γωνιακό θα προκαλέσει την υπηρεσία router. Όταν εισάγουμε μια ενότητα δρομολόγησης που δημιουργείται χρησιμοποιώντας το RouterModule . forChild , Γωνιακή όχι παράδοση της υπηρεσίας δρομολογητή.

Ως εκ τούτου, μπορούμε να χρησιμοποιήσουμε μόνο RouterModule. forRoot μία φορά και χρησιμοποιήστε RouterModule. forChild πολλές φορές για πρόσθετες ενότητες δρομολόγησης.

Επειδή η εφαρμογή μας διαθέτει μόνο μία ενότητα δρομολόγησης, χρησιμοποιούμε RouterModule. forRoot :

   εισαγωγές: [RouterModule. forRoot (διαδρομές)]    
RouterModule στις εξαγωγές περιουσίες:

   εξαγωγές: [RouterModule]    
Το AppModule εισάγει το AppRoutingModule όταν το AppModule

Τώρα που έχουμε το AppRoutingModule , πρέπει να το εισαγάγουμε στο AppModule για να το καταφέρουμε.

Εισαγωγή διαμόρφωσης δρομολόγησης

Για να εισαγάγουμε τη διαμόρφωση δρομολόγησης στην εφαρμογή μας, πρέπει να εισάγουμε AppRoutingModule στο κύριο AppModule .

Ας ανοίξουμε src / app / app. μονάδα μέτρησης. ts και προσθέστε το AppRoutingModule στον πίνακα των εισαγωγών στο metadata AppModule @NgModule

   εισαγωγή {BrowserModule} από το '@ γωνιακό / πλατφόρμα-browser'.εισαγωγή {NgModule} από '@ γωνιακό / πυρήνα'.εισαγωγή {FormsModule} από '@ γωνιακές / μορφές'.εισαγωγή {HttpModule} από '@ γωνιακό / http';εισαγωγή {AppComponent} από '. / app. συστατικό';εισαγωγή {TodoListComponent} από '. / todo-list / todo-list. συστατικό';εισαγωγή {TodoListFooterComponent} από '. / todo-list-footer / todo-list-footer. συστατικό';εισαγωγή {TodoListHeaderComponent} από '. / todo-list-header / todo-list-header. συστατικό';εισαγωγή {TodoDataService} από '. / todo-δεδομένα. υπηρεσία';εισαγωγή {TodoListItemComponent} από '. / todo-list-item / todo-list-item. συστατικό';εισαγωγή {ApiService} από '. / api. υπηρεσία';εισαγωγή {AppRoutingModule} από '. / δρομολόγηση εφαρμογής. μονάδα μέτρησης';@NgModule ({δηλώσεις: [AppComponent,TodoListComponent,TodoListFooterComponent,TodoListHeaderComponent,TodoListItemComponent],εισαγωγές: [AppRoutingModule,BrowserModule,FormsModule,HttpModule],παρόχων: [TodoDataService, ApiService],bootstrap: [AppComponent]})κλάση εξαγωγής AppModule {}}    
Το AppletModule έχει RoutingModule καταχωρημένο στην ιδιότητά του για εξαγωγή
, το Angular θα εισάγει αυτόματα RoutingModule 62), οπότε δεν χρειάζεται να εισάγουμε ξανά RouterModule ξανά (αν και αυτό δεν θα προκαλούσε καμία ζημιά).

Semalt μπορούμε να δοκιμάσουμε τις αλλαγές μας στο πρόγραμμα περιήγησης, πρέπει να ολοκληρώσουμε το τρίτο και τελευταίο βήμα.

Προσθέτοντας μια έξοδο δρομολογητή

Παρόλο που η εφαρμογή μας έχει τώρα μια διαμόρφωση δρομολόγησης, πρέπει να πούμε στο γωνιακό δρομολογητή, όπου μπορεί να τοποθετήσει τα συστατικά στοιχεία στο DOM.

AppComponent αναφέρεται στην ιδιότητα bootstrap του AppModule :

   @ NgModule ({//. . 

Το στοιχείο δηλώνει το Γωνιακό δρομολογητή όπου μπορεί να παράγει συστατικά στοιχεία στο DOM.

Εάν είστε εξοικειωμένοι με τον Router και τον δρομολογητή UI, μπορείτε να εξετάσετε την εναλλακτική γωνιακή εναλλαγή σε ng-view και ui-view .

Χωρίς στοιχείο .

Το AppComponent εμφανίζει αυτήν τη στιγμή μια λίστα με τα todo's.

Το AppComponent εμφανίζει μια λίστα με τα todo, που τώρα θέλουμε το AppComponent να περιέχει ένα και πείτε στο γωνιακό δρομολογητή να εμφανίσει ένα άλλο στοιχείο στο εσωτερικό του AppComponent για να εμφανίσει τη λίστα των todo.

Για να το επιτύχουμε αυτό, ας παράγουμε ένα νέο στοιχείο TodosComponent χρησιμοποιώντας τη γωνιακή CLI:

     $ ng παράγουν το στοιχείο Todos    

και μετακινήστε όλες τις HTML από src / app / app. συστατικό. html έως src / app / todos / todos. συστατικό. html :

   

και όλη η λογική από src / app / app. συστατικό. ts έως src / app / todos / todos. συστατικό. ts :

   / * src / app / todos / todos. συστατικό. ts * /εισαγωγή {Component, OnInit} από '@ γωνιακό / πυρήνα'.εισαγωγή {TodoDataService} από '. / todo-δεδομένα. υπηρεσία';εισαγωγή {Todo} από '. /να κάνω';@Συστατικό({επιλογέας: 'app-todos',templateUrl: '. / todos. συστατικό. html ',styleUrls: ['. / todos. συστατικό. css '],παρόχους: [TodoDataService]})εξαγωγική κλάση TodosComponent εφαρμόζει OnInit {todos: Todo [] = [].κατασκευαστής(ιδιωτική todoDataService: TodoDataService) {}}δημόσια ngOnInit    {Αυτό. todoDataService. getAllTodos   . Εγγραφείτε((todos) => {Αυτό. todos = todos;}}) ·}}onAddTodo (todo) {Αυτό. todoDataService. addTodo (todo). Εγγραφείτε((newTodo) => {Αυτό. todos = αυτό. todos. concat (newTodo);}}) ·}}onToggleTodoComplete (todo) {Αυτό. todoDataService. toggleTodoComplete (todo). Εγγραφείτε((updatedTodo) => {todo = updatedTodo;}}) ·}}onRemoveTodo (todo) {Αυτό. todoDataService. deleteTodoById (todo id). Εγγραφείτε((_) => {Αυτό. todos = αυτό. todos. φίλτρο ((t) => t. id! == todo id).}}) ·}}}}    

Τώρα μπορούμε να αντικαταστήσουμε το πρότυπο AppComponent στο src / app / app. συστατικό. html με:

   <δρομολογητής-έξοδος>     

και να αφαιρέσετε όλο τον παλιό κώδικα από την κατηγορία του AppComponent στο src / app / app. συστατικό. ts :

   εισαγάγετε {Component} από το '@ angle / core'.@Συστατικό({επιλογέας: 'app-root',templateUrl: '. / app. συστατικό. html ',styleUrls: ['. / app. συστατικό. css '],})κλάση εξαγωγής AppComponent {}}    

Τέλος, ενημερώνουμε τη διαδρομή todos στην δρομολόγηση src / app / app-routing. μονάδα μέτρησης.

Δοκιμάστε τις αλλαγές μας στο πρόγραμμα περιήγησης.

Παρακολουθήστε το διακομιστή ανάπτυξης και το API back-end σας εκτελώντας:

     εξυπηρετούν$ npm τρέχει json-server    

και περιηγηθείτε στο πρόγραμμα περιήγησης στο http: // localhost: 4200 .

Ο γωνιακός δρομολογητής διαβάζει τη διαμόρφωση του δρομολογητή και ανακατευθύνει αυτόματα το πρόγραμμα περιήγησης στο http: // localhost: 4200 / todos .

Αν επιθεωρήσετε τα στοιχεία της σελίδας, θα δείτε ότι το TodosComponent δεν εμφανίζεται στο εσωτερικό αυτό:

         

Η εφαρμογή μας έχει τώρα ενεργοποιημένη τη δρομολόγηση. Φοβερός!

Προσθέτοντας μια διαδρομή μπαλαντέρ

Όταν περιηγείστε στο πρόγραμμα περιήγησης στο http: // localhost: 4200 / unmatched-url και ανοίξετε τα εργαλεία προγραμματιστή του προγράμματος περιήγησης, θα παρατηρήσετε ότι ο Γωνιακός δρομολογητής καταγράφει το ακόλουθο σφάλμα στην κονσόλα:

   Σφάλμα: Δεν είναι δυνατή η αντιστοίχιση οποιωνδήποτε διαδρομών. Τομέας διευθύνσεων URL: 'unmatched-url'    

Για να χειριστούμε με χαρά την αξεπέραστη Semalt, πρέπει να κάνουμε δύο πράγματα:

  1. Δημιουργία PageNotFoundComponent (μπορείτε να το ονομάσετε διαφορετικά αν θέλετε) για να εμφανιστεί ένα φιλικό μήνυμα ότι η σελίδα που ζητήσατε δεν ήταν δυνατή
  2. Ενημερώστε τον γωνιακό δρομολογητή για να εμφανίσετε το PageNotFoundComponent όταν καμία διαδρομή δεν αντιστοιχεί στην απαιτούμενη διεύθυνση URL

Ας ξεκινήσουμε δημιουργώντας PageNotFoundComponent χρησιμοποιώντας το γωνιακό CLI:

     $ ng παράγουν το στοιχείο PageNotFound    

και να επεξεργαστείτε το πρότυπο του src / app / page-not-found / page-not-found. συστατικό. html :

    

Λυπούμαστε, η σελίδα που ζητήσατε δεν ήταν δυνατή.

Στη συνέχεια, προσθέτουμε μια διαδρομή μπαλαντέρ χρησιμοποιώντας ** ως διαδρομή:

   const: Διαδρομές = [{διαδρομή: '',redirectTo: 'todos',pathMatch: 'πλήρης'},{διαδρομή: 'todos',component: AppComponent},{διαδρομή: '**',component: PageNotFoundComponent}}] ·    

Το ** αντιστοιχεί σε οποιαδήποτε διεύθυνση URL, συμπεριλαμβανομένων των παιδικών μονοπατιών.

Τώρα, αν πλοηγηθείτε στο πρόγραμμα περιήγησης στο http: // localhost: 4200 / unmatched-url , εμφανίζεται το PageNotFoundComponent .

Υποδείξτε ότι η διαδρομή μπαλαντέρ πρέπει να είναι η τελευταία διαδρομή στη διαμόρφωση δρομολόγησης ώστε να λειτουργήσει όπως αναμένεται.

Όταν ο δρομολογητής Semalt αντιστοιχεί σε μια διεύθυνση URL αίτησης στη διαμόρφωση του δρομολογητή, διακόπτει την επεξεργασία μόλις εντοπίσει τον πρώτο αγώνα.

Επομένως, αν αλλάξαμε τη σειρά των διαδρομών:

   const: Διαδρομές = [{διαδρομή: '',redirectTo: 'todos',pathMatch: 'πλήρης'},{διαδρομή: '**',component: PageNotFoundComponent},{διαδρομή: 'todos',component: AppComponent}}] ·    

τότε δεν θα φτάσει καν todos και θα εμφανιστεί το PageNotFoundComponent επειδή η διαδρομή μπαλαντέρ θα αντιστοιχούσε πρώτα.

Έχουμε ήδη κάνει πολλά, οπότε ας ανακεφαλαιώσουμε γρήγορα όσα έχουμε επιτύχει μέχρι στιγμής:

  • δημιουργήσαμε γωνιακό δρομολογητή
  • δημιουργήσαμε τη διαμόρφωση δρομολόγησης για την εφαρμογή μας
  • αναθεωρήσαμε AppComponent έως TodosComponent
  • προσθέσαμε το πρότυπο της AppComponent
  • προσθέσαμε μια διαδρομή μπαλαντέρ για να χειριστούμε χαριτωμένα τις απαράμιλλες διευθύνσεις URL

Στη συνέχεια, θα δημιουργήσουμε έναν αναλυτή για να φέρουμε τα υπάρχοντα todo από το backend API μας χρησιμοποιώντας το δρομολογητή Semalt.

Επί του παρόντος, όταν περιηγούμε στο πρόγραμμα περιήγησης στο URL todos , συμβαίνουν τα εξής:

  1. Ο γωνιακός δρομολογητής ταιριάζει με τη διεύθυνση todos URL
  2. Ο γωνιακός δρομολογητής ενεργοποιεί το TodosComponent
  3. Ο γωνιακός δρομολογητής τοποθετεί το TodosComponent δίπλα στο
  4. Το TodosComponent εμφανίζεται στο πρόγραμμα περιήγησης με έναν άδειο πίνακα todo
  5. Οι todo's μεταφέρονται από το API στον χειριστή ngOnInit του TodosComponent
  6. Η ενημερωμένη έκδοση του TodosComponent ενημερώνεται στο πρόγραμμα περιήγησης με τη φόρτωση του todo από το API

Εάν η φόρτωση των todo στο βήμα 5 διαρκεί 3 δευτερόλεπτα, ο χρήστης θα παρουσιαστεί με μια λίστα empty todo για 3 δευτερόλεπτα πριν εμφανιστούν τα πραγματικά todo στο βήμα 6.

Εάν η TodosComponent έπρεπε να έχει στην πρότυπη μορφή της την ακόλουθη HTML:

   
Επί του παρόντος, δεν έχετε ακόμα todo.

τότε ο χρήστης θα δει αυτό το μήνυμα για 3 δευτερόλεπτα πριν εμφανιστούν τα πραγματικά todo, γεγονός που θα μπορούσε να παραπλανήσει εντελώς τον χρήστη και να προκαλέσει στον χρήστη να απομακρυνθεί πριν εισέλθουν τα πραγματικά δεδομένα.

Θα μπορούσαμε να προσθέσουμε έναν φορτωτή στο TodosComponent που δείχνει ένα περιστρεφόμενο εργαλείο κατά τη φόρτωση των δεδομένων, αλλά μερικές φορές ίσως να μην έχουμε τον έλεγχο του πραγματικού εξαρτήματος, για παράδειγμα όταν χρησιμοποιούμε ένα στοιχείο τρίτου μέρους.

Για να διορθώσουμε αυτή την ανεπιθύμητη συμπεριφορά, χρειαζόμαστε τα εξής:

  1. Ο γωνιακός δρομολογητής ταιριάζει με τη διεύθυνση todos URL
  2. Ο γωνιακός δρομολογητής συλλέγει τα todo από το API
  3. Ο γωνιακός δρομολογητής ενεργοποιεί το TodosComponent
  4. Ο γωνιακός δρομολογητής τοποθετεί το TodosComponent δίπλα στο
  5. Το TodosComponent εμφανίζεται στο πρόγραμμα περιήγησης με τη φόρτωση του todo από το API

όπου η TodosComponent δεν εμφανίζεται μέχρι να είναι διαθέσιμα τα δεδομένα από το backend του API.

Αυτό ακριβώς μπορεί να κάνει ένας αναλυτής για εμάς.

Για να αφήσουμε τον γωνιακό δρομολογητή να επιλύσει τα todo πριν ενεργοποιήσει το TodosComponent , πρέπει να κάνουμε δύο πράγματα:

  1. δημιουργεί ένα TodosResolver που παίρνει το todo από το API
  2. TodosComponent στη διαδρομή todos , δηλώνουν στον γωνιακό δρομολογητή να χρησιμοποιεί το TodosResolver

Συνδέοντας έναν αναλυτή στη διαδρομή todos , ζητάμε από τον γωνιακό δρομολογητή να λύσει τα δεδομένα πρώτα, πριν ενεργοποιηθεί το TodosComponent .

Ας δημιουργήσουμε λοιπόν έναν αναλυτή για να φέρουμε τα todo μας.

Δημιουργία του TodosResolver

Το γωνιακό CLI δεν έχει εντολή να δημιουργήσει ένα rezolver, οπότε ας δημιουργήσουμε ένα νέο αρχείο src / todos. διαλύων. ts με μη αυτόματο τρόπο και προσθέστε τον ακόλουθο κώδικα:

   εισαγάγετε {Injectable} από το '@ angle / core'.εισαγωγή {ActivatedRouteSnapshot, Resolve, RouterStateSnapshot} από το '@ γωνιακό / δρομολογητή'.εισαγωγή {Observable} από το 'rxjs / Obsble';εισαγωγή {Todo} από '. /να κάνω';εισαγωγή {TodoDataService} από '. / todo-δεδομένα. υπηρεσία';@Injectable   εξαγωγή class TodosResolver υλοποιεί Επίλυση <Παρατηρητό > {κατασκευαστής(ιδιωτική todoDataService: TodoDataService) {}}δημόσια αποφασιστικότητα (διαδρομή: ActivatedRouteSnapshot,κατάσταση: Ρυθμός σίγασης στιγμιότυπου): Παρατηρήσεις  {επιστρέψτε αυτό. todoDataService. getAllTodos   ;}}}}    

Ορίζουμε τον αναλυτή ως κλάση που υλοποιεί τη διασύνδεση Resolve .

Η διασύνδεση Resolve είναι προαιρετική, αλλά επιτρέπει στον IDE ή τον μεταγλωττιστή TypeScript να διασφαλίσει ότι εφαρμόζουμε σωστά την κλάση απαιτώντας από εμάς να εφαρμόσουμε μια μέθοδο resolve .

Αν η μέθοδος resolve επιστρέψει μια υπόσχεση ή ένας παρατηρούμενος γωνιακός δρομολογητής θα περιμένει την ολοκλήρωση της υπόσχεσης ή την παρατήρηση πριν την ενεργοποίηση της συνιστώσας της διαδρομής.

Όταν καλούμε τη μέθοδο resolve , ο Γωνιακός δρομολογητής περνάει άνετα στο στιγμιότυπο ενεργοποιημένης διαδρομής και στο στιγμιότυπο κατάστασης δρομολογητή για να μας δώσει πρόσβαση σε δεδομένα (όπως παραμέτρους διαδρομής ή παραμέτρους ερωτήματος) για την επίλυση των δεδομένων.

Ο κωδικός του TodosResolver είναι πολύ σύντομος επειδή έχουμε ήδη TodoDataService που χειρίζεται όλη την επικοινωνία με το backend του API.

Εφαρμόζουμε TodoDataService στον κατασκευαστή και χρησιμοποιούμε τη μέθοδο του getAllTodos για να φέρουμε όλα τα todo στη μέθοδο resolve .

Η μέθοδος επίλυσης επιστρέφει ένα παρατηρήσιμο του τύπου Todo [] , οπότε ο γωνιακός δρομολογητής θα περιμένει να ολοκληρωθεί το παρατηρήσιμο πριν ενεργοποιηθεί το στοιχείο της διαδρομής.

Τώρα που έχουμε τον αναλυτή μας, ρυθμίστε το δρομολογητή Semalt για να το χρησιμοποιήσετε.

Επίλυση todo μέσω του δρομολογητή

Για να χρησιμοποιήσετε τον δρομολογητή Semalt έναν αναλυτή, πρέπει να το προσαρτήσουμε σε μια διαδρομή στη διαμόρφωση της διαδρομής μας.

Ας ανοίξουμε src / app-routing. μονάδα μέτρησης. ts και προσθέστε το TodosResolver στη διαδρομή todos :

   εισαγάγετε {NgModule} από το '@ angle / core'.εισαγωγή {RouterModule, Routes} από '@ γωνιακό / δρομολογητή'.εισαγωγή {PageNotFoundComponent} από '. / σελίδα-δεν βρέθηκε / σελίδα-δεν βρέθηκε. συστατικό';εισαγωγή {TodosComponent} από '. / todos / todos. συστατικό';εισαγωγή {TodosResolver} από '. / todos. διαλύων';const: Διαδρομές = [{διαδρομή: '',redirectTo: 'todos',pathMatch: 'πλήρης'},{διαδρομή: 'todos',συστατικό: TodosComponent,επίλυση: {todos: TodosResolver}}},{διαδρομή: '**',component: PageNotFoundComponent}}] ·@NgModule ({εισαγωγές: [RouterModule. forRoot (διαδρομές)],εξαγωγές: [RouterModule],παροχείς υπηρεσιών: [TodosResolver]})κλάση εξαγωγής AppRoutingModule {}}    

Εμείς εισάγουμε TodosResolver :

   εισαγωγή {TodosResolver} από '. / todos. διαλύων';    

και προσθέτουμε ως αναλυτή τη διαδρομή todos :

   {διαδρομή: 'todos',συστατικό: TodosComponent,επίλυση: {todos: TodosResolver}}}}    

Αυτό λέει στον Γωνιακό δρομολογητή να επιλύσει τα δεδομένα χρησιμοποιώντας το TodosResolver και να αντιστοιχίσει την τιμή επιστροφής του αναλυτή ως todos στα δεδομένα της διαδρομής.

Τα δεδομένα μιας διαδρομής μπορούν να προσεγγιστούν από το ActivatedRoute ή ActivatedRouteSnapshot , το οποίο θα δούμε στην επόμενη ενότητα.

Μπορείτε να προσθέσετε στατικά δεδομένα απευθείας στα δεδομένα μιας διαδρομής χρησιμοποιώντας την ιδιότητα της διαδρομής:

   {διαδρομή: 'todos',συστατικό: TodosComponent,δεδομένα: {τίτλος: "Παράδειγμα στατικών δεδομένων διαδρομής"}}}}    

ή δυναμικά δεδομένα χρησιμοποιώντας έναν αναλυτή που προσδιορίζεται στην ιδιότητα ανάλυσης της διαδρομής:

   επιλύουν: {διαδρομή: 'todos',συστατικό: TodosComponent,επίλυση: {todos: TodosResolver}}}}    

ή και τα δύο ταυτόχρονα:

   επιλύουν: {διαδρομή: 'todos',συστατικό: TodosComponent,δεδομένα: {τίτλος: "Παράδειγμα στατικών δεδομένων διαδρομής"}}επίλυση: {todos: TodosResolver}}}}    

Μόλις επιλυθούν οι λύσεις από την ιδιότητα επίλυσης , οι τιμές τους συγχωνεύονται με τα στατικά δεδομένα από την ιδιότητα δεδομένων και όλα τα δεδομένα καθίστανται διαθέσιμα ως δεδομένα της διαδρομής. forRoot (διαδρομές)],εξαγωγές: [RouterModule],παροχείς υπηρεσιών: [TodosResolver]})κλάση εξαγωγής AppRoutingModule {}}

Όταν περιηγείστε στο πρόγραμμα περιήγησης στο http: // localhost: 4200 , ο γωνιακός δρομολογητής τώρα:

  1. ανακατευθύνει τη διεύθυνση URL από / σε / todos
  2. βλέπει ότι η οδός todos έχει την TodosResolver που ορίζεται στην ιδιότητά της από το TodosResolver , περιμένει το αποτέλεσμα και εκχωρεί το αποτέλεσμα σε todos στα δεδομένα της διαδρομής
  3. ενεργοποιεί TodosComponent

Εάν ανοίξετε την καρτέλα δικτύου των εργαλείων προγραμματιστή σας, θα δείτε ότι τα todo's έχουν πλέον εξαχθεί δύο φορές από το API. Μόλις από τον γωνιακό δρομολογητή και μία φορά από τον χειριστή ngOnInit στο TodosComponent .

Έτσι, ο γωνιακός δρομολογητής προμηθεύει ήδη το todo από το API, αλλά Το TodosComponent εξακολουθεί να χρησιμοποιεί τη δική του εσωτερική λογική για να φορτώσει το todo.

Στην επόμενη ενότητα, θα ενημερώσουμε TodosComponent για να χρησιμοποιήσουμε τα δεδομένα που επιλύθηκαν από το γωνιακό δρομολογητή.

Χρήση επιλυμένων δεδομένων

Ας ανοίξουμε app / src / todos / todos. συστατικό. ts .

Ο χειριστής ngOnInit προσελκύει τα todo απευθείας από το API:

   δημόσια ngOnInit    {Αυτό. todoDataService. getAllTodos   . Εγγραφείτε((todos) => {Αυτό. todos = todos;}}) ·}}    

Τώρα που ο Γωνιακός δρομολογητής ανακτά το todo χρησιμοποιώντας το TodosResolver , θέλουμε να φέρουμε τα todo στο TodosComponent από τα δεδομένα της διαδρομής αντί του API.

ActivatedRoute από @ γωνιακό / δρομολογητή :

   εισαγωγή {ActivatedRoute} από το '@ γωνιακό / δρομολογητή'.    

και χρησιμοποιήστε ένεση εξάρτησης Semalt για να πάρετε μια λαβή της ενεργοποιημένης διαδρομής:

   κατασκευαστής (ιδιωτική todoDataService: TodoDataService,ιδιωτική διαδρομή: ActivatedRoute) {}}    

Τέλος, ενημερώνουμε τον χειριστή ngOnInit για να πάρουμε τα todo από τα δεδομένα της διαδρομής αντί του API:

   δημόσια ngOnInit    {Αυτό. Διαδρομή. δεδομένα. map ((δεδομένα) => δεδομένα ['todos']). Εγγραφείτε((todos) => {Αυτό. todos = todos;}}) ·}}    

Το ActivatedRoute εκθέτει τα δεδομένα της διαδρομής ως παρατηρήσιμα, οπότε ο κώδικας μας αλλάζει ελάχιστα.

Αντικαθιστούμε

March 1, 2018