Introducción
Conforme crecen nuestras aplicaciones diseñadas con el framework AngularJS, a veces se muestran porciones que no deberían mostrarse.
Es decir, mientras la app carga se muestran plantillas sin procesar, o cosas que deberían estar ocultas (como un menú).
AngularJS proporciona una manera muy sencilla de ocultar nuestra app mientras ésta no esté lista. O en otras palabras, no mostrar nada mientras nuestra app esté cargando.
Ocultar app mientras carga con NgCloak
Para ocultar, tenemos que modificar dos cosas: nuestra vista (html) y nuestros estilos (css). En los estilos CSS ponemos lo siguiente:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
Básicamente estamos diciendo que aquellos elementos que tengan la directiva ng-cloak no deben mostrarse. Supongo que después, cuando el framework detecta que la app está lista, remueve ese estilo.
En fin, ahora para terminar, en donde definamos la directiva ng-app (normalmente en el body) agregamos la directiva ng-cloak:
<body ng-cloak ng-app="tuApp" ng-controller="tuControlador">
Referencias
Lo expuesto aquí fue sacado de la documentación oficial.
