Conflito pushState HTML5 com roteamento de URL do roteador UI angular

Question

Eu tenho um webapp Angular.js que emprega ui-router (https://github.com/angular-ui/ui-router) com visualizações nomeadas paralelas como estas:

.state(
            'app.experience', {
                url: 'e/:experienceId',
                views: {
                    'center-pane@': {
                        templateUrl: 'partials/experience.html',
                        controller: 'ExperienceController'
                    }
                })

Habilitei pushState HTML5 via

$locationProvider.html5Mode(true);

Quando

http://www.mysite.com/e/123

é solicitado, meu back-end envia de volta o index.html no diretório raiz.(conforme Usando pushstate HTML5 em angular.js) Porém, quando o navegador recebe index.html e começa a buscar todos os recursos css/js, as solicitações são para

/e/js/script1.js

em oposição a

/js/script1.js

que só existe no nível raiz.Parece padronizar o diretório raiz como mysite.com/e/ (do URL solicitado) e não da raiz real, mysite.com/.

Há algo que estou perdendo aqui?Não é possível usar srcs relativos para meu javascript e css em index.html?

Obrigado por ajudar!

Answer 1

Observação:Você não nos mostrou a aparência do HTML, mas com base no seu problema, presumo que você esteja não usando URLs relativos da raiz do documento.

Você pode usar URLs relativos, mas eles devem ser relativos com base na raiz do documento.

Por exemplo, você pode ter algo assim em seu html

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

Você realmente deveria fazer desta forma (observe a adição da barra '/' no início)

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

Isso não é algo específico do angularjs, é uma coisa de html, veja esta resposta para mais detalhes.

A razão pela qual seu navegador está usando o /e/ no URL é porque o o navegador realmente solicitou um recurso que tem o /e/ na url.O navegador não sabe que seu servidor respondeu com um arquivo que não está no /e/ diretório.

Portanto, se você tiver uma URL relativa sem barra no início, ela será relativa ao caminho ou ao recurso original solicitado.O que você deseja é usar URLs relativos com uma barra no início.