javascript – 使Angular JS脱机工作

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

问题：
我需要做的是让我的Web应用程序启用脱机工作,为此目的,呈现为视图的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>

代码工作正常,此刻一切都很好

解决方法

要使应用程序脱机工作,必须使用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会将$templateCache中的每个html文件存储在这些脚本元素中的id下.

原文地址：https://www.jb51.cc/js/159144.html