it-swarm.dev

AngularJS menonaktifkan caching parsial pada mesin dev

Saya punya masalah dengan caching parsial di AngularJS.

Di halaman HTML saya, saya punya:

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

di mana sebagian saya dimuat.

Ketika saya mengubah kode HTML di sebagian saya, browser masih memuat data lama.

Apakah ada solusi?

210
Mennion

Untuk Pengembangan, Anda juga dapat menonaktifkan cache browser - Di Alat Dev Chrome di klik kanan bawah roda gigi dan centang opsi

Nonaktifkan cache (saat DevTools terbuka)

Pembaruan: Di Firefox ada opsi yang sama di Debugger -> Pengaturan -> Bagian Lanjutan (diperiksa untuk Versi 33)

Pembaruan 2: Meskipun opsi ini muncul di Firefox, beberapa laporan tidak berfungsi. Saya sarankan menggunakan pembakar dan mengikuti jawaban hadaytullah.

201
LukeSolar

Membangun sedikit jawaban atas @ Valentyn, inilah salah satu cara untuk selalu membersihkan cache secara otomatis setiap kali konten tampilan-ng berubah:

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

Seperti disebutkan dalam jawaban lain, di sini dan di sini , cache dapat dihapus dengan menggunakan:

$templateCache.removeAll();

Namun seperti yang disarankan oleh gatoatigrado di komentar , ini hanya berfungsi jika templat html disajikan tanpa header cache.

Jadi ini bekerja untuk saya:

Dalam sudut:

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

Anda mungkin menambahkan header cache dalam berbagai cara tetapi di sini ada beberapa solusi yang cocok untuk saya.

Jika menggunakan IIS, tambahkan ini ke web.config Anda:

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

Jika menggunakan Nginx, Anda dapat menambahkan ini ke konfigurasi Anda:

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

Edit

Saya baru menyadari bahwa pertanyaan menyebutkan mesin dev tapi semoga ini masih dapat membantu seseorang ...

37
Chris Foster

Jika Anda berbicara tentang cache yang digunakan untuk cache template tanpa memuat ulang seluruh halaman, maka Anda dapat mengosongkannya dengan sesuatu seperti:

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

Dan di markup:

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

Dan tekan tombol ini untuk menghapus cache.

31

Solusi Untuk Firefox (33.1.1) menggunakan Firebug (22.0.6)

  1. Tools> Web-Tools> Firebug> Open Firebug.
  2. Dalam tampilan Firebug pergi ke tampilan "Net".
  3. Simbol menu tarik turun akan muncul di sebelah "Net" (judul tampilan).
  4. Pilih "Nonaktifkan Cache Browser" dari menu drop down.
22
hadaytullah

Cuplikan ini membantu saya menyingkirkan caching template

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

Detail cuplikan berikut dapat ditemukan di tautan ini: http://oncodesign.io/2014/02/19/safely-prevent-template-caching-in-angularjs/

19
Code Prank

Saya memposting ini hanya untuk menutup semua kemungkinan karena tidak ada solusi lain yang bekerja untuk saya (mereka melemparkan kesalahan karena dependensi template angular-bootstrap, antara lain).

Saat Anda mengembangkan/men-debug templat tertentu, Anda dapat memastikannya selalu menyegarkan dengan menyertakan stempel waktu di jalur, seperti ini:

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

Catat ?nd=' + Date.now() terakhir dalam variabel templateUrl.

16
diosney

Seperti yang orang lain katakan, mengalahkan caching sepenuhnya untuk tujuan dev dapat dilakukan dengan mudah tanpa mengubah kode: gunakan pengaturan browser atau plugin. Di luar dev, untuk mengalahkan Angular templat caching templat berbasis rute, hapus URL templat dari cache selama $ routeChangeStart (atau $ stateChangeStart, untuk Router UI) seperti yang ditunjukkan Shayan. Namun, itu TIDAK mempengaruhi cache template yang dimuat oleh ng-include, karena template itu tidak dimuat melalui router.

Saya ingin dapat memperbaiki hotfix semua templat, termasuk yang dimuat oleh ng-include, dalam produksi dan membuat pengguna menerima hotfix di browser mereka dengan cepat, tanpa harus memuat ulang seluruh halaman. Saya juga tidak khawatir tentang mengalahkan cache HTTP untuk templat. Solusinya adalah dengan mencegat setiap permintaan HTTP yang dibuat aplikasi, abaikan permintaan yang bukan untuk templat .html aplikasi saya, lalu tambahkan param ke URL templat yang berubah setiap menit. Perhatikan bahwa pemeriksaan jalur khusus untuk jalur templat aplikasi Anda. Untuk mendapatkan interval yang berbeda, ubah matematika untuk param, atau hapus% sepenuhnya untuk tidak mendapatkan caching.

// 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

Jika Anda menggunakan router UI maka Anda dapat menggunakan dekorator dan memperbarui layanan $ templateFactory dan menambahkan parameter string kueri ke templateUrl, dan browser akan selalu memuat template baru dari 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]);

Saya yakin Anda dapat mencapai hasil yang sama dengan mendekorasi metode "kapan" di $ routeProvider.

8
Aman Mahajan

Saya menemukan bahwa metode interseptor HTTP berfungsi dengan baik, dan memungkinkan fleksibilitas & kontrol tambahan. Selain itu, Anda dapat melakukan cache-bust untuk setiap rilis produksi dengan menggunakan hash rilis sebagai variabel buster.

Inilah yang tampak seperti metode dev cachebusting menggunakan 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');
}]);
3
cpreid

Berikut adalah opsi lain di Chrome.

Memukul F12 untuk membuka alat pengembang. Kemudian Sumber Daya > Penyimpanan Cache > Segarkan Cache .

enter image description here

Saya suka opsi ini karena saya tidak perlu menonaktifkan cache seperti pada jawaban lain.

1
Jess

Tidak ada solusi untuk mencegah cache browser/proxy karena Anda tidak dapat memiliki kontrol di atasnya.

Cara lain untuk memaksa konten baru kepada pengguna Anda untuk mengubah nama file HTML! Seperti persis https://www.npmjs.com/package/grunt-filerev berlaku untuk aset.

0
Thomas Decaux