Angular: как обрабатывать маршруты в режиме HTML5 и маршруты хэширования?

Question

Angular: как обрабатывать маршруты в режиме HTML5 и маршруты хэширования?

0

Я использовал "стандартные" маршруты в Angular 1, которые используют знак # (например, /app#/home). Теперь я хотел бы переключиться на режим HTML5, чтобы иметь красивые URL-адреса (например: /app/home).

Я переключил режим HTML5 с помощью $locationProvider.html5Mode(true) и все работает должным образом.

Тем не менее, некоторые из наших пользователей могут по-прежнему иметь закладки и ссылки по электронной почте, которые имеют старый формат URL, и те могут сломаться. Я хотел бы, чтобы старые URL-адреса все еще работали (у вас /app#/home redirect to /app/home автоматически).

Я пробовал использовать маршрут по умолчанию, который выглядит так:

$routeProvider
    .when({ ... })
    .otherwise({
        'controller': function($location) {
            var hash = $location.hash();
            // At this point the hash is undefined (even when there is one in the URL)
            console.log('hash = ' + hash);
//            if (hash && hash.indexOf('/') == 0) {
//                $location.path(hash);
//            } else {
//                $location.path('/home')
//            }
        }
    });

Это, к сожалению, не сработало (контроллер не видит, что хеш и Angular, похоже, входят в бесконечный цикл дайджеста).

Любая идея о том, как этого достичь?

Christophe L 11 нояб. 2016, в 01:33

Источник

0

Лучшее решение - проверить, состоит ли местоположение из «#». Если да, то удалите его и перенаправьте на него.
Manish Singh 11 нояб. 2016, в 06:44
0

Есть ли какая-то причина для предложения else ? Если нет хэша, разве вы уже не там, где хотите?
Ouroborus 11 нояб. 2016, в 06:55
0

Я вообще не могу получить хеш вообще. Обновил вопрос, чтобы отразить это.
Christophe L 11 нояб. 2016, в 21:22
0

почему ты вообще пытаешься это сделать? Html5Mode автоматически отступает для браузеров, которые его не поддерживают. Вам не нужно ничего делать, чтобы продолжать использовать хеш-маршруты.
Claies 11 нояб. 2016, в 21:48

Показать ещё 2 комментария

Теги:

javascript

angularjs

html5

1 ответ

Ещё вопросы

Лучшее решение - проверить, состоит ли местоположение из «#». Если да, то удалите его и перенаправьте на него.
Есть ли какая-то причина для предложения else ? Если нет хэша, разве вы уже не там, где хотите?
Я вообще не могу получить хеш вообще. Обновил вопрос, чтобы отразить это.
почему ты вообще пытаешься это сделать? Html5Mode автоматически отступает для браузеров, которые его не поддерживают. Вам не нужно ничего делать, чтобы продолжать использовать хеш-маршруты.

Raulucco · Accepted Answer · 2016-11-11T19-25-00.000Z

Используйте $ routeChangeStart:

 angular.module('routing', ['ngRoute'])
       .run(['$rootScope', '$location', '$window', function($rootScope, $location, $window) {
          $rootScope.$on("$routeChangeStart", 
            (event, current, previous, rejection) => {
              if (/#\//.test($window.location.hash)) {
                 $location.path($window.location.hash.replace('#', ''));
              }
          });

...

Я попробовал ваше решение, но каким-то образом $ routeChangeError не запускается и код не запускается. Я также попытался поместить тот же код в событие $ routeChangeStart: код выполняется, но $ location.url () возвращает неопределенное значение.
Я смог настроить ваш код, чтобы он работал. Новый код: $ rootScope. $ On ('$ routeChangeStart', function (event, next) {if (/#/.test($window.location.hash)) {$ location.path ($ window.location.hash .replace ('#', ''));}} Если вы обновите свой ответ, я отмечу его как принятый. Спасибо за указатели!
На самом деле регулярное выражение для совпадения только с хешем, начинающимся с # /, должно быть /#\//.test($window.location.hash)
Я спал, я обновлю ответ с вашими изменениями, чтобы кто-то мог найти его полезным
Код должен выполняться на $ routeChangeStart, а не на $ routeChangeError. Смотрите код из моего предыдущего комментария.