Choque HTML5 pushState con enrutamiento de URL del enrutador Angular UI

Question

Tengo una aplicación web Angular.js que emplea ui-router (https://github.com/angular-ui/ui-router) con vistas con nombres paralelos como estos:

.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 servidor devuelve el index.html en el directorio raíz.(según Usando 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 sólo existe en el nivel raíz.Parece que el directorio raíz está predeterminado como mysite.com/e/ (de la URL solicitada) y no de la raíz real, mysite.com/.

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

¡Gracias por ayudar!

Answer 1

Nota:No nos has mostrado cómo se ve HTML, pero según tu problema, asumiré que sí. no utilizando URL relativas desde la raíz del documento.

Puedes usar URL relativas pero deben ser relativas. basado en la raíz del documento.

Entonces, por ejemplo, es posible que tengas algo como esto en tu html

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

Realmente deberías hacerlo de esta manera (observa la adición de la barra diagonal inicial '/')

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

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

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

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 quieres es usar URL relativas con una barra al principio.