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