Création d'un écran de démarrage à l'aide de ng-cloak

Je suis en train de créer un écran de démarrage à l'aide d'AngularJS, comme décrit dans ce discours sur la AngularJS chaîne youtube: http://youtu.be/xOAG7Ab_Oz0?t=10m20s

Il utilise le ng-manteau de la directive. Voici le code HTML:

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

Et le CSS:

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

Ici est un violon: http://jsfiddle.net/TimFogarty/LaBvW/2/

Dans le violon, le splash div ne disparaît pas comme le parler dit qu'il le ferait. Est-il quelque chose de mal avec ce code? Ai-je fait une erreur? Comment puis-je mettre en œuvre cet écran de démarrage?

source d'informationauteur tfogo

  1. 7

    Le deuxième sélecteur css:

    [ng-cloak] {
    display: none;
}

    devrait être

    .splash {
    display: none;
}

    car angulaire va supprimer le ng-cape de classe lorsque l'application est amorcé

  2. 10

    Ce tutoriel a fonctionné pour moi: http://www.ng-newsletter.com/advent2013/#!/jour/21

    Ici est un plunker: http://plnkr.co/edit/twGP7gUe9uraYXSr6kQG?p=preview

    Remarque certaines choses:

    • Dans la démo, je suis manuelle d'amorçage angulaire pour simuler le chargement.
    • L'écran de démarrage de balisage doivent avoir ng-cloak attribut
    • Le reste du modèle doit avoir ng-cloak attribut

    Balisage:

    <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;
}