CODEWITHSUNDEEP
angularjsasp.net-mvc-4cachingbundlebrowser-cache
TheWommies
TheWommies

Reputation: 5072

Deploying ASP.Net MVC, Angular application download file when there is a change

I have an ASP.net application which uses AngularJs, Javascript, HTML5. The problem is everytime I deploy the browser may cache some files which results in errors because the user is not getting the latest Html and javascript files.

I understand HTML5 has a manifest file which can force files to download but is there a more efficient way to download the file when the file has actually changed?

I understand bundles only do this for Javascript files not HTML files?

I am not sure if it is angularjs related as a number of these HTML files are swapped out using ng-views and templates.

Any clues would be appreciated.

I am trying to make use of bundles but not sure if this applies to html files using AngularJs

Thanks

Upvotes: 3

Views: 1562

Answers (4)

bhantol
bhantol

Reputation: 9616

Updated answer

I am not sure if it is angularjs related as a number of these HTML files are swapped out using ng-views and templates.

Bundling reduces the number of requests to the server. For AngularJS you could use a technique at build time to inline the templates with javascript. This is a plugin for a Grunt based build system. Grunt AngularJS Template Inlining

Now you can use bundles for JS.

Other options are around browser caching and not even worry about bundling the templates. Grunt based builds have a good cache busting mechanism. Described further down. I would advise you to look at caching options and some important points below. The caching options are set at the web server level.

Rule of thumb Never cache the first page (index.html) or cache with if-modified headers. Cache every resource that is resolved from the main page.

For the referenced resources

Use Grunt based build and a plugin https://www.npmjs.org/package/grunt-cache-bust

The way this plugins works is that it will calculate the HASH of each resources referenced in the HTML and renames the file with the file.HASH making sure its references are also updated. It is also smart enough to ignore CDN based remote URLs.

You can't do anything from the server if the client does not even send you the request.

HTML5 Cache Manifest does not work on all browsers (IE<=9 :()

Upvotes: 2

jdmcnair
jdmcnair

Reputation: 1315

No, html files are not bundled in ASP.NET MVC. This can be done with js or css, but html files generally need to be directly addressable via URL.

A simple way to get Angular to load in a new version of the template is to just append a unique query string parameter onto the template URL wherever you use it in Angular:

module.directive('myDirective', function() {
    return {
        // add querystring with deploy date, or whatever
        templateUrl: '/Path/Template.html' + '?noCache=08102014', 
        controller: controller
    };
});

Of course, a cleaner, more maintainable solution would be to compile your templates to javascript strings, which could then be bundled like any other part of your Angular app. grunt-angular-templates would be one candidate for this approach.

Upvotes: 1

Jossef Harush Kadouri
Jossef Harush Kadouri

Reputation: 34207

in general, to control included web resources js/css/... cache behavior, i would suggest to manage some type of version id and append it to your including element.

for example:

<script src=".../.../app.js?<version id>" />

or

<script src=".../.../app/<version id>.js" />

or even

<script src=".../<version id>/.../app.js" />

once you deployed your new application, the browser will ignore the previews cached files and use the newer files

in case are using a source control (git/svn/...), you can use the latest commit id as the version id. otherwise, manage this version id manually (incremental number).

in case are using a build server, you can add a rule to your build script that automates this procedure for you.

Upvotes: 3

harishr
harishr

Reputation: 18055

you can configure web.config to disable caching in asp.net application

  <system.webServer>
    <staticContent>
      <clientCache cacheControlMode="DisableCache" />
    </staticContent>
  </system.webServer>

Upvotes: 2

Related Questions