De lo contrario en StateProvider

Respuestas:

123

No puedes usar solo $stateProvider.

Necesita inyectar $urlRouterProvidery crear un código similar a:

$urlRouterProvider.otherwise('/otherwise');

La /otherwiseURL debe definirse en un estado como de costumbre:

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

Vea este enlace donde explica ksperling

Richard Keller
fuente
Realmente puedes usar $stateProvider. Es menos trabajo si solo desea mostrar una plantilla, pero no redirigir. Prefiero la respuesta de @ juan-hernandez.
weltschmerz
¿El valor pasado a otherwise(en este caso '/otherwise') tiene que coincidir con el nombre del estado (el primer parámetro a .state) o el valor de la urlopción?
d512
Esto ahora está en desuso - vea la respuesta de @babyburger
Vedran
81

Puede $stateProviderusar la sintaxis catch all ( "*path"). Solo necesita agregar una configuración de estado al final de su lista como la siguiente:

$stateProvider.state("otherwise", {
    url: "*path",
    templateUrl: "views/error-not-found.html"
});

Todas las opciones se explican en https://github.com/angular-ui/ui-router/wiki/URL-Routing#regex-parameters .

Lo bueno de esta opción, a diferencia de $urlRouterProvider.otherwise(...), es que no está obligado a cambiar de ubicación.

Juan hernandez
fuente
¿Podría por favor explicarme you're not forced to a location change?
Kevin Meredith
1
Lo que quiere decir es que la URL seguirá siendo lo que era. Entonces, si el usuario va a /this/does/not/exist, la URL permanecerá de esa manera en la barra de direcciones. La otra solución le llevará a/otherwise
Matt Greer
Usé su solución y funcionó (puedo mantener la URL que no se encontró, lo cual es genial porque estoy usando luisfarzati.github.io/angulartics y de esta manera también puedo ver la navegación a páginas que no se encontraron) para los casos en que la URL a la que navega el usuario no existe. Sin embargo, si navego a esta URL usando $ state.go ('de lo contrario') dentro de un controlador, pierdo la URL. Navego explícitamente a este estado cuando el usuario va a la página de detalles de un elemento y el servidor devuelve 404 (por ejemplo, si el elemento fue eliminado). ¿Conoce alguna forma de solucionar este problema?
pcatre
@pcatre puede usar la opción location = false y la URL no cambiará. P.ej. $ state.go ('de lo contrario', {}, {ubicación: falso})
JakubKnejzlik
35

También puede inyectar $ state manualmente en la función de lo contrario, que luego puede navegar a un estado sin URL. Esto tiene la ventaja de que el navegador no cambia la barra de direcciones, lo cual es útil para manejar el regreso a una página anterior.

    $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+'"'
        });
    });
Zak Henry
fuente
eso resolvió mi problema sobre cómo verificar si estamos en la mitad de la aplicación o en carga cuando se usa de otra manera, muchas gracias :)
Jörn Berkefeld
Salvaste mi día !
Maelig
No olvides si quieres minimizar esto, necesitas $ inject
Sten Muchow
3

Ok, el momento tonto en el que te das cuenta de que la pregunta que hiciste ya está respondida en las primeras líneas del código de muestra. Solo eche un vistazo al código de muestra.

       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 ! 


          ....

Echa un vistazo aquí.

Adelin
fuente
3

Solo quiero intervenir en las excelentes respuestas que ya se proporcionan. La última versión de @uirouter/angularjsmarcó la clase UrlRouterProvidercomo obsoleta. Ahora recomiendan usar en su UrlServicelugar. Puede lograr el mismo resultado con la siguiente modificación:

$urlService.rules.otherwise('/defaultState');

Métodos adicionales: https://ui-router.github.io/ng1/docs/1.0.16/interfaces/url.urlrulesapi.html

Babyburger
fuente
0

Las referencias de respuesta aceptadasangular-route preguntan sobre ui-router. La respuesta aceptada usa el "monolítico" $routeProvider , que requiere el ngRoutemódulo (mientras que ui-routernecesita el ui.routermódulo)

En su lugar, se usa la respuesta con la calificación más alta$stateProvider , y dice algo como .state("otherwise", { url : '/otherwise'... }), pero no puedo encontrar ninguna mención de "lo contrario" en la documentación que vincula . Sin embargo, veo que $stateProviderse menciona en esta respuesta donde dice:

No puedes usar solo $stateProvider. Necesitas inyectar$urlRouterProvider

Ahí es donde mi respuesta podría ayudarte. Para mí, fue suficiente usarlo $urlRouterProviderasí:

 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');
                    //...
    }]);

Mi sugerencia es consistente con la ui-router documentación , ( esta revisión específica ), donde incluye un uso similar de. when(...)método (la primera llamada a la función):

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');
})
El guisante rojo
fuente