Столкновение HTML5 pushState с угловым пользовательским интерфейсом-Маршрутизация URL-адресов маршрутизатора

Question

У меня есть 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?

Спасибо за помощь!

Answer 1

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

Вы можете использовать относительные URL-адреса, но они должны быть относительными на основе корневого каталога документа.

Так, например, у вас может быть что-то подобное в вашем html

<img src="images/foo.jpg" />

Вы действительно должны сделать это таким образом (обратите внимание на добавление начальной косой черты '/')

<img src="/images/foo.jpg" />

Это не что-то специфичное для angularjs, это html-код, понимаете этот ответ для получения более подробной информации.

Причина, по которой ваш браузер использует /e/ в URL-адресе это потому, что браузер фактически запросил ресурс, который имеет /e/ в URL-адресе.Браузер не знает, что ваш сервер ответил файлом, которого нет в /e/ справочник.

Следовательно, если у вас есть относительный URL-адрес без косой черты в начале, он будет относиться к пути или исходному запрошенному ресурсу.Что вы хотите, так это использовать относительные URL-адреса с косой чертой в начале.