Ansonsten auf StateProvider

Antworten:

123

Sie können nicht nur verwenden $stateProvider.

Sie müssen $urlRouterProvidereinen Code einfügen und erstellen, der ähnlich ist wie:

$urlRouterProvider.otherwise('/otherwise');

Die /otherwiseURL muss wie gewohnt in einem Zustand definiert werden:

 $stateProvider
    .state("otherwise", { url : '/otherwise'...})

Siehe diesen Link, wo ksperling erklärt

Richard Keller
quelle
Sie können tatsächlich verwenden $stateProvider. Es ist weniger Arbeit, wenn Sie nur eine Vorlage anzeigen, aber nicht umleiten möchten. Ich bevorzuge die Antwort von @ juan-hernandez.
Weltschmerz
Muss der an otherwise(in diesem Fall '/otherwise') übergebene Wert mit dem Namen des Status (dem ersten Parameter .state) oder dem Wert für die urlOption übereinstimmen ?
d512
Dies ist jetzt veraltet - siehe Antwort von @babyburger
Vedran
81

Sie können mit $stateProviderder Syntax catch all ( "*path"). Sie müssen lediglich eine Statuskonfiguration wie die folgende am Ende Ihrer Liste hinzufügen:

$stateProvider.state("otherwise", {
    url: "*path",
    templateUrl: "views/error-not-found.html"
});

Alle Optionen werden unter https://github.com/angular-ui/ui-router/wiki/URL-Routing#regex-parameters erläutert .

Das Schöne an dieser Option $urlRouterProvider.otherwise(...)ist, dass Sie nicht zu einem Standortwechsel gezwungen werden.

Juan Hernandez
quelle
Könnten Sie bitte näher darauf eingehen : you're not forced to a location change?
Kevin Meredith
1
Was er meint ist, dass die URL so bleibt, wie sie war. Wenn der Benutzer zu geht /this/does/not/exist, bleibt die URL in der Adressleiste so. Die andere Lösung bringt Sie zu/otherwise
Matt Greer
Ich habe Ihre Lösung verwendet und es hat funktioniert (ich kann die nicht gefundene URL behalten, was großartig ist, weil ich luisfarzati.github.io/angulartics verwende und auf diese Weise auch die Navigation zu Seiten sehe, die nicht gefunden wurden), wenn Die URL, zu der der Benutzer navigiert, ist nicht vorhanden. Wenn ich jedoch mit $ state.go ('else') in einem Controller zu dieser URL navigiere, verliere ich die URL. Ich navigiere explizit zu diesem Status, wenn der Benutzer zur Detailseite eines Elements wechselt und der Server 404 zurückgibt (zum Beispiel, wenn das Element gelöscht wurde). Kennen Sie einen Weg, dies zu beheben?
pcatre
@pcatre Sie können die Option location = false verwenden und die URL wird nicht geändert. Z.B. $ state.go ('
else
35

Sie können $ state auch manuell in die else-Funktion einfügen, um dann zu einem Nicht-URL-Status zu navigieren. Dies hat den Vorteil, dass der Browser die Adressleiste nicht ändert. Dies ist hilfreich, um zur vorherigen Seite zurückzukehren.

    $urlRouterProvider.otherwise(function ($injector, $location) {
        var $state = $injector.get('$state');

        $state.go('defaultLayout.error', {
            title: "Page not found",
            message: 'Could not find a state associated with url "'+$location.$$url+'"'
        });
    });
Zak Henry
quelle
das löste mein Problem, wie man prüft, ob wir Mid-App oder Onload sind, wenn etwas anderes verwendet wird - vielen Dank :)
Jörn Berkefeld
du hast meinen Tag gerettet !
Maelig
Vergessen Sie nicht, wenn Sie dies minimieren möchten und $ injizieren müssen
Sten Muchow
3

Ok, der dumme Moment, in dem Sie feststellen, dass die von Ihnen gestellte Frage bereits in den ersten Zeilen des Beispielcodes beantwortet wurde! Schauen Sie sich einfach den Beispielcode an.

       angular.module('sample', ['ui.compat'])
      .config(
        [        '$stateProvider', '$routeProvider', '$urlRouterProvider',
        function ($stateProvider,   $routeProvider,   $urlRouterProvider) {
          $urlRouterProvider
            .when('/c?id', '/contacts/:id')
            .otherwise('/'); // <-- This is what I was looking for ! 


          ....

Schauen Sie hier.

Adelin
quelle
3

Ich möchte nur auf die großartigen Antworten eingehen, die bereits gegeben wurden. Die neueste Version von hat @uirouter/angularjsdie Klasse UrlRouterProviderals veraltet markiert . Sie empfehlen jetzt UrlServicestattdessen zu verwenden. Sie können das gleiche Ergebnis mit der folgenden Änderung erzielen:

$urlService.rules.otherwise('/defaultState');

Zusätzliche Methoden: https://ui-router.github.io/ng1/docs/1.0.16/interfaces/url.urlrulesapi.html

Babyburger
quelle
0

Die akzeptierten Antwortreferenzen fragen angular-routenach ui-router. Die akzeptierte Antwort verwendet das "Monolithische" $routeProvider , für das das ngRouteModul erforderlich ist (während ui-routerdas ui.routerModul benötigt wird).

Die am höchsten bewertete Antwort verwendet $stateProviderstattdessen und sagt so etwas wie .state("otherwise", { url : '/otherwise'... }), aber ich kann in der Dokumentation, auf die sie verweist , keine Erwähnung von "anders" finden . Ich sehe jedoch, dass dies in dieser Antwort$stateProvider erwähnt wird, in der es heißt:

Sie können nicht nur verwenden $stateProvider. Sie müssen spritzen$urlRouterProvider

Dort könnte meine Antwort Ihnen helfen. Für mich war es ausreichend, $urlRouterProvidereinfach so zu verwenden :

 my_module
   .config([
    , '$urlRouterProvider'
    , function(
        , $urlRouterProvider){
            //When the url is empty; i.e. what I consider to be "the default"
            //Then send the user to whatever state is served at the URL '/starting' 
            //(It could say '/default' or any other path you want)
            $urlRouterProvider
                    .when('', '/starting');
                    //...
    }]);

Mein Vorschlag steht im Einklang mit der ui-router Dokumentation ( dieser spezifischen Überarbeitung ), in der eine ähnliche Verwendung der. when(...)Methode (der erste Aufruf der Funktion):

app.config(function($urlRouterProvider){
  // when there is an empty route, redirect to /index   
  $urlRouterProvider.when('', '/index');

  // You can also use regex for the match parameter
  $urlRouterProvider.when(/aspx/i, '/index');
})
Die rote Erbse
quelle