Problems refreshing angularjs changes on production server

Question

I have a recurring issue that occurs when I make changes to my angularjs app. The problem is that I have to refresh the page if I want to seed the changes that I have made. This is a problem, because I don't want my users to have to refresh the page (they may not know to do this). They may think the site is broken. Is there some kind of angular directive or process that I can follow that will allow my UI changes to be reflected on my production server without my users having to refresh the page?

Answer 1

There are a couple of solutions you could look at,

1. There is a similar answer to your question here:

AngularJS disable partial caching on dev machine

To quote the accepted answer on that post:

"here's one way to always automatically clear the cache whenever the ng-view content changes"

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

2. A non angular solution may also be found here:

Force browser to clear cache

To quote the best answer on that post (Fermin's answer):

If it's to view css or js changes one way is to append _versionNo to the css/js file for each release. E.g.

script_1.0.css script_1.1.css script_1.2.css etc.

You can check out this link to see how it could work.

I hope these help.

EDIT. To respond to your comment, I'm sorry the above hasn't worked.

Perhaps you could try implementing a websockets based approach, similar to Trello, whereby after a certain amount of time you ask the user to update their page to receive new updates to the system or to refresh if their socket connection has timed out? Depending on your setup you may find this tutorial useful: http://www.html5rocks.com/en/tutorials/frameworks/angular-websockets/