it-swarm.com.de

AngularJS deaktiviert das partielle Caching auf der Entwicklungsmaschine

Ich habe Probleme beim Cachen von Partials in AngularJS.

In meiner HTML-Seite habe ich:

<body>
 <div ng-view></div>
<body>

wo meine partials geladen sind.

Wenn ich HTML-Code in meinem Teil ändere, lädt der Browser immer noch alte Daten.

Gibt es eine Problemumgehung?

210
Mennion

Für die Entwicklung können Sie auch den Browser-Cache deaktivieren - Klicken Sie in Chrome Dev Tools unten rechts auf das Zahnrad und aktivieren Sie die Option

Cache deaktivieren (während DevTools geöffnet ist)

Update: In Firefox gibt es die gleiche Option in Debugger -> Einstellungen -> Erweiterter Bereich (geprüft für Version 33)

Update 2: Obwohl diese Option in Firefox erscheint, funktionieren einige Berichte nicht. Ich schlage vor, Feuerkäfer zu verwenden und Hadaytullah zu folgen.

201
LukeSolar

Aufbauend auf der Antwort von @Valentyn, gibt es eine Möglichkeit, den Cache immer dann automatisch zu leeren, wenn sich der Inhalt der ng-Ansicht ändert:

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

Wie in den anderen Antworten hier und hier erwähnt, kann der Cache geleert werden, indem Folgendes verwendet wird:

$templateCache.removeAll();

Wie von gatoatigrado in comment vorgeschlagen, scheint dies jedoch nur zu funktionieren, wenn die HTML-Vorlage ohne Cache-Header bereitgestellt wurde.

Also das funktioniert bei mir:

Im Winkel:

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

Sie können Cache-Header auf verschiedene Arten hinzufügen, aber hier sind einige Lösungen, die für mich funktionieren.

Wenn Sie IIS verwenden, fügen Sie dies Ihrer web.config hinzu:

<location path="scripts/app/views">
  <system.webServer>
    <staticContent>
      <clientCache cacheControlMode="DisableCache" />
    </staticContent>
  </system.webServer>
</location>

Wenn Sie Nginx verwenden, können Sie dies zu Ihrer Konfiguration hinzufügen:

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

Bearbeiten

Ich habe gerade festgestellt, dass die Frage dev Maschine erwähnt, aber hoffentlich kann dies noch jemandem helfen ...

37
Chris Foster

Wenn es sich um einen Cache handelt, der zum Zwischenspeichern von Vorlagen ohne erneutes Laden der gesamten Seite verwendet wurde, können Sie ihn wie folgt leeren:

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

Und im Aufschlag:

<button ng-click='clearCache()'>Clear cache</button>

Drücken Sie diese Taste, um den Cache zu löschen.

31

Lösung für Firefox (33.1.1) mit Firebug (22.0.6)

  1. Extras> Web-Tools> Firebug> Firebug öffnen.
  2. Wechseln Sie in den Firebug-Ansichten zur Ansicht "Net".
  3. Neben "Net" (Titel der Ansicht) wird ein Dropdown-Menüsymbol angezeigt.
  4. Wählen Sie "Disable Browser Cache" aus dem Dropdown-Menü.
22
hadaytullah

Dieses Snippet hat mir geholfen, das Caching von Vorlagen aufzuheben

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

Die Details des folgenden Snippets finden Sie unter diesem Link: http://oncodesign.io/2014/02/19/safely-prevent-template-caching-in-angularjs/

19
Code Prank

Ich poste dies nur, um alle Möglichkeiten abzudecken, da keine der anderen Lösungen für mich funktioniert hat (sie haben Fehler unter anderem aufgrund von Abhängigkeiten zwischen Angular-Bootstrap-Vorlagen verursacht).

Während Sie eine bestimmte Vorlage entwickeln/debuggen, können Sie sicherstellen, dass sie immer aktualisiert wird, indem Sie einen Zeitstempel in den Pfad einfügen.

       $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();
            };
          }
        });

Beachten Sie das letzte ?nd=' + Date.now() in der Variablen templateUrl.

16
diosney

Wie andere bereits gesagt haben, kann das vollständige Deaktivieren des Cachings für Entwicklungszwecke leicht durchgeführt werden, ohne den Code zu ändern: Verwenden Sie eine Browsereinstellung oder ein Plugin. Um Angular Vorlagen-Caching für routenbasierte Vorlagen zu umgehen, entfernen Sie außerhalb von dev die Vorlagen-URL während $ routeChangeStart (oder $ stateChangeStart für UI Router) aus dem Cache, wie Shayan gezeigt hat Beeinflusst NICHT das Zwischenspeichern von Vorlagen, die von ng-include geladen wurden, da diese Vorlagen nicht über den Router geladen werden.

Ich wollte in der Lage sein, jede Vorlage, einschließlich der von ng-include geladenen, in der Produktion zu hotfixen, und Benutzer sollten den Hotfix schnell in ihrem Browser erhalten, ohne die gesamte Seite neu laden zu müssen. Ich mache mir auch keine Sorgen, das HTTP-Caching für Vorlagen zu umgehen. Die Lösung besteht darin, alle HTTP-Anforderungen der App abzufangen, diejenigen zu ignorieren, die nicht für die HTML-Vorlagen meiner App gelten, und der URL der Vorlage einen Parameter hinzuzufügen, der sich jede Minute ändert. Beachten Sie, dass die Pfadprüfung spezifisch für den Pfad der Vorlagen Ihrer App ist. Um ein anderes Intervall zu erhalten, ändern Sie die Mathematik für den Parameter oder entfernen Sie das% vollständig, um kein Caching zu erhalten.

// 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;
    }
11
bradw2k

Wenn Sie einen UI-Router verwenden, können Sie einen Decorator verwenden und den Dienst $ templateFactory aktualisieren und einen Abfragezeichenfolgenparameter an templateUrl anhängen. Der Browser lädt dann immer die neue Vorlage vom Server.

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]);

Ich bin sicher, Sie können das gleiche Ergebnis erzielen, indem Sie die "when" -Methode in $ routeProvider dekorieren.

8
Aman Mahajan

Ich fand, dass die HTTP-Interceptor-Methode ziemlich gut funktioniert und zusätzliche Flexibilität und Kontrolle ermöglicht. Darüber hinaus können Sie Busts für jede Produktionsversion zwischenspeichern, indem Sie einen Release-Hash als Buster-Variable verwenden.

So sieht die Cachebusting-Methode von dev mit Date aus.

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');
}]);
3
cpreid

Hier ist eine weitere Option in Chrome.

Schlagen F12 Entwickler-Tools zu öffnen. Dann Ressourcen > Cache-Speicher > Caches aktualisieren .

enter image description here

Diese Option gefällt mir, weil ich den Cache nicht wie in anderen Antworten deaktivieren muss.

1
Jess

Es gibt keine Lösung, um das Browser-/Proxy-Caching zu verhindern, da Sie nicht die Kontrolle darüber haben können.

Die andere Möglichkeit, frischen Inhalt für Ihre Benutzer zu erzwingen, besteht darin, die HTML-Datei umzubenennen! Genau wie https://www.npmjs.com/package/grunt-filerev für Assets.

0
Thomas Decaux