Javascript 使Angular JS脱机工作

在AngularJS的帮助下，我正在开发一个单页应用程序，我是新手 我以前问过同样的问题，但没有得到任何答案，所以我重新措辞我的问题，然后再问一遍

问题是： 我需要做的是使我的web应用程序能够脱机工作。为此，呈现为视图的html文件（例如home.html）应以某种方式包含在index.html中，因此，当单击某些链接时，不需要访问html文件，而只需呈现同一页面的一部分，例如一个俯冲，我应该对project进行哪些修改才能完成此任务

当时我制作了不同的html文件，并在渲染视图时将其用作模板， app的结构如下：

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

主页
{{message}}

َ在index.html中的某个地方

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

{{message}}

---

代码工作正常，目前一切正常

要使应用程序脱机工作，您必须使用html5缓存清单来缓存每个文件。甚至是.html文件、图像、css等等

本机“旧”缓存在这里无法工作，因为它仍然需要与服务器通信才能使用“304未修改”http代码

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

清单示例：

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

如何包括和使用缓存清单检查：

对于调试：

清除应用缓存在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”

检查文档：

提示：

---

您不需要在那里放置任何路径。在渲染阶段，angularjs会将每个html文件存储在脚本元素中的

$templateCache

下的

id

。

这可能不是100%适用于您。取决于您使用的解决方案或平台。。。但我现在正在开发一个原型应用程序，内置于Angular和Node中

虽然这也是我第一次尝试这样的事情。。。例如预先缓存所有页面。这似乎很有效

在构建阶段，我的所有页面都会转换为缓存友好的格式。但在我的解决方案中，它们仍然是常规的html页面

home.tpl.html

<div class="well home-menu">
    HOME
</div>

所有这些魔法都是出于

glunt.loadNpmTasks（'grunt-html2js'）

---

…我确实相信，可以通过各种不需要咕噜声的其他方式实现这种效果。例如，在js文件中手动创建模板。。。但我不会梦想推荐这条路线，因为它很快就会变成一场噩梦

不太清楚你想要什么。。。如何在my index.html中包含模板？然后可能会帮助您如果您询问如何运行本地服务器，您可以阅读此问题的答案：@nilsK抱歉，如果不够清楚，我做了一些修改，让我知道它现在是否更可读谢谢您的回答它很有帮助，所以我投票通过了它，但仍然不确定它是否解决了我的问题，tempalteUrl in routes是否有任何方法可以解决index.html文件中的某个div而不是另一个html文件（例如，借助某种javascript或角度模板），因为这样我认为至少应该下载一次文件（第一次下载后，它将脱机工作）但是我需要这些模板从一开始就包含在index.html文件中是的，你需要访问页面一次，以缓存所有内容。是的，您可以将所有部分html文件放入index.html，但这无法使其脱机访问，因为您需要请求url/服务器。谢谢，我终于让它工作了，在chrome中删除缓存的提示非常有用，谢谢你的回答，我稍后会尝试以某种方式让它工作，并让你知道这是一个包含我提到的这个框架的解决方案的示例。

angular.module('templates', ['home.tpl.html']);

angular.module("home.tpl.html", []).run(["$templateCache", function($templateCache) {
    $templateCache.put("home.tpl.html",
      "<div class=\"well home-menu\">\n" +
         "HOME\n"+
      "</div>");
 }]);

angular.module('myApp.home', ['templates'])
.config(function ($stateProvider) {
  $stateProvider
    .state('app.home', {
      url: '/home',
      templateUrl: 'home.tpl.html',
      controller: 'HomeController'
    });
})
.controller('HomeController', function ($scope) {
    //do something
});