Некоторые вопросы о том, что делать во время загрузки приложения Angular 2

Я использую angular-cli создать приложение Angular 2. После того, как приложение создано с ng new NEW_PROJECTNAMEмы получаем index.html стр. На этой странице у них есть что-то вроде этого.

...
<body>
 <app-root>Loading...</app-root>
 ...
</body>

Излишне говорить, что это загрузочное сообщение может показаться совершенно непрофессиональным. Итак, мой вопрос: как мне добавить что-то более подходящее, например, индикатор выполнения или счетчик?

Я понимаю, что то, что должно произойти, происходит за пределами угловой структуры (верно?). Я нашел несколько пакетов Angular 2, которые было бы очень хорошо использовать (например, материал Angular 2 или ng2-slim-loading-bar-bar), но эти пакеты предполагают, что я уже вошел в среду Angular; Это значит, что я внутри какой-то угловой компоненты.

Итак, мои вопросы следующие.

  • Есть ли ловушка Angular 2, которую я могу использовать, чтобы показать индикатор загрузки до того, как содержимое будет помещено в <app-root></app-root>?
  • Если бы мне пришлось работать вне рамок Angular, какой подход был бы лучшим? Наивно, я предполагаю, что мне придется установить какой-то пакет с bower или же npmсошлитесь что в index.htmlи использовать jQuery или что-то, чтобы показать индикатор загрузки. Я предполагаю, что к тому времени, когда Angular завершит загрузку, он заменит все, что находится внутри <app-root></app-root>, Одна из моих проблем с этим подходом - сценарии сборки / упаковки (тогда мне нужно было бы выяснить, как включить этот пакет bower / npm в мое встроенное приложение).

Любая помощь приветствуется.

Источник

3 ответа

Решение

Самый простой способ - поместить CSS-анимацию в компонент начальной загрузки приложения, когда приложение будет готово, контент будет заменен.

Обратите внимание, что приложение будет загружаться с разной скоростью в зависимости от того, является ли это сборкой разработки или производственной сборкой, поскольку минимизация сценариев и обнаружение изменений будут выполняться только один раз, что ускоряет время загрузки. Возможно, вам придется настроить скорость анимации. Http-запросы из приложения также могут сыграть свою роль.

Я получил это от: http://www.alessioatzeni.com/blog/css3-loading-animation/

CSS и HTML в корневом компоненте:

  <app-root>

  <style>
    #content {
      width: 100%;
      /* Full Width */
      height: 1px;
      margin: 1px auto;
      background: #000;
    }

    .expand {
      width: 100%;
      height: 1px;
      margin: 1px 0;
      background: #2187e7;
      position: absolute;
      box-shadow: 0px 0px 10px 1px rgba(0, 198, 255, 0.7);

                 /*adjust speed here */
      -moz-animation: fullexpand 1.5s ease-out;
      -webkit-animation: fullexpand 1.5s ease-out;
    }


    /* Full Width Animation Bar */

    @-moz-keyframes fullexpand {
      0% {
        width: 0px;
      }
      100% {
        width: 100%;
      }
    }

    @-webkit-keyframes fullexpand {
      0% {
        width: 0px;
      }
      100% {
        width: 100%;
      }
      ;
    }
  </style>

    <div id="content">
      <span class="expand">Loading...</span>
    </div>


  </app-root>

Второй вариант - получить доступ к bootstrap функциональный желоб system.js и сделать его доступным для тегов скрипта в index.html,

Вот сообщение в блоге Бена Наделя нет Как это сделать.

Демо: Создание загрузочного экрана предварительной загрузки в Angular 2 RC 1

(function( global ) {

    // .... code removed ....

    System.config({
        // .... code removed ....
    });

    // Load "./app/main.ts" (gets full path from package configuration above).
    // --
    // NOTE: We are attaching the resultant promise to the global scope so that other
    // scripts may listen for the successful loading of the application.
    global.bootstrapping = System
        .import( "app" )
        .then(
            function handleResolve() {

                console.info( "System.js successfully bootstrapped app." );

            },
            function handleReject( error ) {

                console.warn( "System.js could not bootstrap the app." );
                console.error( error );

                return( Promise.reject( error ) );

            }
        )
    ;

})( window );
Источник

Я не нашел никакого крючка для нашего стека (Webpack). Вы можете добавить произвольный код JavaScript в конце каждого модуля (если вы их используете), который увеличит счетчик. Для этого можно использовать API загрузчиков WebPack. (Применяется только в том случае, если вы используете WebPack, конечно.)

В нашем проекте использовалось решение @Kaspars, чтобы имитировать загружаемое приложение, то есть визуально похожую страницу, с alogo, счетчиком и некоторой информацией, чтобы пользователь был занят чтением до загрузки приложения.

Источник

Я выбрал простой подход с FontAwesome и Bootstrap:

  <app-root>
        <div class="text-center">
            <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
            <div>Something witty</div>
        </div>
    </app-root>
Источник
Другие вопросы по тегам