rende Angular JS funziona offline

Question

Sto sviluppando un'applicazione a singola pagina, con l'aiuto di AngularJS e io sono nuovo ad esso Ho già fatto la stessa domanda ma non ho ricevuto alcuna risposta, quindi sto riformulando la mia domanda e la chiedo di nuovo

LA DOMANDA: Quello che devo fare è rendere la mia app Web abilitata a lavorare offline per questo scopo i file html che sono resi come view (ad esempio home.html) dovrebbero essere inclusi in qualche modo nell'indice. html, quindi quando clicchi su alcuni link non ci dovrebbe essere bisogno di avere accesso ad un file html invece una parte della stessa pagina per esempio verrà reso un immersione, quali modifiche dovrei apportare al progetto per ottenere questo risultato

al momento ho fatto diversi file html e li usano come modelli durante il rendering di vista, la struttura di applicazione è simile a questo:

- index.html   
    - pages    
    ----- home.html 
    ----- profile.html 

qui è il codice per config i percorsi e controller e viste

var formApp = angular.module('formApp', ['ngRoute']); 

    formApp.config(function($routeProvider) { 
    $routeProvider 
     .when('/', { 
      templateUrl : 'main', 
      controller : 'mainController' 
     }) 
    .when('/profile', { 
     templateUrl : 'profile', 
     controller : 'profileController' 
    }) 
    }); 

e e il mio file main.html ad esempio è come questo:

<div class="jumbotron text-center"> 
    <h1>Main Page</h1> 

    <p>{{ message }}</p> 
    </div> 

e da qualche parte nel index.html ho

  <div ng-view> 
       {{ message }} 
      </div> 

Il codice funziona correttamente e tutto è andato bene in questo momento

Answer 1

Per rendere il vostro lavoro di applicazione offline, è necessario memorizzare nella cache tutti i file con la cache HTML5 manifesta. Anche il .html file, immagini, css, tutto ...

Il nativo caching "vecchio" non funziona qui, perché richiede ancora comunicare con il server di avere il "304 Not Modified "codice http.

Il manifest rimuove questo passaggio e non richiede nemmeno il server per le risorse.

Un esempio palese:

CACHE MANIFEST 
/angular.js 
/index.html 
/page/home.html 
/page/profile.html 
NETWORK: 
* 

Come includono e uso cache di controllo manifestare: http://www.w3schools.com/html/html5_app_cache.asp

Per il debugging:

Cancellazione di una cache app sotto cromo Inserisci URL "chrome: // appcache-internals /"

---

EDIT: A causa di commentare e fuori tema

Invece di mettere il codice html in molti file codice HTML, è possibile includere nell'indice.html come questo:

<script type="text/ng-template" id="one.html"> 
    <div>This is first template</div> 
</script> 

Allora la vostra templateURL è "uno.html" senza sottotracciato.

Controlla i documenti: https://docs.angularjs.org/api/ng/directive/script

Suggerimento:

Non avete bisogno di collocare i percorsi lì. Durante la fase di rendering, angularjs memorizzerà ogni file html nello $templateCache sotto il suo id inserito in quegli elementi di script.

Answer 2

Questo potrebbe non essere del 100% applicabile a voi. A seconda della soluzione & o della piattaforma che stai utilizzando ... Ma ho un'applicazione di prototipo su cui sto lavorando attualmente, costruita in Angular e Node.

Anche se questo è stato anche il mio primo tentativo di qualcosa di simile ... EG memorizza tutte le pagine nella cache in anticipo. Questo sembra funzionare abbastanza bene.

Tutte le mie pagine vengono convertite in un formato cache friendly durante la fase di costruzione. Ma nella mia soluzione, sono ancora pagine html regolari.

home.tpl.html

<div class="well home-menu"> 
    HOME 
</div> 

templates.js

angular.module('templates', ['home.tpl.html']); 

angular.module("home.tpl.html", []).run(["$templateCache", function($templateCache) { 
    $templateCache.put("home.tpl.html", 
     "<div class=\"well home-menu\">\n" + 
     "HOME\n"+ 
     "</div>"); 
}]); 

regolatore

angular.module('myApp.home', ['templates']) 
.config(function ($stateProvider) { 
    $stateProvider 
    .state('app.home', { 
     url: '/home', 
     templateUrl: 'home.tpl.html', 
     controller: 'HomeController' 
    }); 
}) 
.controller('HomeController', function ($scope) { 
    //do something 
}); 

tutta questa magia per gentile concessione di html2js

grunt.loadNpmTasks ('grunt-html2js');

... Credo che sia possibile ottenere questo effetto in vari altri modi che non richiedono grugnito. Ad esempio, creando manualmente i modelli nel file js ... ma non mi sognerei di raccomandare quel percorso, perché potrebbe trasformarsi in un incubo in fretta