Angular Экран загрузки JS и анимация страницы

Я изучаю AngularJS для текущего проекта, и мой сайт имеет около 6 - 7 страниц. Я использую схему навигации /#/, и я хотел бы представить загрузочный/ожидающий экран, пока запрос XHR не получит шаблон.

После того, как шаблон был загружен, я хотел бы вызвать переход на страницу, но я очень зациклен на том, как его структурировать или выполнить.

Можно ли это сделать просто или есть ли какие-нибудь примеры?

Ответ 1

Показывать сообщение загрузки, когда AngularJs загружен

Вы можете использовать ngCloak

Директива ngCloak используется для предотвращения шаблона Angular html от кратковременного отображения браузером в его сыром (нескомпилированном) когда приложение загружается. Используйте эту директиву, чтобы избежать нежелательный эффект мерцания, вызванный отображением шаблона html.

Пример CSS

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak
{
    display: none;
}

#splash-page.ng-cloak  /*<-- This has higher specificity so it can display a splash screen*/
{
    display: block;
}

Показать сообщение загрузки через обещание

Мы используем a tracker, который позволяет отслеживать promises и отображать сообщение, если они активны, который находится на github

Из демонстрации:

  <div ng-show="pizzaTracker.active()" style="background:pink;">
    <h1 style="text-align: center;">
      Loading Pizza
      <br />{{pizzaPercent() | number:2}}%
    </h1>
  </div>

И зарегистрировать $http для отслеживания обещаний

$http.get('flavor.json', { tracker: 'pizza' });

Ответ 2

Я решил эту проблему, написав специальный HTTP-перехватчик. Вот пример кода:

var app = angular.module('yourapp', ['loadingService']);

app.config(function ($httpProvider) {
    $httpProvider.responseInterceptors.push('myHttpInterceptor');
    var spinnerFunction = function (data, headers) {
        $('#loading').show();
        return data;
    };
    $httpProvider.defaults.transformRequest.push(spinnerFunction);
});

angular.module('loadingService', [],
    function ($provide) {

        $provide.factory('myHttpInterceptor', function ($q, $window) {
            return function (promise) {
                return promise.then(function (response) {
                    $('#loading').hide();
                    return response;
                }, function (response) {
                    $('#loading').hide();
                    return $q.reject(response);
                });
            };
        });
    });

ПРИМЕЧАНИЕ. В DOM должен быть элемент с идентификатором loading.