使Angular JS离线工作

Makes Angular JS works offline

本文关键字：工作 离线 JS Angular      更新时间：2023-09-26

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

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

现在我制作了不同的html文件，并在渲染视图时将它们用作模板，应用程序的结构如下：

  - 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未修改"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/">

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

不用将html代码放在许多自己的html文件中，您可以将它们包含在index.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下。

这可能不是100%适用于您。根据解决方案&或您正在使用的平台。。。但我有一个原型应用程序，我目前正在开发，它是在Angular和Node中构建的。

虽然这也是我第一次尝试这样的东西。。。EG提前缓存所有页面。这似乎很有效。

在构建阶段，我的所有页面都被转换为缓存友好格式。但在我的解决方案中，它们仍然是普通的html页面。

home.tpl.html

<div class="well home-menu">
    HOME
</div>

templates.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>");
 }]);

控制器

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
});

所有这些魔法都是由html2js 提供的

grunt.loadNpmTasks('grun-html2js'(；

我确实相信，通过各种其他不需要咕哝的方式来实现这种效果是可能的。例如，在js文件中手动创建模板。。。但我做梦也不会推荐这条路线，因为它可能会很快变成一场噩梦

相关文章：