如何为首次 SPA 访问缓存创建“加载屏幕”答案

【问题标题】：How do I create a "loading screen" for first time SPA visit caching如何为首次 SPA 访问缓存创建“加载屏幕”
【发布时间】：2014-06-12 14:00:18
【问题描述】：

我使用热毛巾创建了一个单页应用程序。

当我开始缓存时，我有这个“第一次加载屏幕”。我删除了它，但我不知道如何重新实现它。我还添加了很多其他框架，从那时起我的网页变得更加复杂。我仍然主要使用 RequireJS、Knockout 和 AngularJS。

我不知道该怎么做。

我不记得它最初是如何完成的，而且我在谷歌上搜索如何实现它时遇到了麻烦。

谁能指出我正确的方向？

【问题讨论】：

标签： angularjs caching loading single-page-application hottowel

【解决方案1】：

这是一个使用 angularjs 的加载/启动视图的简单实现。初始视图默认显示（原始 html），直到 angular 完成其初始化周期。应用程序初始化后，appReady 范围变量被设置，并且启动视图被 ngIf 指令移除。

<div class="body-content panel-body text-center" ng-if="!appReady">   
    <div class="row" >
      <div class="col-sm-12">
        <div class="">
          <i class="fa fa-spin fa-spinner fa-5x"></i>
         <h3>
         App is loading
         </h3> 
        </div>
      </div>
    </div>
    </div>

run 函数只是设置作用域变量值：

var app = angular.module('app', []);
  app.run(['$rootScope',initApp]);  

  //initializes the scope variables
  function initApp($rootScope){    
      $rootScope.appReady = true; 
      $rootScope.appMessage = 'App is ready';  
  }

可以使用 ngCloak 指令隐藏应用内容。

<div class="body-content" ng-cloak>
...
</div>

【讨论】：

【解决方案2】：

来自热毛巾github页面：https://github.com/johnpapa/HotTowel-Angular/blob/master/NuGet/HotTowel-NG/index.html

    <div id="splash-page" data-ng-show="false">
        <div class="page-splash">
            <div class="page-splash-message">
                Hot Towel Angular
            </div>
            <div class="progress progress-striped active page-progress-bar">
                <div class="bar"></div>
            </div>
        </div>
    </div>

ng-show="false" 是秘诀

【讨论】：

【解决方案3】：

可能是这样的

<div class="loadingScreen" ng-show="!isLoaded">
  <div>Loading...</div>
</div>
<div class="container ng-hide" ng-show="isLoaded" >
   Page Content
</div>

angular.module('myApp').controller("itemController", function($scope, itemService){
    $scope.isLoaded = false;
    ...Other stuff down here...

    //After your ajax call that saturates your view, set $scope.isLoaded = true;
    itemService.getItems().success(function(data){ 
       $scope.isLoaded = true;
    });
}

CSS

.loadingScreen{
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   background-color: white;
   text-align: center;
   -webkit-transform-style: preserve-3d;
}

.loadingScreen > div{
  position: absolute;
  top: 47%;
  left: 47%;
}

【讨论】：