W przeciwnym razie na StateProvider

Odpowiedzi:

123

Nie możesz używać tylko $stateProvider.

Musisz wstrzyknąć $urlRouterProvideri utworzyć kod podobny do:

$urlRouterProvider.otherwise('/otherwise');

/otherwiseUrl musi być zdefiniowana w stanie, jak zwykle:

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

Zobacz ten link, gdzie ksperling wyjaśnia

Richarda Kellera
źródło
Możesz faktycznie użyć $stateProvider. To mniej pracy, jeśli chcesz po prostu wyświetlić szablon, ale nie przekierować. Wolę odpowiedź @ juan-hernandez.
weltschmerz
czy wartość przekazana do otherwise(w tym przypadku '/otherwise') musi być zgodna z nazwą stanu (pierwszy parametr do .state) lub wartością dlaurl opcji?
d512
To jest teraz przestarzałe - zobacz odpowiedź od @babyburger
Vedran
81

Możesz $stateProvideruż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.

Juan Hernandez
źródło
Czy mógłbyś rozwinąć: you're not forced to a location change?
Kevin Meredith
1
Ma na myśli to, że adres URL pozostanie taki, jaki był. Więc jeśli użytkownik przejdzie do /this/does/not/exist, adres URL pozostanie taki na pasku adresu. Inne rozwiązanie zaprowadzi cię do/otherwise
Matt Greer,
Skorzystałem z twojego rozwiązania i zadziałało (mogę zachować adres URL, który nie został znaleziony, co jest świetne, ponieważ używam luisfarzati.github.io/angulartics iw ten sposób widzę również nawigację do stron, które nie zostały znalezione) w przypadkach, gdy adres URL, do którego przechodzi użytkownik, nie istnieje. Jeśli jednak przejdę do tego adresu URL za pomocą $ state.go („inaczej”) wewnątrz kontrolera, stracę adres URL. Jawnie przechodzę do tego stanu, gdy użytkownik przechodzi do strony szczegółów elementu, a serwer zwraca 404 (na przykład, jeśli element został usunięty). Czy znasz sposób, aby to naprawić?
pcatre
@pcatre możesz użyć opcji location = false, a adres URL się nie zmieni. Na przykład. $ state.go ('else', {}, {location: false})
JakubKnejzlik,
35

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+'"'
        });
    });
Zak Henry
źródło
to rozwiązało mój problem, jak sprawdzić, czy jesteśmy w połowie aplikacji lub wczytywani, gdy jest używany w inny sposób - dziękuję bardzo :)
Jörn Berkefeld
uratowałeś mi dzień!
Maelig
Nie zapomnij, jeśli chcesz to zminimalizować, musisz wstrzyknąć $
Sten Muchow
3

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 ! 


          ....

Spójrz tutaj.

Adelin
źródło
3

Chcę tylko dodać świetne odpowiedzi, które już zostały podane. W najnowszej wersji @uirouter/angularjsklasa została oznaczona UrlRouterProviderjako przestarzała. Teraz zalecają używanie UrlServicezamiast 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

Babyburger
źródło
0

W Zaakceptowanych odpowiedź referencje angular-routepyta o ui-router. Zaakceptowana odpowiedź używa „monolitycznego” $routeProvider , co wymaga ngRoutemodułu (natomiast ui-routerwymaga rozszerzeniaui.router modułu)

Najwyżej oceniane odpowiedź wykorzystuje $stateProviderzamiast, i mówi coś takiego .state("otherwise", { url : '/otherwise'... }), ale nie mogę znaleźć żadnej wzmianki o „inaczej” w dokumentacji Łączy . Jednak widzę, że $stateProviderjest 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ć $urlRouterProviderwł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');
})
Groszek czerwony
źródło