Angular Reverse URL Konstruktion

Lassen Sie uns über ein Problem sprechen, von dem Sie wahrscheinlich gar nicht wissen, dass Sie es in Ihrer Webanwendung haben:

Hartkodierte URLs

Diese fest kodierten, statischen URLs sind zunächst einfach, aber der Code ist fehleranfällig und erhöht die Komplexität der App. Stattdessen sollten Sie dynamische URLs mit Hilfe von Reverse URL Construction erstellen. Ich bin mit dem Web-Framework Django aufgewachsen, das ausgiebig mit Reverse Routing arbeitet, und ich liebe es. Schauen wir uns an, wie dieses einfache System Ihre Codierung verbessert, und ich bin sicher, Sie werden es auch lieben. Wir werden uns die URL-Konstruktion anhand eines AngularJS-Beispiels ansehen. Auch wenn Sie Angular nicht verwenden, sollte die allgemeine Idee hinter umgekehrten URLs deutlich werden.

Die Bühne

Angenommen, wir haben eine einfache Webanwendung mit einer Kontaktseite, einer Liste von Benutzern und Benutzerseiten: [code] /contact -> contact.html /users -> users.html /user/foo -> user.html für den Benutzer "foo" [/code] Wir verweisen auf diese Routen direkt in unserer Seite mit dem Tag "< a >" und gelegentlich benötigen wir sogar eine URL in JavaScript. Ein Link zur Kontaktseite lässt sich ganz einfach erstellen mit: < a href="/blog/contact">Kontaktieren Sie uns</a >. Dieser Ansatz hat jedoch einige Nachteile. Das erste Problem besteht darin, dass die URL jetzt an zwei Stellen definiert ist, nämlich in der Routenkonfiguration und im Anker-Tag. Wenn Sie sich jemals entscheiden, die URL in `contact-us` zu ändern, sollten auch alle Verweise aktualisiert werden. Wenn die App wächst, wachsen auch die doppelten Verweise und Sie werden viele davon ändern müssen. Die Chancen stehen gut, dass Sie einen übersehen und einen schlechten Link verursachen. Weitere Probleme entstehen, sobald die URL ein dynamisches Element enthält. Nehmen wir an, die Seite hinter `/users` listet alle Benutzer in unserer Anwendung wie folgt auf: [code language="html"] <ul ng-repeat="Benutzer in Benutzer"> <li><a ng-href="/benutzer/{{benutzer.name}}"></a></li> </ul> [/code] Da die URL durch einfache Interpolation erstellt wird, können wir nicht überprüfen, ob die resultierende URL gültig ist. Nehmen wir an, der App-Router gleicht die URL nach dem Muster `^/user/([a-z]+)$` ab. Das würde bedeuten, dass der Name des Benutzers nur aus Buchstaben bestehen darf, zum Beispiel "foo". Wenn der Name eine ganze Zahl enthält, zum Beispiel "foo2015", wird die URL von unserem Router nicht erkannt. Wir lassen also zu, dass schlechte URLs erstellt werden. Hardcodierte URLs sind also nicht gut, was dann?

Umgekehrte URL-Auflösung

Die Lösung hat viele Namen: URL-Konstruktion, umgekehrte URL-Auflösung und umgekehrtes Routing. Das Wesentliche an dieser Methode ist, dass jede Route durch ein eindeutiges Element identifizierbar ist. Die Umkehrung der URL erfolgt durch einen Verweis auf die Route und die Angabe von Parametern. Die Route selbst wird an einem einzigen Ort, dem Router, gespeichert. Diese Route wird sowohl für das Routing einer Anfrage als auch für die Konstruktion einer URL verwendet. Wir werden das Reverse-Routing zum standardmäßigen Angular "$routeProvider" hinzufügen. Ein kleines Projekt angular-reverse-url fügt die Fähigkeit zur umgekehrten Auflösung hinzu. Wir können einen Filter verwenden, um URLs zu erstellen, indem wir entweder den Namen der Route oder den Namen ihres Controllers referenzieren. In diesem Beispiel werden wir die Route anhand des Routennamens identifizieren. Aber denken Sie daran, dass der Controller-Ansatz genauso gut funktionieren würde (vorausgesetzt, eine Route ist eindeutig durch einen Controller definiert). Lassen Sie uns nun sehen, wie die umgekehrte URL-Konstruktion funktioniert. Wir verwenden die folgende Beispielkonfiguration: [code language="javascript"] function($routeProvider){ $routeProvider .when('/contact', { template: 'contact.html', name: 'contact' }) .when('/users', { template: '/users.html', name: 'user-list' }) .when('/user/:id/:name', { template: '/users.html', name: 'user-detail' }) }]); [/code]

Statische URLs konstruieren

Unsere Webanwendung benötigt eine Navigationsleiste. Innerhalb unserer Navigation können wir einen Link zur Kontaktseite verwenden: [code language="html"] <nav> <ul> <li><a ng-href="{{ 'Kontakt' | reverseUrl }}">Kontaktieren Sie uns</a></li> </ul> </nav> [/code] Der reverseUrl-Filter verwendet einfach den Namen 'contact', um die URL aus der im $routeProvider definierten Route zu konstruieren.

Parameterbasierte URL-Erstellung

Die Erstellung einfacher URLs ohne Parameter ist kaum interessant. Die Vorteile der umgekehrten URL-Auflösung werden deutlich, wenn wir anfangen, Routenargumente einzuführen. Wir können die Benutzerseiten in unserer Anwendung mit auflisten: [code language="html"] <li ng-repeat="Benutzer in Benutzer"> <a href="{{ 'user-detail' | reverseUrl:{id: user.id, name: user.name} }}">{{benutzer.name}}</a> </li> [/code] Sauber und einfach! Es ist keine doppelte Route definiert und die Parameter werden bequem über den Namen zugeordnet. In diesem Beispiel ordnen wir die Parameter explizit zu, aber wir können dem Filter auch direkt ein Objekt übergeben, was die Anweisung stark vereinfacht. Wenn Sie es wünschen, können Sie auch positionale Argumente angeben: [code language="html"] <a href="{{ 'user-detail' | reverseUrl:[user.id, user.name] }}">{{user.name}}</a> [/code]

URL-Auflösung im Code

Gelegentlich ergibt sich die Notwendigkeit, eine URL direkt im Code zu komponieren. Da `reverseUrl` ein Angular-Filter ist, können wir ihn einfach direkt in unserem JavaScript aufrufen: [code language="javascript"] $filter('reverseUrl')('user-detail', { id: 1, name: 1 }) [/code] Das funktioniert einwandfrei, obwohl ich vorschlagen würde, den Filter in einen Dienst zu verpacken, wenn Sie häufig URLs im Code konstruieren.

Andere Lösungen

Die hier vorgestellte Bibliothek bietet eine sehr einfache, aber elegante Möglichkeit zur umgekehrten URL-Auflösung. Sie sollte sich relativ leicht um zusätzliche Funktionen wie die Überprüfung des Parametertyps erweitern lassen. Es gibt auch eine ganze Reihe anderer Bibliotheken, die eine umgekehrte URL-Konstruktion anbieten. Wir werden uns den neuen Angular-Router und den beliebten ui-router ansehen.

Winkel >= 1.5

Der neue Angular 1.5-Router bietet von Haus aus eine umgekehrte URL-Auflösung. Wenn Sie den Sprung zum neuen komponentenbasierten Routing geschafft haben, sollte die Rückwärtsauflösung ein Kinderspiel sein. Es gibt einige kleinere syntaktische Unterschiede: Konfiguration [code language="javascript"] AppController.$routeConfig = [ { path: '/user/:id/:name', component: 'user-detail' } ]; [/code] Template Verwendung [code language="html"] <a ng-link="user-detail({ id: 1, name:'foo' })">Die Seite von Foo</a> [/code]

UI-Router

Der sehr beliebte Angular ui-router bietet ebenfalls Reverse Routing. Wenn Sie ui-router verwenden, ist die Wahrscheinlichkeit groß, dass Sie diese umgekehrte Auflösung von URLs bereits nutzen. Wenn Sie ui-router verwenden und noch immer URLs hart kodieren, sollten Sie noch heute umsteigen! Die Einrichtung ist einfach: Konfiguration [code language="javascript"] $stateProvider .state('user-detail', { URL: "/user/:id/:name", controller: "UserDetailCtrl", templateUrl: "views/user.html" }); [/code] Verwendung von Vorlagen [code language="html"] <a ui-sref="user-detail({ id: 1, name: 'foo' })">Die Seite von Foo</a> [/code]

Schluss mit der harten Kodierung von URLs

Bei so vielen Optionen gibt es wirklich keinen guten Grund, URLs in Ihrer Anwendung fest zu codieren. Von nun an sollten alle URLs, die Sie in einem größeren Projekt erstellen, ein System zur Auflösung von Reverse-URLs verwenden. Die Konstruktion von Reverse-URLs ist wirklich einfach, sie hält Ihre Routen an einem Ort und standardisiert die URL-Generierung in Ihrer Anwendung. Wenn Sie sich den Angular-Beispielcode genauer ansehen möchten, sehen Sie sich das vollständige Beispiel an: reverse-routing-Angular-example