В противном случае на StateProvider


95

Используя angular-ui-router, как я могу использовать другой метод в $ stateProvider или как я могу его использовать вообще?


Что ты пытаешься сделать? (Обратите внимание, что я не совсем понимаю $stateProvider.otherwise, так что это поможет мне)
Кевин Мередит

Ответы:


123

Вы не можете использовать только $stateProvider.

Вам нужно ввести $urlRouterProviderи создать код, похожий на:

$urlRouterProvider.otherwise('/otherwise');

/otherwiseURL должен быть определен на состояние , как обычно:

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

См. Эту ссылку, где объясняет ksperling


Вы действительно можете использовать $stateProvider. Меньше работы, если вы просто хотите отобразить шаблон, но не перенаправить. Я предпочитаю ответ @ juan-hernandez.
weltschmerz

Должно ли передаваемое значение otherwise(в данном случае '/otherwise') соответствовать имени состояния (первый параметр .state) или значению urlпараметра?
d512

Теперь это устарело - см. Ответ от @babyburger
Vedran

81

Вы можете $stateProviderиспользовать синтаксис catch all ( "*path"). Вам просто нужно добавить конфигурацию состояния в конец списка, как показано ниже:

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

Все параметры описаны в https://github.com/angular-ui/ui-router/wiki/URL-Routing#regex-parameters .

Самое приятное в этом варианте, в отличие от $urlRouterProvider.otherwise(...) , что вам не нужно менять местоположение.


не могли бы вы уточнить you're not forced to a location change:?
Кевин Мередит

1
Он имеет в виду, что URL-адрес останется прежним. Таким образом, если пользователь перейдет по /this/does/not/existадресу, URL-адрес останется в адресной строке. Другое решение приведет вас к/otherwise
Мэтт Грир

Я использовал ваше решение, и оно сработало (я могу сохранить URL-адрес, который не был найден, и это здорово, потому что я использую luisfarzati.github.io/angulartics, и таким образом я также могу видеть навигацию по страницам, которые не были найдены) для случаев, когда URL-адрес, по которому переходит пользователь, не существует. Однако, если я перейду к этому URL-адресу с помощью $ state.go («иначе») внутри контроллера, я потеряю URL-адрес. Я перехожу к этому состоянию явно, когда пользователь переходит на страницу сведений об элементе, а сервер возвращает 404 (например, если элемент был удален). Вы знаете, как это исправить?
pcatre

@pcatre вы можете использовать опцию location = false, и URL-адрес не изменится. Например. $ state.go ('иначе', {}, {location: false})
JakubKnejzlik

35

Вы также можете вручную вставить $ state в функцию в противном случае, которая затем может перейти в состояние без URL. Это имеет то преимущество, что браузер не меняет адресную строку, что полезно для обработки возврата на предыдущую страницу.

    $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+'"'
        });
    });

это решило мою проблему о том, как проверить, находимся ли мы в середине приложения или загружаемся, когда используется иное - большое спасибо :)
Йорн Беркфельд

ты спас мне день!
Maelig 04

Не забывай, если хочешь минимизировать это, тебе нужен $
inject

3

Хорошо, это глупый момент, когда вы понимаете, что на заданный вами вопрос уже дан ответ в первых строчках примера кода! Взгляните на пример кода.

       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 ! 


          ....

Взгляните сюда.


3

Я просто хочу поделиться отличными ответами, которые уже предоставлены. Последняя версия @uirouter/angularjsпометила класс UrlRouterProviderкак устаревший. Теперь они рекомендуют использовать UrlServiceвместо этого. Вы можете добиться того же результата с помощью следующей модификации:

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

Дополнительные методы: https://ui-router.github.io/ng1/docs/1.0.16/interfaces/url.urlrulesapi.html


0

В Обслуживаемом ответ ссылка angular-routeспрашивает о ui-router. В принятом ответе используется «монолитный» $routeProvider , для которого требуется ngRouteмодуль (тогда как ui-routerтребуетсяui.router модуль)

Самый высокий рейтинг ответ использует $stateProviderвместо этого, и говорит что - то вроде .state("otherwise", { url : '/otherwise'... }), но я не могу найти ни одного упоминания о «иначе» в документации она связывает . Однако я вижу, что $stateProviderэто упоминается в этом ответе, где говорится:

Вы не можете использовать только $stateProvider. Вам нужно ввести$urlRouterProvider

Вот где мой ответ может вам помочь. Для меня было достаточно использовать $urlRouterProviderвот так:

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

Мое предложение согласуется с ui-router документацией ( эта конкретная редакция ), где она включает аналогичное использование. when(...)метод (первый вызов функции):

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');
})
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.