web-dev-qa-db-fra.com

Sinon sur StateProvider

En utilisant angular-ui-router, comment utiliser la méthode sinon on $ stateProvider ou comment puis-je l'utiliser? 

angularjsangular-uiangular-ui-router
92
Adelin

Vous ne pouvez pas utiliser uniquement $stateProvider. 

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

$urlRouterProvider.otherwise('/otherwise');

L'URL /otherwise doit être défini sur un état comme d'habitude:

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

Voir ce lien où ksperling explique

120
Richard Keller

Vous pouvez utiliser $stateProvider en utilisant la syntaxe catch all ("*path"). Il vous suffit d’ajouter une configuration d’état au 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 .

Le bon côté de cette option, par opposition à $urlRouterProvider.otherwise(...), est que vous n’êtes pas obligé de changer d’emplacement.

81
Juan Hernandez

Vous pouvez également injecter manuellement $ state dans la fonction sinon, que vous pouvez ensuite naviguer vers un état non-url. Cela a pour avantage que le navigateur ne modifie pas la barre d'adresse, ce qui est utile pour gérer le retour à 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+'"'
        });
    });
34
Zak Henry

Ok, le moment idiot où vous réalisez que la question que vous avez posée est déjà traitée dans les premières lignes du code exemple! Jetez un coup d'œ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 coup d'oeil ici.

3
Adelin

Le réponse acceptée references angular-route demande à propos de ui-router. La réponse acceptée utilise le "monolithique"$routeProvider, qui nécessite le module ngRoute (alors que ui-router a besoin du module ui.router)

Le la réponse la mieux notée utilise $stateProvider à la place, et indique quelque chose comme .state("otherwise", { url : '/otherwise'... }), Mais je ne trouve aucune mention de "sinon" dans la documentation elle renvoie . Cependant, je vois que $stateProvider est mentionné dans cette réponse où il est écrit:

Vous ne pouvez pas utiliser uniquement $stateProvider. Vous devez injecter $urlRouterProvider

C'est là que ma réponse pourrait vous aider. Pour moi, il suffisait d'utiliser $urlRouterProvider comme ceci:

 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 conforme à la ui-routerdocumentation , ( cette révision spécifique ), où elle inclut une utilisation similaire de la méthode .when(...) (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');
})
0
The Red Pea

Je veux juste parler des bonnes réponses déjà fournies. La dernière version de @uirouter/angularjs a marqué la classe UrlRouterProvider comme obsolète. Ils recommandent maintenant d'utiliser UrlService à la 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

0
Babyburger