javascript - stateparams - HTML5 pushState Clash w/Angular UI-Router URL Routing

angularjs ui router ui sref

Question

Tengo una aplicación web Angular.js que emplea ui-router ( https://github.com/angular-ui/ui-router ) con vistas nombradas en paralelo como esta:

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

Habilité HTML5 pushState a través de

$locationProvider.html5Mode(true);

Cuando

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

se solicita, mi backend devuelve el index.html en el directorio raíz. (según el uso de HTML5 pushstate en angular.js ) Sin embargo, cuando el navegador recibe index.html y comienza a buscar todos los recursos css / js, las solicitudes son para

/e/js/script1.js

Opuesto a

/js/script1.js

que solo existe en el nivel raíz. Parece predeterminado el directorio raíz como mysite.com/e/ (desde la url solicitada) y no la raíz real, mysite.com/ .

¿Hay algo que me falta aquí? ¿No es posible usar srcs relativos para mi javascript y css en index.html?

¡Gracias por ayudar!

Answer 1

Nota: No nos ha mostrado cómo se ve el HTML, pero en función de su problema, supongo que no está utilizando URL relativas desde la raíz del documento.

Puede usar direcciones URL relativas, pero deben ser relativas en función de la raíz del documento .

Entonces, por ejemplo, puede tener algo como esto en su html

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

Realmente deberías hacerlo de esta manera (fíjate en la adición del comienzo ''/'' slash)

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

Esto no es algo específico de angularjs, es algo html, mira esta respuesta para más detalles.

La razón por la que su navegador está utilizando el /e/ en la url es porque el navegador realmente solicitó un recurso que tiene el /e/ en la url. El navegador no sabe que su servidor respondió con un archivo que no está en el directorio /e/ .

Por lo tanto, si tiene una url relativa sin una barra diagonal al principio, será relativa a la ruta o al recurso solicitado original. Lo que quiere es usar las URL relativas con una barra al principio.