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 !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.

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

No te pierdas ninguno de mis posts

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

Dejar un comentario