使Angular JS脱机工作

Question

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

问题：我需要做的是使我的Web应用程序能够离线运行，为此，应以某种方式将呈现为视图的html文件（例如home.html）包括在index.html中，因此，单击一些链接应该不需要访问html文件，而无需访问同一页面的一部分，例如将显示一个潜水，我应该对项目进行哪些修改才能完成此操作

目前，我制作了不同的html文件，并在渲染视图时将它们用作模板，应用程序的结构如下所示：

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

这是用于配置路由，控制器和视图的代码

  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缓存清单 来缓存每个文件。甚至.html文件，图像，CSS等等…

本地 “旧”缓存 在这里 无法使用 ，因为它仍然需要 与服务器 进行 通信 才能获得“ 304 Not Modified”
http代码。

清单删除了此步骤， 甚至不向 服务器请求资源。

一个示例清单：

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

如何 包括 和 使用
缓存清单检查：http :
//www.w3schools.com/html/html5_app_cache.asp

用于调试：

*在chrome下 *清除应用程序缓存 ，输入网址“ chrome：// appcache-internals /”

编辑 ：由于评论和主题

您可以将它们包含在index.html中，而不是将html代码放置在许多自己的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下的html文件中id。