AngularJS desabilita o cache parcial na máquina dev

Eu tenho problema com parciais de cache em AngularJS.

Na minha página HTML eu tenho:

 

onde minhas parciais estão carregadas.

Quando eu mudo o código HTML no meu parcial, o navegador ainda carrega dados antigos.

Existe alguma solução?

Para o desenvolvimento, você também pode desativar o cache do navegador – no Chrome Dev Tools, na parte inferior direita, clique na engrenagem e marque a opção

Desativar o cache (enquanto DevTools está aberto)

Atualização: No Firefox há a mesma opção no Debugger -> Settings -> Advanced Section (verificada para a versão 33)

Atualização 2: Embora esta opção apareça no Firefox, alguns relatórios não funcionam. Eu sugiro usar o firebug e seguir a resposta hadaytullah.

Baseando-se na resposta do @ Valentyn, aqui está uma maneira de sempre limpar automaticamente o cache sempre que o conteúdo do ng-view for alterado:

 myApp.run(function($rootScope, $templateCache) { $rootScope.$on('$viewContentLoaded', function() { $templateCache.removeAll(); }); }); 

Como mencionado nas outras respostas, aqui e aqui , o cache pode ser limpo usando:

 $templateCache.removeAll(); 

No entanto, como sugerido por gatoatigrado no comentário , isso só parece funcionar se o modelo html foi servido sem headers de cache.

Então isso funciona para mim:

Em angular:

 app.run(['$templateCache', function ( $templateCache ) { $templateCache.removeAll(); }]); 

Você pode estar adicionando headers de cache de várias maneiras, mas aqui estão algumas soluções que funcionam para mim.

Se estiver usando o IIS , adicione isso ao seu web.config:

        

Se estiver usando o Nginx, você pode adicionar isso à sua configuração:

 location ^~ /scripts/app/views/ { expires -1; } 

Editar

Acabei de perceber que a questão mencionada dev máquina, mas espero que isso ainda pode ajudar alguém …

Se você está falando sobre o cache que está sendo usado para o cache de modelos sem recarregar a página inteira, você pode esvaziá-lo por algo como:

 .controller('mainCtrl', function($scope, $templateCache) { $scope.clearCache = function() { $templateCache.removeAll(); } }); 

E na marcação:

E pressione este botão para limpar o cache.

Solução para o Firefox (33.1.1) usando o Firebug (22.0.6)

  1. Ferramentas> Ferramentas da Web> Firebug> Abrir o Firebug.
  2. Nas visualizações do Firebug, vá para a visualização “Net”.
  3. Um símbolo do menu suspenso aparecerá ao lado de “Net” (título da exibição).
  4. Selecione “Desativar cache do navegador” no menu suspenso.

Esse trecho me ajudou a me livrar do cache de modelos

 app.run(function($rootScope, $templateCache) { $rootScope.$on('$routeChangeStart', function(event, next, current) { if (typeof(current) !== 'undefined'){ $templateCache.remove(current.templateUrl); } }); }); 

Os detalhes do trecho a seguir podem ser encontrados neste link: http://oncodesign.io/2014/02/19/safely-prevent-template-caching-in-angularjs/

Estou postando isso apenas para cobrir todas as possibilidades, já que nenhuma das outras soluções funcionou para mim (eles lançaram erros devido às dependencies do modelo bootstrap angular, entre outros).

Enquanto você está desenvolvendo / depurando um modelo específico, você pode garantir que ele seja sempre atualizado incluindo um timestamp no caminho, como este:

  $modal.open({ // TODO: Only while dev/debug. Remove later. templateUrl: 'core/admin/organizations/modal-selector/modal-selector.html?nd=' + Date.now(), controller : function ($scope, $modalInstance) { $scope.ok = function () { $modalInstance.close(); }; } }); 

Observe o final ?nd=' + Date.now() na variável templateUrl .

Como outros já disseram, derrotar o cache completamente para fins de desenvolvimento pode ser feito facilmente sem alterar o código: use uma configuração de navegador ou um plugin. Fora do dev, para impedir o armazenamento em cache de gabaritos de modelos angulares, remova o URL do modelo do cache durante $ routeChangeStart (ou $ stateChangeStart, para o roteador de UI), como Shayan mostrou. No entanto, isso NÃO afeta o armazenamento em cache de modelos carregados por ng-include, porque esses modelos não são carregados através do roteador.

Eu queria ser capaz de corrigir qualquer modelo, incluindo aqueles carregados por ng-include, em produção e fazer com que os usuários recebam o hotfix em seu navegador rapidamente, sem precisar recarregar a página inteira. Eu também não estou preocupado em derrotar o cache de HTTP para modelos. A solução é interceptar todas as solicitações HTTP que o app faz, ignorar aquelas que não são dos modelos .html do meu aplicativo e adicionar um parâmetro ao URL do modelo que muda a cada minuto. Observe que a verificação de caminho é específica para o caminho dos modelos do seu aplicativo. Para obter um intervalo diferente, altere a matemática do parâmetro ou remova o% completamente para não obter armazenamento em cache.

 // this defeats Angular's $templateCache on a 1-minute interval // as a side-effect it also defeats HTTP (browser) caching angular.module('myApp').config(function($httpProvider, ...) { $httpProvider.interceptors.push(function() { return { 'request': function(config) { config.url = getTimeVersionedUrl(config.url); return config; } }; }); function getTimeVersionedUrl(url) { // only do for html templates of this app // NOTE: the path to test for is app dependent! if (!url || url.indexOf('a/app/') < 0 || url.indexOf('.html') < 0) return url; // create a URL param that changes every minute // and add it intelligently to the template's previous url var param = 'v=' + ~~(Date.now() / 60000) % 10000; // 4 unique digits every minute if (url.indexOf('?') > 0) { if (url.indexOf('v=') > 0) return url.replace(/v=[0-9](4)/, param); return url + '&' + param; } return url + '?' + param; } 

Se você estiver usando o roteador de interface do usuário, poderá usar um decorador e atualizar o serviço $ templateFactory e append um parâmetro de string de consulta a templateUrl, e o navegador sempre carregará o novo modelo do servidor.

 function configureTemplateFactory($provide) { // Set a suffix outside the decorator function var cacheBust = Date.now().toString(); function templateFactoryDecorator($delegate) { var fromUrl = angular.bind($delegate, $delegate.fromUrl); $delegate.fromUrl = function (url, params) { if (url !== null && angular.isDefined(url) && angular.isString(url)) { url += (url.indexOf("?") === -1 ? "?" : "&"); url += "v=" + cacheBust; } return fromUrl(url, params); }; return $delegate; } $provide.decorator('$templateFactory', ['$delegate', templateFactoryDecorator]); } app.config(['$provide', configureTemplateFactory]); 

Tenho certeza de que você pode obter o mesmo resultado decorando o método “when” em $ routeProvider.

Descobri que o método de interceptor HTTP funciona muito bem e permite flexibilidade e controle adicionais. Além disso, você pode fazer um cache-bust para cada release de produção usando um hash de release como a variável buster.

Aqui está o que o método dev cachebusting se parece com a Date .

 app.factory('cachebustInjector', function(conf) { var cachebustInjector = { request: function(config) { // new timestamp will be appended to each new partial .html request to prevent caching in a dev environment var buster = new Date().getTime(); if (config.url.indexOf('static/angular_templates') > -1) { config.url += ['?v=', buster].join(''); } return config; } }; return cachebustInjector; }); app.config(['$httpProvider', function($httpProvider) { $httpProvider.interceptors.push('cachebustInjector'); }]); 

Aqui está outra opção no Chrome.

Pressione F12 para abrir as ferramentas do desenvolvedor. Em seguida, Recursos > Armazenamento em Cache > Atualizar Caches .

insira a descrição da imagem aqui

Eu gosto dessa opção porque não preciso desativar o cache como em outras respostas.

Não há solução para impedir o cache do navegador / proxy, já que você não pode ter o controle sobre ele.

A outra maneira de forçar novos conteúdos para seus usuários é renomear o arquivo HTML! Exatamente como https://www.npmjs.com/package/grunt-filerev faz por ativos.

Atualizar documento a cada 30 segundos:

    

Atributo http-equiv HTML de w3schools