Question

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

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

Answer 1

这可能不是100％适用于您。取决于解决方案＆amp;或者你正在使用的平台...但是我已经有一个原型应用程序，我目前正在使用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（＆＃39;咕噜-html2js＆＃39）;

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

使Angular JS脱机工作

1 个答案: