Clearing partials from browser cache

[Johan Steenkamp]

I updated my app to initialize routes in callback after loading the model.

Since doing this my browser (Chrome for dev) caches partials/views very persistently. Any tips on how to force browser to reload partials/views?

Also concerned about ensuring deployed apps would use latest partials/views. 

Thanks

[Daniel Nelson]

> Since doing this my browser (Chrome for dev) caches partials/views very
> persistently. Any tips on how to force browser to reload partials/views?
>
> Also concerned about ensuring deployed apps would use latest
> partials/views.

The partials are just HTML files, so standard cache practices work.
The Rails 3.1 asset pipeline makes this a breeze.

[Johan Steenkamp]

Understand they are just html files - interesting thing is since wrapping routes in callback they really stick!

[Tyler Breisch]

My team and I have ran into this same issue.  Our solution for development while using Chrome was to open Developer Tools, and select the gear in the bottom right hand corner. Then select Network - Disable cache.

This fixed all our partial/template caching issues.

[Johan Steenkamp]

Thanks Tyler - I never noticed/clicked that icon in dev tools. Just what I needed. Thanks again.

[seanmichae...@gmail.com]

excellent advice!

[Kaique da silva]

Why does this happen? Anyone know? If it was only in the development had affected production to other users who are utilizing?

Sorry for the questions but I started recently with angularjs ...

[nxqd....@gmail.com]

this doesn't help in my case, it seems that the cache is still there :(

[Daniel Szak Ferenc]

You could always append some random string at the end of the partial, like 

ng-include="'partial.html?randomString'"

to force reload. Probably You need to put an expression in the mix like "{{randomString}}" and let angular interpolate the url...

I haven't tried it personally, but since this trick works with all kind of filetypes - why should it not work with partials?

I paste here another method i used in a project of mine, if You want to clean cache of a template programatically while running the application. In the main controller i have:

  ...

        // CacheTemplate buster.

//

// Clears on successful route change (see later) the previous page template

// from the cache, like that the application DOES SEND another request to

// the server which in turn has an opportunity to chech access-rights of 

// the user/session

$scope.tC = $templateCache;

$rootScope.$on('$routeChangeSuccess', function(event, next, current) {

switch( $location.path() ) {

case '/login' :

$window.document.title = "LOGIN";

$scope.loggedIn = false;

break;

case '/home' :

$window.document.title = "HOME";

$scope.loggedIn = true;

break;

default:

$window.document.title = "";

$scope.loggedIn = false;

break;

};

// clear cache to trigger reloading

// (server decides if has permission or not)

if (current && current.$route) {

if ($scope.tC.get(current.$route.templateUrl)) {

$scope.tC.remove(current.$route.templateUrl);

};

};

});

   ...

In this case i used a view to show the partials and did server-side authorization..

I can not explain this in detail now, but these should give You ideas to start experimenting!

Cheers, and happy coding,

daniel.

[coogan...@gmail.com]

Thank you so much! This really helped me out.

I ran into a similar problem, where I wanted to cache gets but update the cache on posts (because the data has changed).

Keeping a reference to the template cache ($scope.tC = $templateCache;) helped a lot. I didn't realize that the cache uses http routes as keys, and logging $scope.tC.info() doesn't list the keys.

I wound up running a similar check and flushing the cache before posting. This effectively updates the cache on data change.

      if ($scope.tC.get('/api/suggestions')) {

        $scope.tC.remove('/api/suggestions');

      };

Very useful! Thanks for posting.

[Daniel Szak Ferenc]

You are welcome, i'm glad it worked for You!

[Ross Jones]

Does anyone know of a grunt task that could do this?

[Johan]

I haven't tried this but you could probably setup a cache clearing route that uses the cacheFactory removeAll() and is called via grunt task:

http://docs.angularjs.org/api/ng.$cacheFactory

Having said that using the dev tools disable cache option as suggested above works well for me.

[Aleck Landgraf]

Ran into the same issues locally and with servers serving the static html partials from S3. After an hour of so of research, I found that disabling the caching in chrome works for local dev, and setting the expires header in S3 to something in the past works for production environments. 

We have a post_deploy command to run something like this but setting the date in the past. 

import mimetypes
from datetime import datetime, timedelta

from boto.s3.connection import S3Connection


AWS_ACCESS_KEY_ID = 'XXXXXXXXXXXXXXXXXXXX'
AWS_SECRET_ACCESS_KEY = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
BUCKET_NAME = 'mybucket'
PREFIX = 'mydirectory'


def main():
    conn = S3Connection(AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY)
    bucket = conn.get_bucket(BUCKET_NAME)
    key_list = bucket.get_all_keys(prefix=PREFIX)
    for key in key_list:
        content_type, unused = mimetypes.guess_type(key.name)
        if not content_type:
            content_type = 'text/plain'
        expires = datetime.utcnow()
        expires = expires.strftime("%a, %d %b %Y %H:%M:%S GMT")
        metadata = {'Expires': expires, 'Content-Type': content_type}
        print key.name, metadata
        key.copy(BUCKET_NAME, key, metadata=metadata, preserve_acl=True)


if __name__ == '__main__':
    main()