javascript - 使 Angular JS 离线工作

Question

我正在开发一个单页应用程序，在 AngularJS 的帮助下，我是新手我之前问过同样的问题，但没有得到任何答案，所以我改写我的问题并再次提问

问题:为此，我需要做的是使我的网络应用程序能够离线工作，渲染为 View 的 html 文件(例如 home.html)应该以某种方式包含在 index.html 中，因此当单击某些链接时应该不需要访问 html 文件而不是同一页面的一部分，例如将呈现潜水，我应该对项目进行哪些修改才能完成此操作

目前我制作了不同的 html 文件并在渲染 View 时将它们用作模板，应用程序的结构是这样的:

  - index.html          
   - pages              
    ----- home.html
    ----- profile.html

这里是配置路由、 Controller 和 View 的代码

  var formApp = angular.module('formApp', ['ngRoute']);

  formApp.config(function($routeProvider) {
    $routeProvider
       .when('/', {
           templateUrl : 'main',
           controller  : 'mainController'
        })
    .when('/profile', {
        templateUrl : 'profile',
        controller  : 'profileController'
    })
  }); 

例如，我的 main.html 文件是这样的:

 <div class="jumbotron text-center">
     <h1>Main Page</h1>

     <p>{{ message }}</p>
  </div>

在 index.html 的某处我有

         <div ng-view>
              {{ message }}
          </div>

代码运行正常，目前一切正常

Answer 1

要使您的应用程序离线 工作，您必须使用html5 缓存 list 缓存每个文件。甚至 .html 文件、图像、css，一切...

native “旧”缓存在这里不起作用，因为它仍然需要与服务器通信以获得“304 Not Modified”http 代码。

list 删除了这一步并且甚至不向服务器请求资源。

list 示例:

CACHE MANIFEST
/angular.js
/index.html
/page/home.html
/page/profile.html
NETWORK: 
*

如何包含和使用缓存 list 检查:http://www.w3schools.com/html/html5_app_cache.asp

用于调试:

清除应用缓存 在 chrome 下输入 url "chrome://appcache-internals/"

---

编辑:由于评论和题外话

与其将 html 代码放在许多自己的 html 文件中，不如将它们包含在 index.html 中，如下所示:

<script type="text/ng-template" id="one.html">
     <div>This is first template</div>
</script>

然后你的 templateURL 是没有子路径的“one.html”。

检查文档:https://docs.angularjs.org/api/ng/directive/script

提示:

你不需要在那里放置任何路径。在渲染阶段，angularjs 会将每个 html 文件存储在 $templateCache 中，位于那些脚本元素中的 id 下。