我正在开发一个单页面应用程序,在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下.