Używając angular-ui-router, jak mogę użyć innej metody na $ stateProvider lub jak w ogóle mogę z niej skorzystać?
Używając angular-ui-router, jak mogę użyć innej metody na $ stateProvider lub jak w ogóle mogę z niej skorzystać?
Odpowiedzi:
Nie możesz używać tylko $stateProvider
.
Musisz wstrzyknąć $urlRouterProvider
i utworzyć kod podobny do:
$urlRouterProvider.otherwise('/otherwise');
/otherwise
Url musi być zdefiniowana w stanie, jak zwykle:
$stateProvider
.state("otherwise", { url : '/otherwise'...})
Zobacz ten link, gdzie ksperling wyjaśnia
$stateProvider
. To mniej pracy, jeśli chcesz po prostu wyświetlić szablon, ale nie przekierować. Wolę odpowiedź @ juan-hernandez.
otherwise
(w tym przypadku '/otherwise'
) musi być zgodna z nazwą stanu (pierwszy parametr do .state
) lub wartością dlaurl
opcji?
Możesz $stateProvider
użyć składni catch all ( "*path"
). Musisz tylko dodać konfigurację stanu na dole listy, taką jak ta:
$stateProvider.state("otherwise", {
url: "*path",
templateUrl: "views/error-not-found.html"
});
Wszystkie opcje są wyjaśnione na https://github.com/angular-ui/ui-router/wiki/URL-Routing#regex-parameters .
Zaletą tej opcji, w przeciwieństwie do niej $urlRouterProvider.otherwise(...)
, jest to, że nie jesteś zmuszony do zmiany lokalizacji.
you're not forced to a location change
?
/this/does/not/exist
, adres URL pozostanie taki na pasku adresu. Inne rozwiązanie zaprowadzi cię do/otherwise
Możesz również ręcznie wstrzyknąć $ state do funkcji w przeciwnym razie, którą możesz następnie przejść do stanu bez adresu URL. Ma to tę zaletę, że przeglądarka nie zmienia paska adresu, co jest pomocne przy powrocie do poprzedniej strony.
$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, ten głupi moment, kiedy zdajesz sobie sprawę, że na zadane pytanie znajduje się już odpowiedź w pierwszych wierszach przykładowego kodu! Wystarczy spojrzeć na przykładowy kod.
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 !
....
Chcę tylko dodać świetne odpowiedzi, które już zostały podane. W najnowszej wersji @uirouter/angularjs
klasa została oznaczona UrlRouterProvider
jako przestarzała. Teraz zalecają używanie UrlService
zamiast tego. Możesz osiągnąć ten sam wynik, wprowadzając następującą modyfikację:
$urlService.rules.otherwise('/defaultState');
Dodatkowe metody: https://ui-router.github.io/ng1/docs/1.0.16/interfaces/url.urlrulesapi.html
W Zaakceptowanych odpowiedź referencje angular-route
pyta o ui-router
. Zaakceptowana odpowiedź używa „monolitycznego” $routeProvider
, co wymaga ngRoute
modułu (natomiast ui-router
wymaga rozszerzeniaui.router
modułu)
Najwyżej oceniane odpowiedź wykorzystuje $stateProvider
zamiast, i mówi coś takiego .state("otherwise", { url : '/otherwise'... })
, ale nie mogę znaleźć żadnej wzmianki o „inaczej” w dokumentacji Łączy . Jednak widzę, że $stateProvider
jest to wspomniane w tej odpowiedzi, gdzie mówi:
Nie możesz używać tylko
$stateProvider
. Musisz wstrzyknąć$urlRouterProvider
W tym miejscu moja odpowiedź może ci pomóc. U mnie wystarczyło użyć $urlRouterProvider
właśnie w ten sposób:
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');
//...
}]);
Moja sugestia jest zgodna z ui-router
dokumentacją ( ta konkretna wersja ), w której zawiera ona podobne użycie. when(...)
metoda (pierwsze wywołanie funkcji):
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
, więc to mi pomoże)