Wie kann ich mit dem Angular-UI -Router die Methode else auf $ stateProvider verwenden oder wie kann ich sie überhaupt verwenden?
Wie kann ich mit dem Angular-UI -Router die Methode else auf $ stateProvider verwenden oder wie kann ich sie überhaupt verwenden?
Antworten:
Sie können nicht nur verwenden $stateProvider
.
Sie müssen $urlRouterProvider
einen Code einfügen und erstellen, der ähnlich ist wie:
$urlRouterProvider.otherwise('/otherwise');
Die /otherwise
URL muss wie gewohnt in einem Zustand definiert werden:
$stateProvider
.state("otherwise", { url : '/otherwise'...})
Siehe diesen Link, wo ksperling erklärt
$stateProvider
. Es ist weniger Arbeit, wenn Sie nur eine Vorlage anzeigen, aber nicht umleiten möchten. Ich bevorzuge die Antwort von @ juan-hernandez.
otherwise
(in diesem Fall '/otherwise'
) übergebene Wert mit dem Namen des Status (dem ersten Parameter .state
) oder dem Wert für die url
Option übereinstimmen ?
Sie können mit $stateProvider
der 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.
you're not forced to a location change
?
/this/does/not/exist
, bleibt die URL in der Adressleiste so. Die andere Lösung bringt Sie zu/otherwise
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+'"'
});
});
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 !
....
Ich möchte nur auf die großartigen Antworten eingehen, die bereits gegeben wurden. Die neueste Version von hat @uirouter/angularjs
die Klasse UrlRouterProvider
als veraltet markiert . Sie empfehlen jetzt UrlService
stattdessen 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
Die akzeptierten Antwortreferenzen fragen angular-route
nach ui-router
. Die akzeptierte Antwort verwendet das "Monolithische" $routeProvider
, für das das ngRoute
Modul erforderlich ist (während ui-router
das ui.router
Modul benötigt wird).
Die am höchsten bewertete Antwort verwendet $stateProvider
stattdessen 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, $urlRouterProvider
einfach 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');
})
$stateProvider.otherwise
, so wird es mir helfen)