Caso contrário, em StateProvider

Respostas:

123

Você não pode usar apenas $stateProvider.

Você precisa injetar $urlRouterProvidere criar um código semelhante a:

$urlRouterProvider.otherwise('/otherwise');

O /otherwiseurl deve ser definido em um estado como de costume:

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

Veja este link onde ksperling explica

Richard Keller
fonte
Você pode realmente usar $stateProvider. É menos trabalhoso se você quiser apenas exibir um modelo, mas não redirecionar. Eu prefiro a resposta de @juan-hernandez.
weltschmerz de
o valor passado para otherwise(neste caso '/otherwise') tem que corresponder ao nome do estado (o primeiro parâmetro para .state) ou o valor da urlopção?
d512
Agora está obsoleto - veja a resposta de @babyburger
Vedran
81

Você pode $stateProviderusar a sintaxe catch all ( "*path"). Você só precisa adicionar uma configuração de estado na parte inferior da sua lista, como esta:

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

Todas as opções são explicadas em https://github.com/angular-ui/ui-router/wiki/URL-Routing#regex-parameters .

O bom dessa opção, ao contrário $urlRouterProvider.otherwise(...), é que você não é forçado a uma mudança de local.

Juan Hernandez
fonte
você poderia elaborar you're not forced to a location change:?
Kevin Meredith
1
O que ele quer dizer é que o url continuará o que era. Portanto, se o usuário acessar /this/does/not/exist, a URL permanecerá assim na barra de endereço. A outra solução levará você a/otherwise
Matt Greer
Usei sua solução e funcionou (posso manter o url que não foi encontrado o que é ótimo porque estou usando luisfarzati.github.io/angulartics e dessa forma também consigo ver a navegação para páginas que não foram encontradas) para os casos em que o url para o qual o usuário navega não existe. No entanto, se eu navegar para este url usando $ state.go ('else') dentro de um controlador, eu perco o url. Eu navego explicitamente para este estado quando o usuário vai para a página de detalhes de um item e o servidor retorna 404 (por exemplo, se o item foi excluído). Você conhece uma maneira de consertar isso?
pcatre
@pcatre você pode usar a opção location = false e o url não mudará. Por exemplo. $ state.go ('else', {}, {location: false})
JakubKnejzlik
35

Você também pode injetar manualmente $ state na função de outra forma, que pode então navegar para um estado não url. Isso tem a vantagem de o navegador não alterar a barra de endereços, o que é útil para lidar com o retorno a uma 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
fonte
isso resolveu meu problema de como verificar se estamos no meio do aplicativo ou onload quando de outra forma é usado - muito obrigado :)
Jörn Berkefeld
você salvou meu dia!
Maelig
Não se esqueça se você quer minimizar isso, você precisa de $ inject
Sten Muchow
3

Ok, o momento bobo em que você percebe que a pergunta que você fez já foi respondida nas primeiras linhas do código de exemplo! Basta dar uma olhada no código de amostra.

       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 ! 


          ....

Dê uma olhada aqui.

Adelin
fonte
3

Eu só quero comentar as ótimas respostas que já foram fornecidas. A versão mais recente do @uirouter/angularjsmarcou a classe UrlRouterProvidercomo obsoleta. Eles agora recomendam usar em seu UrlServicelugar. Você pode obter o mesmo resultado com a seguinte modificação:

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

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

Babyburger
fonte
0

As referências de respostas aceitasangular-route perguntam sobre ui-router. A resposta aceita usa o "monolítico" $routeProvider , que requer o ngRoutemódulo (enquanto ui-routerprecisa do ui.routermódulo)

A resposta com a pontuação mais alta usa $stateProvider, em vez disso, e diz algo como .state("otherwise", { url : '/otherwise'... }), mas não consigo encontrar nenhuma menção de "caso contrário" na documentação vinculada . No entanto, vejo que $stateProvideré mencionado nesta resposta onde diz:

Você não pode usar apenas $stateProvider. Você precisa injetar$urlRouterProvider

É aí que minha resposta pode ajudá-lo. Para mim, foi suficiente usar $urlRouterProviderassim:

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

Minha sugestão é consistente com a ui-router documentação ( esta revisão específica ), onde inclui um uso semelhante do. when(...)método (a primeira chamada para a função):

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');
})
The Red Pea
fonte