HTML5 PushState Clash W / Routing URL UI-router angolare

Question

Ho un webbapp angolare.js che impiega ui-router ( https:// GitHub. COM / Angular-UI / UI-router ) w / parallelo Named Visualizzazioni come tale:

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

.

Ho abilitato HTML5 PushState tramite

$locationProvider.html5Mode(true);

.

Quando

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

.

è richiesto, il mio backend invia l'indice.html nella directory principale. (come da Utilizzo di HTML5 PushState su Angular.js ) Tuttavia, quando il browser Riceve index.html e inizia a recuperare tutte le risorse CSS / JS, le richieste sono per

/e/js/script1.js

.

al contrario di

/js/script1.js

.

che esiste solo a livello di radice. Sembra predefinito la directory root come mysite.com/e/ (dall'URL richiesto) e non la radice effettiva, mysite.com/.

C'è qualcosa che mi manca qui? Non è possibile utilizzare relativi srcs per il mio JavaScript e CSS in index.html?

Grazie per aver aiutato!

Answer 1

Nota: non ci hai mostrato il tuo aspetto HTML ma in base al tuo problema, suppongo che tu sia non utilizzando gli URL relativi dalla root del documento.

È possibile utilizzare gli URL relativi, ma dovrebbero essere relativi in base alla root del documento .

Quindi, ad esempio, potresti avere qualcosa del genere nel tuo HTML

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

.

Dovresti davvero farlo in questo modo (nota l'aggiunta dell'inizio '/' slash)

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

.

Non è qualcosa di specifico per Angularjs, è una cosa HTML, vedere Questa risposta .

Il motivo per cui il tuo browser utilizza il /e/ nell'URL è dovuto al il browser ha effettivamente richiesto una risorsa che ha il /e/ nell'URL. Il browser non sa che il tuo server ha risposto con un file che non sia nella directory /e/.

Pertanto, se si dispone di un URL relativo senza una barra in avanti all'inizio, sarà relativo al percorso o alla risorsa richiesta originale. Quello che vuoi è usare gli URL relativi con una barra all'inizio.