浏览器刷新后,angularjs代码更改不会显示

Question

任何时候,我在.hmtl文件或.js文件中进行代码更改,浏览器仍会呈现旧代码,并且我的新代码更改不会显示在浏览器结果中.

例如,我在.html文件中添加以下两行代码.

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

然后我做以下事情:

1. 在VS2013中,右键单击我的项目并在浏览器中查看(IE或Chrome).
2. 登录我的应用程序.
3. 转到相应的页面,我看到旧的html文件的渲染.我没有看到新添加的2 div元素.
4. 我甚至点击f5刷新浏览器但仍然没有运气.

我究竟做错了什么？

Answer 1

在浏览器中点击F12以显示开发人员工具.禁用缓存.重新加载您的页面.

Answer 2

除了使用Dev Tools确保禁用缓存之外,您还可以编辑Web.config文件并告诉IIS不要缓存Angular文件:

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

我的Angular根目录是app/.您可能需要根据文件结构进行修改.

Answer 3

仅限TypeScript!

在tsconfig.json中添加...

"compileOnSave": true, 

Answer 4

尝试使用开发工具禁用缓存：

https://developer.chrome.com/devtools/docs/settings#general