javascript 使 Angular JS 离线工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23652183/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Makes Angular JS works offline
提问by Siavosh
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
我正在开发一个单页应用程序，在 AngularJS 的帮助下，我是新手我之前问过同样的问题但没有得到任何答案所以我重新表述我的问题并再次提出
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
问题：我需要做的是让我的网络应用程序能够离线工作为此目的呈现为视图的 html 文件（例如 home.html）应该以某种方式包含在 index.html 中，所以当点击某些链接应该不需要访问 html 文件，而是同一页面的一部分，例如将呈现潜水，我应该对项目进行哪些修改才能完成此操作
at the moment I made different html files and use them as templates when rendering views, the structure of app is like this :
目前我制作了不同的 html 文件并在渲染视图时将它们用作模板，应用程序的结构是这样的：
- 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 :
而我的 main.html 文件例如是这样的：
<div class="jumbotron text-center">
<h1>Main Page</h1>
<p>{{ message }}</p>
</div>
?and somewhere in the index.html I have
？在 index.html 的某个地方我有
<div ng-view>
{{ message }}
</div>
The code works properly and everything is fine at the moment
代码运行正常，目前一切正常
回答by Konstantin Krass
To make your application work offline, you have to cache every file with the html5 cache manifest. Even the .html files, images, css, everything...
要使您的应用程序脱机工作，您必须使用html5 缓存清单缓存每个文件。甚至 .html 文件、图像、css 等等……
The native "old" caching won't workhere, because it still requires to communicate with the serverto have the "304 Not Modified" http code.
本机“旧”缓存在这里不起作用，因为它仍然需要与服务器通信才能获得“304 Not Modified”http 代码。
The manifest removes this step and doesn't even askthe server for the resources.
清单删除了这一步，甚至不向服务器询问资源。
An example manifest:
示例清单：
CACHE MANIFEST
/angular.js
/index.html
/page/home.html
/page/profile.html
NETWORK:
*
How to includeand usecache manifest check: http://www.w3schools.com/html/html5_app_cache.asp
如何包含和使用缓存清单检查：http: //www.w3schools.com/html/html5_app_cache.asp
For debugging:
用于调试：
Clearing a app cacheunder chrome enter url "chrome://appcache-internals/"
清除chrome 下的应用缓存输入 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:
您可以像这样将 html 代码包含在 index.html 中，而不是将 html 代码放在许多自己的 html 文件中：
<script type="text/ng-template" id="one.html">
<div>This is first template</div>
</script>
Then your templateURLis "one.html" without subpath.
那么你templateURL是没有子路径的“one.html”。
Check docs: https://docs.angularjs.org/api/ng/directive/script
检查文档：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 $templateCacheunder it's idplaced in those script elements.
您不需要在那里放置任何路径。在渲染阶段，angularjs 会将每个 html 文件存储$templateCache在它id放置在那些脚本元素中的下面。
回答by Rohan Büchner
This might not be 100% applicable to you. Depending on the solution & or platform you're using... But I've got a prototype application that I'm working on currently, built in Angular and Node.
这可能不是 100% 适用于您。取决于您使用的解决方案和或平台......但我有一个原型应用程序，我目前正在使用它，内置于 Angular 和 Node.js 中。
Although this was also my fist attempt at something like this... EG caching all the pages upfront. This seems to work quite well.
虽然这也是我第一次尝试这样的事情...... EG 预先缓存所有页面。这似乎工作得很好。
All my pages get converted to a cache friendly format during the build phase. But in my solution, they are still regular html pages.
在构建阶段，我的所有页面都转换为缓存友好格式。但是在我的解决方案中，它们仍然是常规的 html 页面。
home.tpl.html
主页.tpl.html
<div class="well home-menu">
HOME
</div>
templates.js
模板.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>");
}]);
controller
控制器
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
});
All this magic courtesy of html2js
所有这些魔法都由 html2js 提供
grunt.loadNpmTasks('grunt-html2js');
grunt.loadNpmTasks('grunt-html2js');
...I do believe its possible to achieve this effect in various other ways that doesn't require grunt. For example manually creating the templates in the js file... but I wouldn't dream of recommending that route, as it could turn into a nightmare quickly
...我确实相信可以通过其他各种不需要咕噜声的方式来实现这种效果。例如在 js 文件中手动创建模板......但我不会梦想推荐这条路线，因为它可能很快变成一场噩梦
