Wie bekomme ich Angular UI Router um "nicht geroutete" URLs zu erhalten?

Question

Dies ist meine erste Erfahrung mit AngularUI Router, also schätze ich, dass ich einen Anfängerfehler mache und hoffe, dass mich jemand führen kann.

Ich habe eine einseitige Anwendung für die Verwendung von Angular UI Router im HTML5-Modus konfiguriert, und alles scheint wie erwartet zu funktionieren.

.config([ 
    "$stateProvider", "$urlRouterProvider", "$locationProvider", 
    function ($stateProvider, $urlRouterProvider, $locationProvider) { 
     $stateProvider.state("concept", { 
      url: "/concepts/:conceptKey", 
      templateUrl: "/templates/concept-view.html", 
      controller: "conceptViewController", 
      resolve: { 
       concept: [ 
        "$stateParams", "conceptsApi", 
        function ($stateParams, conceptsApi) { 
         return conceptsApi.getConcept($stateParams.conceptKey); 
        } 
       ] 
      } 
     }); 

     $urlRouterProvider.otherwise("/"); 

     $locationProvider.html5Mode(true); 
    } 
]) 

Die gleiche Seite enthält jedoch auch einige Links zu anderen statischen Seiten auf der gleichen Website mit relativen URLs. Vor der Installation von Angular Routing funktionierten diese Links korrekt, aber jetzt sind sie gebrochen. Insbesondere wird durch Klicken auf einen dieser Links die Adressleiste des Browsers korrekt geändert, aber die Navigation zu dieser Zielseite wird nicht ausgelöst.

Ich nehme an, ich muss etwas hinzufügen, um der Routing-Konfiguration zu sagen, bestimmte URL-Muster zu ignorieren, aber ich habe keine Informationen gefunden, die mir zeigen, wie das geht. Irgendwelche Vorschläge bitte?

Danke, Tim

Answer 1

Nach einigen Untersuchungen entdeckte ich, dass dieses Problem nicht speziell auf Angular UI-Router verbunden ist. Das gleiche Verhalten ist auch im nativen AngularJS-Routing-Mechanismus vorhanden und wird durch die von $location implementierte Link-Neuschreiblogik verursacht, wie in this documentation beschrieben.

Weitere Erörterung des Problems ist here.

fand ich zwei mögliche Lösungen, die beide scheinen gut zu funktionieren:

Explizit Links zu statischen Seiten zielen: das Attribut target="_self" in allen Links zu statischen Seiten (dh Seiten Durch die Einbindung, die außerhalb des definierten fallen Angular Routing-Schema) werden sie von AngularJS ignoriert und somit korrekt gerendert.

Link zum erneuten Schreiben deaktivieren: Beim Konfigurieren von Angular Routing im HTML5-Modus werden zwei Syntaxformate unterstützt. Das einfachste Format ...

$locationProvider.html5Mode(true);

... ermöglicht HTML5-Modus mit der Standardkonfiguration. Jedoch stellt die Langform Syntax Zugriff auf zusätzliche Konfigurationseigenschaften, von denen löst das obige Problem durch Angular Standardverhalten des Abfangens und Umschreiben Link-URLs zu deaktivieren:

$locationProvider.html5Mode({ 
    enabled: true, 
    requireBase: false, 
    rewriteLinks: false 
}); 

ich die zweite Lösung verwendet, und es erscheint keine nachteiligen Auswirkungen auf das Verhalten von URLs haben, die im Routingschema definiert sind. Diese Lösung scheint mit Angular UI Router und mit nativem AngularJS-Routing gleich gut zu funktionieren.