Sinon sur StateProvider


Réponses:


123

Vous ne pouvez pas utiliser uniquement $stateProvider.

Vous devez injecter $urlRouterProvideret créer un code similaire à:

$urlRouterProvider.otherwise('/otherwise');

L' /otherwiseurl doit être définie sur un état comme d'habitude:

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

Voir ce lien où ksperling explique


Vous pouvez réellement utiliser $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.
weltschmerz

la valeur passée à otherwise(dans ce cas '/otherwise') doit-elle correspondre au nom de l'état (le premier paramètre à .state) ou à la valeur de l' urloption?
d512

Ceci est maintenant obsolète - voir la réponse de @babyburger
Vedran

81

Vous pouvez $stateProviderutiliser 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.


pourriez-vous s'il vous plaît élaborer you're not forced to a location change:?
Kevin Meredith le

1
Ce qu'il veut dire, c'est que l'URL restera ce qu'elle était. Donc, si l'utilisateur accède à /this/does/not/exist, l'URL restera ainsi dans la barre d'adresse. L'autre solution vous mènera à/otherwise
Matt Greer

J'ai utilisé votre solution et cela a fonctionné (je peux garder l'url qui n'a pas été trouvée, ce qui est génial car j'utilise luisfarzati.github.io/angulartics et de cette façon, je peux également voir la navigation vers des pages qui n'ont pas été trouvées) pour les cas où l'url vers laquelle l'utilisateur accède n'existe pas. Cependant, si je navigue vers cette URL en utilisant $ state.go ('sinon') dans un contrôleur, je perds l'url. Je navigue explicitement vers cet état lorsque l'utilisateur accède à la page de détails d'un élément et que le serveur renvoie 404 (par exemple si l'élément a été supprimé). Connaissez-vous un moyen de résoudre ce problème?
pcatre

@pcatre vous pouvez utiliser l'option location = false et l'URL ne changera pas. Par exemple. $ state.go ('else', {}, {location: false})
JakubKnejzlik

35

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+'"'
        });
    });

cela a résolu mon problème sur la façon de vérifier si nous sommes au milieu de l'application ou en cours de chargement lorsque cela est utilisé autrement - merci beaucoup :)
Jörn Berkefeld

tu as sauvé ma journée!
Maelig le

N'oubliez pas si vous voulez minimiser cela, vous avez besoin de $ inject
Sten Muchow

3

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 ! 


          ....

Jetez un œil ici.


3

Je veux juste parler des excellentes réponses qui sont déjà fournies. La dernière version de a @uirouter/angularjsmarqué la classe UrlRouterProvidercomme obsolète. Ils recommandent maintenant d'utiliser à la UrlServiceplace. 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


0

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 ngRoutemodule (alors qu'il a ui-routerbesoin du ui.routermodule)

La réponse la mieux notée utilise à la $stateProviderplace 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 $stateProviderest 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 $urlRouterProvidercomme ç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');
})
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.