Routing per '/' ohne Raute-Zeichen ("Anchor") und rein clientseitig - wie geht das?

[ruutaiokwu]

Hallo zusammen

Ich frage mich immer wieder, wie clientseitiges Routing (z.b. bei Angular) über meinserver.com/xyz geht, auch wenn ich auf dem Server

a.) Weder ein Pfad namens "xyz"

noch

b.) eine entsprechende Regel z.B. per .htaccess/mod_rewrite besteht?


Wie ich bisher gemeint habe (falsch?) geht doch zuerst immer alles an der Server, was hinter dem Domainname nach einem '/' aufgerufen wird??

Ich könnte es ja noch nachvollziehen wenn ein "Separator" (z.B. '#', der "Anchor", welcher das clientseitig über ein <a ...>-Tag regelt) verwendet werden würde.

Oder hat die Weiterleitungsregel in JavaScript mit meinserver.com/xyz einfach ne höhere Priorität, geht also zuerst Clientseitig rein und wird dann dort verarbeitet so dass es gar nie soweit kommt dass ein GET-Request auf dem Server abgesetzt wird...?

Jedenfalls widerspricht das allem, was ich bisher zu wissen geglaubt habe...

Vielen Dank für die Feedbacks! 🙂

 

[mihe7]

Ich würde mal sagen, mit einem ServiceWorker, der im Prinzip als Proxy fungiert.

 

[thecain]

Durch die HTML5 History API. Siehe: https://docs.angularjs.org/guide/$location#html5-mode

 

[mihe7]

Durch die HTML5 History API

Hm... die dient aber nur dazu, die URL in der Adressleiste zu ändern, oder?

 

[thecain]

Es unterdrückt auch den Reload. Standardmässig hat AngularJs damals auf jeden Fall noch keine Serviceworker eingesetzt.

Note that in this mode, AngularJS intercepts all links (subject to the "Html link rewriting" rules below) and updates the url in a way that never performs a full page reload.

 

[ruutaiokwu]

Danke für die Feedbacks. Das mit dem Service Worker scheint mir aufschlussreich zu sein.

"Es unterdrückt auch den Reload. Standardmässig hat AngularJs damals auf jeden Fall noch keine Serviceworker eingesetzt."

...wie soll das gehen, wenn ich die URL im Browser von Hand manipuliere und /abc und /xyz immer das gleiche Resultat ergeben?

AngularJS ist vom Konzept her ist was komplett anderes als Angular..

 

[thecain]

Gar nicht. Angular navigiert intern und ändert die URL via API. Eine Änderung von dir in der URL führt immer zu einem Reload der Seite, das regelt der Browser.

AngularJS ist vom Konzept her ist was komplett anderes als Angular..

Tut hier aber nichts zur Sache

 

[mihe7]

Es unterdrückt auch den Reload.

Ja, habe ich unglücklich formuliert, das war mit dem "nur die URL in der Adressleiste" ändern gemeint.

 

[ruutaiokwu]

Hat sich erledigt, die Ursache war eine serverseitige Regel, welche der NodeJS-Dev-Server sich "einfach so" erlaubt einzusetzen...:-(

(Mea culpa - aber wie schräg ist denn sowas??)

 

[mrBrown]

Nicht schräg, sondern dabei völlig normal 🙂

Die sind üblicherweise entsprechend konfiguriert (meist durch die CLI-Tools, die man zum Projekt aufsetzen nutzt), bei anderen Servern muss man es selbst machen.

 

[ruutaiokwu]

Vielen Dank, kann ja kaum anders sein! 🙂

Aber wie funktioniert es denn genau, wenn ich die kompilierte (oder eher "transpilierte") Angular-Anwendung ins Apache htdocs-Verzeichnis kopiere?

Jedenfalls muss ich da selbst nicht mit irgendwelchen mod_rewrite-Regeln einrichten?

Und das, was mir dabei transpiliert wird, ist doch rein Client-seitiger Code, nix was auf den Server läuft, somit auch kein `.htaccess`...?

 

[thecain]

Angular in Depth

Unlock the power of software engineering at its core with Angular in Depth!

indepth.dev

 

[ruutaiokwu]

Vielen Dank!! 🙂

Dass ist doch mal ein fundierter Artikel zum Thema, welchen ich aber erst durchlesen muss...🙂

Ob das ganze jetzt nun Client- oder Server-seitig erfolgt, auf auf den ersten Blick nicht erkenntlich - aber sicher darin enthalten.

 

[ruutaiokwu]

Also wenn ich in diesem Text nach den Begriffen "Server" oder "htaccess" suche, dann finde ich keinen Eintrag.

Es wird erklärt, wie Angular das Client-Seitig handhabt, aber es wird nicht erklärt was auf dem Server passiert.

Irgendwas muss ja auf dem Server passieren um die URL's aufzulösen (es existiert ja auch keine Verzeichnisstruktur, welche auf dem Server 1:1 mit der URL übereinstimmt)

Und der NodeJS-Entwicklungsserver auf Port 4200 verwendet dabei sicher ne andere Technologie als der Apache mit seinen .htaccess-Dateien...

Also immer noch völlig unklar, wie das Ganze funktionieren soll. Und über JavaScript (=URL History) geht's ja auch nicht, da manipuliert ja nur die URL in der Browser-Bar ohne dabei Requests an den Server zu senden...

 

[ruutaiokwu]

Ist das korrekt?

Wenn man keine Server-seitigen Regeln verwenden will, dann muss man den "Anchor" akzeptieren - und zwar in diesem Verzeichnis, wo die index.html-Datei sitzt. Also:

http://SERVER_NAME/#/BlaBla ...

oder

http://SERVER_NAME/verzeichnis_mit_index_html/#/BlaBla ...


-> Wenn man den Anchor aber weghaben will, dann muss man Server-seitig nachhelfen?

Richtig? Oder vielleicht teilweise richtig?

Danke für die Feedbacks.

 

[mihe7]

(es existiert ja auch keine Verzeichnisstruktur, welche auf dem Server 1:1 mit der URL übereinstimmt)

Muss auch nicht.

Nehmen wir mal die URL http://meinserver.com/xyz, dann wird als erstes mal der Name zu IP-Adresse aufgelöst, eine Socket-Verbindung gen Port 80 hergestellt und der HTTP-Request abgesetzt, der im Wesentlichen die Request-Methode (z. B. GET), den Rest der URL (Pfad, Query) und den angefragten Host zweck SNI enthält:

GET /xyz HTTP/1.1
Host: meinserver.com

Was der Server daraus macht, spielt keine Rolle.

Wenn man keine Server-seitigen Regeln verwenden will, dann muss man den "Anchor" akzeptieren - und zwar in diesem Verzeichnis, wo die index.html-Datei sitzt. Also:

Das basiert auch auf einer serverseitigen Regel, nämlich, dass / auf /index.html bzw. /# auf index.html# abgebildet wird. Die dürfte allerdings bei den Webservern Standard sein 🙂

Eine URL ist einfach eine besondere URI, die Angaben darüber enthält, wo im Netzwerk etwas zu finden ist und wie es abzurufen ist.

 

[ruutaiokwu]

"Die dürfte allerdings bei den Webservern Standard sein 🙂"

Ich denke damit ist nun so ziemlich alles geklärt, vielen vielen Dank!! 🙂