使Angular JS可以离线工作 [英] Makes Angular JS works offline
问题描述
我正在开发一个单页面应用程序，在AngularJS的帮助下，我刚接触它
我之前问过同样的问题，但没有得到任何答案，因此我正在重新描述我的问题并再次提出问题
问题：
我需要做的是使我的web应用程序能够脱机工作，以实现以视图呈现的html文件（例如home.html）应该以某种方式包含在index.html中，因此，当点击某些链接时，应该不需要访问html文件，而是访问相同页面的一部分，例如将呈现潜水，进行哪些修改我应该让项目完成这项工作
目前我制作了不同的html文件，并在渲染视图时将它们用作模板，
app的结构是像这样：
- index.html
- 网页
----- home.html
----- profile.html
这里是config的代码路线和控制器和视图
var formApp = angular.module（'formApp'，['ngRoute']）;
formApp.config（function（$ routeProvider）{
$ routeProvider
.when（'/'，{
templateUrl：'main'，
控制器：'mainController'
}）
.when（'/ profile'，{
templateUrl：'profile'，
controller：'profileController'
}）
}）;
和我的main.html文件是这样的：
< div class =jumbotron text-center>
< h1>主页< / h1>
< p> {{message}}< / p>
< / div>
以及index.html中的某处我有
< div ng-view>
{{message}}
< / div>
代码正常工作，目前一切正常
本地旧缓存在这里不起作用，因为它仍然需要与服务器通信才能拥有304未修改的http代码。
清单消除了此步骤，甚至不会向服务器请求资源。
示例清单：
CACHE MANIFEST
/angular.js
/index.html
/page/home.html
/page/profile.html
网路：
*
如何包含和使用缓存清单检查： http://www.w3schools.com/html/html5_app_cache.asp
用于调试：
清除应用缓存在chrome下输入urlchrome：// appcache-internals /
编辑：由于评论和关闭主题
而不是将html代码放在许多自己的html文件中，您可以将它们包含在index.html中，如下所示：
< script type =text / ng-templateid = one.html >
< div>这是第一个模板< / div>
< / script>
然后你的 templateURL 是one.html 没有子路径。
检查文档： https：//docs.angularjs。 org / api / ng / directive / script
提示：
你不需要放置任何路径。在渲染阶段，angularjs会将每个html文件存储在放置在这些脚本元素中的 $ templateCache 下的 id 中。
I am developing a single page application, with help of AngularJS and I'm new to it I asked the same question before but haven't got any answer so I am rephrasing my question and ask it again
THE QUESTION: What I need to do is to make my web app enabled to work offline for this purpose the html files which are rendered as view (for example home.html) should be included somehow in the index.html, So when clicking on the some links there should be no need to have access to a html file instead a part of the same page for example a dive will be rendered, what modifications should I make to project to get this done
at the moment I made different html files and use them as templates when rendering views, the structure of app is like this :
- index.html
- pages
----- home.html
----- profile.html
here is the code for config the routes and controllers and views
var formApp = angular.module('formApp', ['ngRoute']);
formApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'main',
controller : 'mainController'
})
.when('/profile', {
templateUrl : 'profile',
controller : 'profileController'
})
});
And and my main.html file for example is like this :
<div class="jumbotron text-center">
<h1>Main Page</h1>
<p>{{ message }}</p>
</div>
َand somewhere in the index.html I have
<div ng-view>
{{ message }}
</div>
The code works properly and everything is fine at the moment
To make your application work offline, you have to cache every file with the html5 cache manifest. Even the .html files, images, css, everything...
The native "old" caching won't work here, because it still requires to communicate with the server to have the "304 Not Modified" http code.
The manifest removes this step and doesn't even ask the server for the resources.
An example manifest:
CACHE MANIFEST
/angular.js
/index.html
/page/home.html
/page/profile.html
NETWORK:
*
How to include and use cache manifest check: http://www.w3schools.com/html/html5_app_cache.asp
For debugging:
Clearing a app cache under chrome enter url "chrome://appcache-internals/"
EDIT: Due to comment and off the topic
Instead of placing the html code in many own html files, you can include them in index.html like this:
<script type="text/ng-template" id="one.html">
<div>This is first template</div>
</script>
Then your templateURL is "one.html" without subpath.
Check docs: https://docs.angularjs.org/api/ng/directive/script
Hint:
You dont need to place any paths there. During rendering phase, angularjs will store every html file in the $templateCache under it's id placed in those script elements.
这篇关于使Angular JS可以离线工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
