Angular und Node js SPA - Was passiert hinter den Kulissen, wenn ich zwischen Komponenten navigiere?

Question

ich habe Probleme zu verstehen, wie die Kombination von eckigen und Knoten js eine SPA-Website erstellen kann.

meine Frage besser understanable mit einem Beispiel sein: kann sagen, im ein Spa Website zu bauen versuchen:

Client-Seite - Winkel 4:

Ich habe mehrere Komponenten in meiner app, und konfigurierten Routen zu all diesen Komponenten.

Ich verwendete ng build aus dem eckigen CLI, und es erstellt den Dist-Ordner mit index.html.

auf der Serverseite - Knoten js: Ich verwendete eine statische Route für die Datei index.html.

beim Zugriff auf den Server über den Browser bekomme ich die index.html, alle eckigen Routen arbeiten und können zwischen den Komponenten erfolgreich navigieren.

1. aber ich kann nicht wirklich verstehen, was hinter den Kulissen geschieht jedes Mal, wenn ich zu einem diffrent Komponente navigieren, bekomme ich diese Komponente vom Server? (dann wird es nicht SPA ..)

2. Wenn ich das erste Mal auf den statischen Pfad zugreifen, werden alle Komponenten zum Browser des Benutzers heruntergeladen, und von da an geschieht die Navigation nur auf dem Client?

3. was dieser index html enthält? Was macht der ng-Build-Befehl?

Answer 1

1. No. Der Router entfernt die Ansicht der aktuellen Route Komponente aus dem DOM, und ersetzt es durch die Ansicht der neu geroutet Komponente. Es drückt auch einen neuen Eintrag in der Navigationshistorie des Browsers, um "als ob" Sie wirklich eine neue Seite von der URL der neuen Route heruntergeladen.
2. Ja.
3. Der Inhalt der index.html ist genau das, was Sie sehen, wenn Sie die Quelle der Seite im Browser sehen. Oder wenn Sie den Inhalt der Datei index.html im Verzeichnis dist anzeigen. Es ist einfach eine HTML-Seite mit der Root-Komponente und einigen JS-Skripten. Diese JS-Skripts sind Bundles, die von ng build erstellt wurden und das Ergebnis der TypeScript-Kompilierung aller Ihrer Dateien, der JS-Module von Angular, die Ihre App verwendet, und der Vorgehensweise beim Erstellen der App (dh ohne oder mit --aot) enthalten. die Vorlagen der Komponenten oder das Ergebnis der Zusammenstellung dieser Vorlagen (+ die CSS-Dateien der Komponente). Kurz gesagt, die gesamte App ist in diesen JS-Skripten enthalten.