Создание заставки с использованием ng-cloak

Я пытаюсь создать заставку с помощью AngularJS, как описано в этом разговоре на канале YouTube на YouTube: http://youtu.be/xOAG7Ab_Oz0?t=10m20s

Он использует директиву ng-cloak. Здесь HTML:

<head><head>
<body ng-app>
  <!-- inline styles -->
  <div class="splash" ng-cloak="">
    <p>Loading</p>
  </div>
  <!-- Rest of app -->
</body>

И CSS:

[ng-cloak].splash {
    display: block !important;
}
[ng-cloak] {
    display: none;
}
.splash {
    background-color: #428bca;
}

Вот скрипка: http://jsfiddle.net/TimFogarty/LaBvW/2/

В скрипке всплеск div не исчезает, как говорилось в разговоре. Что-то не так с этим кодом? Я сделал ошибку? Как реализовать этот экран заставки?

Ответы

Ответ 1

Второй селектор css, который был:

[ng-cloak] {
    display: none;
}

должен быть

.splash {
    display: none;
}

потому что angular удалит класс ng-cloak, когда приложение загрузится

Ответ 2

Этот учебник работал у меня: http://www.ng-newsletter.com/advent2013/#!/day/21

Вот плункер: http://plnkr.co/edit/twGP7gUe9uraYXSr6kQG?p=preview

Обратите внимание на некоторые вещи:

  • В демонстрации я вручную загружаю angular для имитации загрузки.
  • Разметка всплывающего экрана должна иметь атрибут ng-cloak
  • Остальная часть шаблона должна иметь атрибут ng-cloak

Разметка:

<div class="splash" ng-cloak="">
    <p>Loading</p>
</div>

<div ng-cloak="">    
    <h1> app loaded </h1>
</div>

Css:

.splash {
  display: none;
}

[ng-cloak].splash {
  display: block !important;
}