使 Angular JS 离线工作

Question

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

问题： 我需要做的是让我的网络应用程序启用离线工作为此目的呈现为视图的html文件（例如home.html）应该以某种方式包含在index.html中，所以当点击一些链接时应该不需要访问 html 文件，而是访问同一页面的一部分，例如将呈现潜水，我应该对项目进行哪些修改才能完成此操作

目前我制作了不同的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>

َ我在 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下输入url“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下的id下，放在那些脚本元素中。

Answer 2

这可能并非 100% 适用于您。取决于您使用的解决方案和平台...但我目前正在开发一个原型应用程序，内置 Angular 和 Node。

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

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

home.tpl.html

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

templates.js

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
});

所有这些魔法都来自html2js

grunt.loadNpmTasks('grunt-html2js');

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