Sinon, sur StateProvider

Question

En utilisant angular-ui-router, comment puis-je utiliser le méthode inverse en $stateProvider ou comment puis-je l'utiliser ?

Answer 1

Vous ne pouvez pas utiliser seulement $stateProvider .

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

$urlRouterProvider.otherwise('/otherwise');

En /otherwise url doit être défini sur un état comme d'habitude :

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

Voir ce lien où ksperling explique

Answer 2

Vous pouvez avec $stateProvider en utilisant le syntaxe "tout compris ( "*path" ). Il vous suffit d'ajouter une configuration d'état au bas de votre liste comme la suivante :

$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 .

L'avantage de cette option, par rapport à l'option $urlRouterProvider.otherwise(...) c'est que vous n'êtes pas obligé de changer de lieu.

Answer 3

Vous pouvez également injecter manuellement $state dans la fonction otherwise, qui vous permet alors de 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 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+'"'
        });
    });

Answer 4

Je veux juste ajouter mon grain de sel aux excellentes réponses qui ont déjà été fournies. La dernière version de @uirouter/angularjs a marqué la classe UrlRouterProvider comme étant déprécié. Il est désormais recommandé 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

Answer 5

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