Столкновение HTML5 pushState с угловым пользовательским интерфейсом-Маршрутизация URL-адресов маршрутизатора
-
21-12-2019 - |
Вопрос
У меня есть Angular.js веб-приложение, в котором используется пользовательский интерфейс-маршрутизатор (https://github.com/angular-ui/ui-router) с параллельными именованными представлениями, подобными таким:
.state(
'app.experience', {
url: 'e/:experienceId',
views: {
'center-pane@': {
templateUrl: 'partials/experience.html',
controller: 'ExperienceController'
}
})
Я включил HTML5 pushState через
$locationProvider.html5Mode(true);
Когда
http://www.mysite.com/e/123
запрашивается, мой сервер отправляет обратно index.html в корневой каталог.(согласно Использование HTML5 pushstate на angular.js) Однако, когда браузер получает index.html и начинает извлекать все ресурсы css / js, запросы выполняются для
/e/js/script1.js
в отличие от
/js/script1.js
который существует только на корневом уровне.Кажется, по умолчанию корневой каталог задается как mysite.com/e/
(с запрошенного URL-адреса), а не с фактического root, mysite.com/
.
Есть ли что-то, чего я здесь не понимаю?Разве невозможно использовать относительные srcs для моего javascript и css в index.html?
Спасибо за помощь!
Решение
Примечание:Вы не показали нам, как выглядит HTML, но, основываясь на вашей проблеме, я собираюсь предположить, что вы нет использование относительных URL-адресов из корневого каталога документа.
Вы можете использовать относительные URL-адреса, но они должны быть относительными на основе корневого каталога документа.
Так, например, у вас может быть что-то подобное в вашем html
<img src="images/foo.jpg" />
Вы действительно должны сделать это таким образом (обратите внимание на добавление начальной косой черты '/')
<img src="/images/foo.jpg" />
Это не что-то специфичное для angularjs, это html-код, понимаете этот ответ для получения более подробной информации.
Причина, по которой ваш браузер использует /e/
в URL-адресе это потому, что браузер фактически запросил ресурс, который имеет /e/
в URL-адресе.Браузер не знает, что ваш сервер ответил файлом, которого нет в /e/
справочник.
Следовательно, если у вас есть относительный URL-адрес без косой черты в начале, он будет относиться к пути или исходному запрошенному ресурсу.Что вы хотите, так это использовать относительные URL-адреса с косой чертой в начале.