Cancella Angular JS templateCache una volta (per ciascuna distribuzione)

Question

Questo numero AngularJS disable partial caching on dev machine suggerisce di utilizzare $templateCache.removeAll() per cancellare i modelli di cache. Tuttavia, cosa succede se si desidera attivare questa volta ogni ciclo di distribuzione per consentire ai browser dei visitatori di aggiornare/aggiornare il modello? Il nostro problema era che alcuni browser non stavano aggiornando i file html del modello, avremmo finito con il nuovo CSS mescolato con il vecchio HTML. Non voglio che questa funzione si accenda sempre, ciò per sconfiggere il punto dei modelli di cache all'inizio (giusto?).

Per la domanda del titolo, che cosa è un metodo consigliato per cancellare $ templateCache "una volta", per esempio, alcune idee che ho scricchiolava:

• fa angolare ha un metodo interno di rilevare se il file di modello è cambiato ? E quindi se lo si "aggiorna".
• Angular ha una "versione" o una "data" interna che è possibile confrontare e aggiungere una funzione condizionale alla funzione di rimozione removeAll()?
• $ templateCache sa se stesso per aggiornare? Quali sono state le intenzioni del creatore di Angular nel forzare templateCache su di noi se i file HTML sono destinati a cambiare gli straordinari e sono offerti a più browser.

Non voglio usare grunt per aggiungere overhead del flusso di lavoro per qualcosa che accade periodicamente, né per tagliare i modelli di file html in variabili. (Is this a good method for template cache busting in angular?)

L'alternativa che posso vedere è semplicemente aggiungere e rimuovere manualmente il codice removeAll(), sarebbe stupido.

Answer 1

Abbiamo deciso di aggiungere semplicemente la versione di timestamp UNIX ai file modificati come file.php?v=154325232. Il motivo per cui non stavamo effettivamente utilizzando Angular templateCache, in quanto non stavamo memorizzando i dati del modello stesso all'interno di templateCache. Pensavo che Angular memorizzasse automaticamente tutti i file modello di direttive caricati asincroni in templateCache, il che non è vero, devi usare esplicitamente templateCache per ottenere un file (buon tutorial su quello https://thinkster.io/templatecache-tutorial).

Quindi la nostra soluzione è solo noioso vecchio controllo delle versioni, il che è più comprensibile per le intestazioni dei browser e per i siti Web non scalabili, va bene.

$modifiedTs = filemtime($filename); 
if ($modifiedTs != $lastModificationTs){ 
    echo "$filename?v=" . time(); 
} 

How to check if a file has changed?

infine il modo in cui ho letto templateCache, la sua non è destinato a salvare i dati tra le sessioni del browser piuttosto il suo un servizio di cache durante la sessione. Non ha nulla a che fare con la cache del browser, piuttosto Angular lo memorizza internamente. Quindi è pensato per i siti web che navigano e caricano dinamicamente gli URL (ad esempio: non un vero aggiornamento della pagina ma un trucco AJAX), ovvero la maggior parte dei siti Web di Google oggi.

• Prevent browser cache of angular templates
• Best way to manually clear out $templateCache in AngularJS

Answer 2

Il metodo popolare corrente è creare un'attività utilizzando un modulo nodo che preprocessa modelli angolari in un file in cui si aggiunge nella pila js.

È possibile installare gulp-ng-html2js e renderlo un compito ingurgitato. Ciò produrrebbe un file dire templates.js, che poi aggiungerai alla testa.
https://www.npmjs.com/package/gulp-ng-html2js

Quindi chiamarlo nell'app come dipendenza del modulo. app.module('myApp',['templates']);

Quindi, prima di ogni distribuzione, eseguire questo task gulp. E se necessario aggiungi una stringa di query dell'interruttore di cache templates.js?v=123