使 Angular JS 离线工作 [英] Makes Angular JS works offline

问题描述

我正在开发一个单页应用程序，在 AngularJS 的帮助下，我是新手我之前问过同样的问题，但没有得到任何答案，所以我重新表述我的问题并再次提问

问题:我需要做的是使我的网络应用程序能够离线工作为此目的呈现为视图的 html 文件(例如 home.html)应该以某种方式包含在 index.html 中，因此当单击某些链接时应该不需要访问 html 文件而是同一页面的一部分，例如将呈现潜水，我应该对项目进行哪些修改以完成此操作

目前我制作了不同的 html 文件并在渲染视图时将它们用作模板，应用程序的结构是这样的:

 - index.html- 页面----- 主页.html----- profile.html

这里是配置路由、控制器和视图的代码

 var formApp = angular.module('formApp', ['ngRoute']);formApp.config(function($routeProvider) {$routeProvider.什么时候('/'， {模板网址:'主要'，控制器:'主控制器'}).when('/个人资料', {templateUrl : '个人资料',控制器:'配置文件控制器'})});

例如我的 main.html 文件是这样的:

 
<h1>主页</h1><p>{{消息}}</p>

َ在 index.html 的某个地方

 
{{ 信息 }}

代码运行正常，目前一切正常

解决方案

要使您的应用程序离线工作，您必须使用 html5 缓存清单缓存每个文件.甚至 .html 文件、图像、CSS 等等……

原生旧"缓存在这里不起作用，因为它仍然需要与服务器通信才能获得304 Not Modified"http代码.

清单删除了这一步，并且甚至不向服务器询问资源.

示例清单:

缓存清单/angular.js/index.html/页面/home.html/页面/profile.html网络:*

如何包含和使用缓存清单检查:http://www.w3schools.com/html/html5_app_cache.asp

用于调试:

清除应用缓存 在 chrome 下输入 url "chrome://appcache-internals/"

<小时>

编辑:由于评论和偏离主题

您可以像这样将 html 代码包含在 index.html 中，而不是将 html 代码放在许多自己的 html 文件中:

那么你的 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屋！