Usando angular-ui-router, como posso usar o método de outra forma em $ stateProvider ou como posso usá-lo?
Usando angular-ui-router, como posso usar o método de outra forma em $ stateProvider ou como posso usá-lo?
Respostas:
Você não pode usar apenas $stateProvider
.
Você precisa injetar $urlRouterProvider
e criar um código semelhante a:
$urlRouterProvider.otherwise('/otherwise');
O /otherwise
url deve ser definido em um estado como de costume:
$stateProvider
.state("otherwise", { url : '/otherwise'...})
Veja este link onde ksperling explica
$stateProvider
. É menos trabalhoso se você quiser apenas exibir um modelo, mas não redirecionar. Eu prefiro a resposta de @juan-hernandez.
otherwise
(neste caso '/otherwise'
) tem que corresponder ao nome do estado (o primeiro parâmetro para .state
) ou o valor da url
opção?
Você pode $stateProvider
usar 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.
you're not forced to a location change
:?
/this/does/not/exist
, a URL permanecerá assim na barra de endereço. A outra solução levará você a/otherwise
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+'"'
});
});
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 !
....
Eu só quero comentar as ótimas respostas que já foram fornecidas. A versão mais recente do @uirouter/angularjs
marcou a classe UrlRouterProvider
como obsoleta. Eles agora recomendam usar em seu UrlService
lugar. 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
As referências de respostas aceitasangular-route
perguntam sobre ui-router
. A resposta aceita usa o "monolítico" $routeProvider
, que requer o ngRoute
módulo (enquanto ui-router
precisa do ui.router
mó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 $urlRouterProvider
assim:
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');
})
$stateProvider.otherwise
, então isso vai me ajudar)