angularjs code changes do not show up after browser refresh

Question

Any time, I make code changes in .hmtl file or the .js file, the browser still renders the old code and my new code changes don't show up in the browser result.

For example, I add the following 2 lines of code in .html file.

    <div class="control-group">         <label class="control-label">First Name</label>         <div class="controls readonly">             {{profile.FirstName}}         </div>     </div>      <div class="control-group">         <label class="control-label">Last Name</label>         <div class="controls readonly">             {{profile.LastName}}         </div>     </div> 

Then I do the following:

1. In VS2013, right click on my project and view in browser (IE or Chrome).
2. Login to my application.
3. Go the respective page and I see the rendering of the old html file. I do not see the newly added 2 div elements rendered at all.
4. I even hit f5 to refresh the browser but still no luck.

What am I doing wrong?

Answer 1

Hit F12 in your browser to bring up the Developer Tools. Disable the Cache. Reload your page.

Answer 2

Besides using Dev Tools to make sure the cache is disabled, you can edit your Web.config file and tell IIS to not cache your Angular files:

<configuration>    <!-- Disable IIS caching for directories containing Angular templates and scripts -->   <location path="app">     <system.webServer>       <staticContent>         <clientCache cacheControlMode="DisableCache"/>       </staticContent>     </system.webServer>   </location>  ... </configuration> 

My Angular root directory is app/. You may need to modify according to your file structure.