History API σε Angular

[kordoni]

Γεια σας.

Είμαι καινούριος στην Angular (χρησιμοποιώ angular 6) και θέλω να υλοποιήσω την εξής λειτουργικότητα 

Παω σε μια σελίδα του site, εχει ενα απλό url (site.com/photos). Κλικαρω τοποθεσιες, αλλάζει το url χωρίς να ξαναφορτώσει η σελίδα (site.com/photos/places). Επιλέγω κάτι πιο συγκεκριμένο, αλλάζει πάλι το url χωρίς να ξαναφορτώσει η σελίδα. (site.com/photos/places/sunset-in-a-lake).

Επίσης, αν παω σε μια αδεια address bar και κάνω paste ενα τέτοιο url, να μου βγάλει την αντιστοιχη φώτο. Κάνω paste δηλαδή το site.com/photos/places/sunset-in-a-lake και μου βγαζει αμέσως αυτη τη φωτο. 

Αυτο με vanilla HTML5/javascript νομίζω λέγετε History API αλλά δεν έχω ιδέα πως να ξεκινήσω σε angular και τι ακριβώς να γκουγκλάρω. 

Επίσης δε ξέρω τι γίνετε με τα ονόματα στο url, μιας και εγώ έχω ελληνικά, δηλαδή στη δική μου περίπτωση θα είναι site.com/photos/places/ηλιοβασιλεμα-σε-λιμνη. Πρέπει να αλλάζω απο ελληνικά σε αγγλικά, παίζει κάτι με το encoding στο url? Μπορούμε να υποθέσουμε οτι κάθε όνομα είκόνας είναι μοναδικό. Server έχω node με express.js. Είναι όλα ακόμα τοπικά στο λαπτοπ μου, οπότε μπορώ να παίξω και με front και με back.

 

Παρακαλώ βοηθήστε με τα βασικά, ίσως και κάποια tutorial για να ξεκινήσω σωστά απο κάπου, με μια σειρά.

Σας ευχαριστώ

 

[Predatorkill]

Για να μπορεις να κανεις αυτο που λες με το copy paste για αρχη πρεπει o router σου να χρησιμοποιει HashLocationStrategy. 

Επισης στο index.html να βαλεις αυτο <base href="/">. (Λογικα το εχεις ηδη)

πολυ καλα μαθηματα εχει η Academind https://www.youtube.com/channel/UCSJbGtTlrDami-tDGPUV9-w

Υγ. Το app αν σκοπευεις να το βγαλεις live πρεπει να το κανεις universal αν θες να κανεις SEO.

Επεξ/σία 7 Νοεμβρίου 2018 από Predatorkill

[kordoni]

Σ ευχαριστώ πολύ. Ακόμα δεν έχω καταφέρει να ξεμπλέξω με άλλα θέματα του app για να δω αυτό.

Ναι, υπάρχει ήδη αυτό στο index.

Δε σκέφτηκα να τσεκάρω youtube. Ωραιος ο academind, έχεις κάποιο συγκεκριμένο βιντεο στο μυαλό σου? Traversy media λες να βρω κάτι?

 

Ευχαριστώ

[mixalis8]

Αυτό που λέει ο Predatorkill (Επισης στο index.html να βαλεις αυτο <base href="/" >) είναι για angularjs. Εσύ που χρησιμοποιείς angular6... δεν χρειάζετε να κάνεις κάτι. Είναι όλα απο default ρυθμισμένα. Δεν χρειάζεται να ασχοληθείς εσύ με το history api. 

Επίσης το universal είναι μεγάλος βραχνάς και θέλει επιπλέον coding. Μπορείς να χρησιμοποιήσεις το puppeteer της google και σε συνδιασμό με κάποιες ρυθμίσεις στον nginx, να στέλνεις όλο το traffic από crawlers εκεί. Με το universal θα πρεπει να προσέξεις να μην εκτελεις τα http requests, 2 φορές. Μια φορά στον server και μια στο front. Έχει library που σε βοηθάει να το αποφύγεις, αλλά είναι επιπλέον κώδικας και πολυπλοκότητα. Επισης εννοείτε πως θα φας τα μούτρα σου με το ότι δεν έχει window μεταβλητή στο server side... και θα γράφεις συνέχεια κώδικα για να το αποφεύγεις.

[Predatorkill]

15 ώρες πριν, mixalis8 είπε

Επισης εννοείτε πως θα φας τα μούτρα σου με το ότι δεν έχει window μεταβλητή στο server side...

Καποια στιγμη δεν ειναι ετοιμο το window; Στην React τουλαχιστον μπορεις ευκολα με μια if να δεις αν εχει φορτωσει το window και μετα να φορτωσεις οτι θες. Πολλα modules βεβαια δεν εχουν σχεδιαστει ετσι οποτε μπορει να χρειαζεται fork. Ευτυχως στην react πολλοι module devs το εχουν implemented.

[kordoni]

Από τη δεύτερη παράγραφο του Μιχάλη ("Επίσης το universal"...)και μετά, δεν έχω καταλάβει Χριστό. Αν και μιλάτε για SEO απ ότι κατάλαβα και όχι καθαρά για τη λειτουργηκότητα που θέλω.

Όπως και να έχει, εγώ τώρα επιτέλους ξεκινάω να ψάξω για αυτή την λειτουργικότητα, για να δω τι παίζει. Σχετικά με αυτήν, Μιχάλη, δεν είπα οτι θα ασχοληθώ με το καθαρό history api , αλλά με την υλοποίηση του μέσω angular.

Επίσης, τι ενοείς οτι "Είναι όλα απο default ρυθμισμένα" ? Τι ακριβώς είναι default, για να πατήσω πάνω του και να υλοποιήσω? 

 

Ευχαριστώ