App locale a pagina singola pura con AngularJS e il suo RouteProvider

Question

Attualmente sto cercando di creare una "app web" che scappa da un'unità flash, quindi non ci può essere nessun altro ambiente che richiede il lancio di Chrome con alcune opzioni di avvio e un percorso per il file index.html sull'unità flash.

Ho difficoltà a far funzionare angularJS quando si caricano file con il protocollo file: // e non tramite un server web.

L'ho ottenuto per caricare risorse locali (come un video) impostando la modalità html5 su true ma al momento non riesco a utilizzare il provider di route.

Ecco cosa ho: var testApp = angular.module ("testApp", ['angular-underscore', "ngRoute", "com.2fdevs.videogular"]);

testApp.config(function($locationProvider, $routeProvider) { 
    $locationProvider.html5Mode(true); 
    $routeProvider.when('/', {template: '/views/MainView.html', controller: "VideoPlayerController" }) 
.otherwise({redirectTo:'/'});; 
}); 

ogni volta che carico il mio file index.html in Chrome facendo doppio clic sul file, l'URL inizia con come "file: //". Ciò si verifica anche quando avvio tramite riga di comando con l'opzione essenziale "" --allow-file-access-from-files ".

Come si ottiene il routeProvider per funzionare come previsto con file: //? Attualmente non riconosce nemmeno il "altrimenti" percorso a meno che aggiungo il seguente al mio tag head in index.html

<base href="/index.html"> 

Ma che finisce con

file:/// 

nel campo URL di Chrome . Tutte le altre risorse non riescono a caricare. Di seguito è riportato un esempio dell'errore che sto vedendo con un solo controller combinato.

GET file:///index.html net::ERR_FILE_NOT_FOUND 

Grazie COSÌ! (So ​​che tutti i miei problemi scomparirebbero se fossi disposto a utilizzare un server web ma non sono autorizzato a questo progetto al momento)

Answer 1

È possibile ottenere il lato angolare delle cose per funzionare, utilizzando un dinamico base tag:

<script>document.write('<base href="' + document.location + '" />');</script> 

come lo fa Plunkr. È quindi possibile rimuovere il primo / dal percorso dei modelli per renderli relativi alla base e i tentativi angolari di recuperare il modello dalla posizione corretta. Tuttavia, i requisiti di sicurezza del browser vengono soddisfatti, almeno in Chrome, che considera le richieste Ajax su file://, anche se da file://, come dominio incrociato.

Escludendo eventuali modifiche alle impostazioni di sicurezza del browser, la soluzione è scrivere (o avere un processo di compilazione di tipo Grunt per creare) i modelli direttamente nel JS, quindi Angular non deve effettuare alcuna richiesta Ajax . Per esempio

app.run(function($templateCache) { 
    $templateCache.put('views/MainView.html', 'In the MainView partial <strong>{{message}}</strong>'); 
}); 

ho trovato anche il routing HTML5 non sembra lavorare con file://, in modo che deve essere disabilitato.

Ho costruito un simple plunkr that shows this, che funziona anche quando scaricato, almeno su un Mac con Chrome. Ho anche creato uno slightly more complicated plunkr, che mostra che è possibile navigare tra percorsi come #/ < ->#/inner, quando scaricato in un file.