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

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

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

   

Loading

И CSS:

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

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

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

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

 [ng-cloak] { display: none; } 

должно быть

 .splash { display: none; } 

потому что угловой будет удалять class ng-cloak, когда приложение загружается

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

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

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

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

Разметка:

 

Loading

app loaded

Css:

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