En utilisant angular-ui-router, comment puis-je utiliser la méthode autrement sur $ stateProvider ou comment puis-je l'utiliser?
En utilisant angular-ui-router, comment puis-je utiliser la méthode autrement sur $ stateProvider ou comment puis-je l'utiliser?
Réponses:
Vous ne pouvez pas utiliser uniquement $stateProvider
.
Vous devez injecter $urlRouterProvider
et créer un code similaire à:
$urlRouterProvider.otherwise('/otherwise');
L' /otherwise
url doit être définie sur un état comme d'habitude:
$stateProvider
.state("otherwise", { url : '/otherwise'...})
Voir ce lien où ksperling explique
$stateProvider
. C'est moins de travail si vous voulez simplement afficher un modèle, mais pas rediriger. Je préfère la réponse de @ juan-hernandez.
otherwise
(dans ce cas '/otherwise'
) doit-elle correspondre au nom de l'état (le premier paramètre à .state
) ou à la valeur de l' url
option?
Vous pouvez $stateProvider
utiliser la syntaxe catch all ( "*path"
). Il vous suffit d'ajouter une configuration d'état en bas de votre liste comme celle-ci:
$stateProvider.state("otherwise", {
url: "*path",
templateUrl: "views/error-not-found.html"
});
Toutes les options sont expliquées dans https://github.com/angular-ui/ui-router/wiki/URL-Routing#regex-parameters .
La bonne chose de cette option, par opposition à $urlRouterProvider.otherwise(...)
, est que vous n'êtes pas obligé de changer d'emplacement.
you're not forced to a location change
:?
/this/does/not/exist
, l'URL restera ainsi dans la barre d'adresse. L'autre solution vous mènera à/otherwise
Vous pouvez également injecter manuellement $ state dans la fonction sinon, que vous pouvez ensuite naviguer vers un état non url. Cela présente l'avantage que le navigateur ne modifie pas la barre d'adresse, ce qui est utile pour revenir à une page précédente.
$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, le moment idiot où vous vous rendez compte que la question que vous avez posée est déjà répondue dans les premières lignes de l'exemple de code! Jetez simplement un œil à l'exemple de code.
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 !
....
Je veux juste parler des excellentes réponses qui sont déjà fournies. La dernière version de a @uirouter/angularjs
marqué la classe UrlRouterProvider
comme obsolète. Ils recommandent maintenant d'utiliser à la UrlService
place. Vous pouvez obtenir le même résultat avec la modification suivante:
$urlService.rules.otherwise('/defaultState');
Méthodes supplémentaires: https://ui-router.github.io/ng1/docs/1.0.16/interfaces/url.urlrulesapi.html
Les références de réponse acceptéesangular-route
demandent environ ui-router
. La réponse acceptée utilise le "monolithique" $routeProvider
, qui nécessite le ngRoute
module (alors qu'il a ui-router
besoin du ui.router
module)
La réponse la mieux notée utilise à la $stateProvider
place et dit quelque chose comme .state("otherwise", { url : '/otherwise'... })
, mais je ne trouve aucune mention de «autrement» dans la documentation à laquelle elle renvoie . Cependant, je vois que cela $stateProvider
est mentionné dans cette réponse où il est dit:
Vous ne pouvez pas utiliser uniquement
$stateProvider
. Vous devez vous injecter$urlRouterProvider
C'est là que ma réponse pourrait vous aider. Pour moi, il suffisait d'utiliser $urlRouterProvider
comme ça:
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');
//...
}]);
Ma suggestion est cohérente avec la ui-router
documentation ( cette révision spécifique ), où elle inclut une utilisation similaire du. when(...)
method (le premier appel à la fonction):
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
, donc cela m'aidera)