Как создать загрузочный экран для кэширования первого посещения SPA

Я создал одностраничное приложение, используя Hot Towel.

Когда я начинал, у меня был этот «первый экран загрузки», когда он кэшировался. Я удалил его, но я не могу понять, как его реализовать заново. Я также добавил множество других фреймворков, и с тех пор моя веб-страница стала намного сложнее. Я до сих пор в основном использую RequireJS, Knockout и AngularJS.

Я не уверен, как это сделать.

Я не помню, как это было сделано изначально, и мне трудно найти в Google, как это реализовать.

Кто-нибудь может указать мне в правильном направлении?


caching angularjs single-page-application loading hottowel
person Totty    schedule 26.04.2014    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Может быть, что-то вроде следующего

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

JS

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%;
}
person djbielejeski    schedule 29.04.2014

arrow_upward
2
arrow_downward

Со страницы горячего полотенца на 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" секретным соусом

person Jason More    schedule 29.04.2014

arrow_upward
0
arrow_downward

Это простая реализация представления загрузки/заставки с использованием 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>

Функция запуска просто устанавливает значения переменных области видимости:

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>

Посмотрите эту статью для получения дополнительной информации:

http://www.ozkary.com/2016/03/angularjs-splash-view-to-prevent-flicker-on-init.html

person ozkary    schedule 22.03.2016