Ocultar contenido de app mientras no está lista en AngularJS

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

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.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/