Как получить Angular UI Router для уважения "немаршрутизированных" URL-адресов

Это мой первый опыт работы с AngularUI Router, поэтому я предполагаю, что я делаю ошибку новичка и надеюсь, что кто-то может мне помочь.

Я настроил одностраничное приложение для использования Angular UI Router в режиме HTML5, и все работает, как ожидается.

.config([
    "$stateProvider", "$urlRouterProvider", "$locationProvider",
    function ($stateProvider, $urlRouterProvider, $locationProvider) {
        $stateProvider.state("concept", {
            url: "/concepts/:conceptKey",
            templateUrl: "/templates/concept-view.html",
            controller: "conceptViewController",
            resolve: {
                concept: [
                    "$stateParams", "conceptsApi",
                    function ($stateParams, conceptsApi) {
                        return conceptsApi.getConcept($stateParams.conceptKey);
                    }
                ]
            }
        });

        $urlRouterProvider.otherwise("/");

        $locationProvider.html5Mode(true);
    }
])

Однако на той же странице также содержатся ссылки на другие статические страницы на одном сайте с использованием относительных URL-адресов. До установки маршрутизации Angular эти ссылки работали корректно, но теперь они сломаны. В частности, нажатие любой из этих ссылок правильно изменяет адресную строку браузера, но не вызывает навигацию к этой целевой странице.

Я предполагаю, что мне нужно добавить что-то, чтобы сообщить конфигурации маршрутизации игнорировать определенные шаблоны URL, но я не нашел никакой информации, которая показывает мне, как это сделать. Любые предложения, пожалуйста?

Спасибо, Тим

Ответы

Ответ 1

После некоторого расследования я обнаружил, что эта проблема не связана конкретно с Angular UI Router. Такое же поведение также присутствует в собственном механизме маршрутизации AngularJS и вызвано логикой перезаписи ссылок, реализованной $location, как описано в этой документации.

Дальнейшее обсуждение проблемы здесь.

Я нашел два возможных решения, оба из которых, похоже, хорошо работают:

Явно целевые ссылки на статические страницы. Включив атрибут target="_self" в любые ссылки на статические страницы (т.е. страницы, выходящие за пределы определенной схемы маршрутизации Angular), они будут игнорироваться AngularJS и таким образом отображаться правильно.

Отключить переписывание ссылок. При настройке маршрутизации Angular в режиме HTML5 поддерживаются два формата синтаксиса. Самый простой формат...

$locationProvider.html5Mode(true);

... включает режим HTML5 с настройкой по умолчанию. Однако синтаксис длинной формы обеспечивает доступ к дополнительным свойствам конфигурации, один из которых решает вышеупомянутую проблему, отключив Angular поведение по умолчанию для перехвата и повторной записи URL-адресов ссылок:

$locationProvider.html5Mode({
    enabled: true,
    requireBase: false,
    rewriteLinks: false
});

Я использовал второе решение и, по-видимому, не оказывал отрицательного влияния на поведение URL-адресов, определенных в схеме маршрутизации. Это решение, по-видимому, одинаково хорошо работает с Angular UI Router и с собственной маршрутизацией AngularJS.