В іншому випадку на 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
Ведран,

81

Ви можете за $stateProviderдопомогою catch весь синтаксис ( "*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
Matt Greer

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

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

35

Ви також можете вручну вводити $ state у функцію "else", яку потім можна перейти до стану, що не є 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+'"'
        });
    });

це вирішило мою проблему з тим, як перевірити, чи ми використовуємо середній додаток або onload, коли використовується інше - велике спасибі :)
Йорн Беркефельд,

ти врятував мій день!
Maelig

Не забувайте, якщо ви хочете звести це до мінімуму, вам потрібно $ inject
Sten Muchow

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.