javascript - tutorial - Estrategia AngularJS para evitar el contenido de flash-of-unstyled para una clase
angularjs ejemplos (5)
Tengo un proyecto AngularJS, quiero evitar un FOUC durante la carga de la página en un nombre de clase. He leído sobre ng-template, pero eso parece útil solo para el contenido dentro de una etiqueta.
<body class="{{ bodyClass }}">
Me gustaría que fuera "inicio de sesión" en la carga de la página. Alguna estrategia para esto? O simplemente tengo que convertirlo en fudge y cargarlo como "inicio de sesión" y usar javascript manualmente para ajustar el DOM solo para esta instancia.
En lugar de usar clase, deberías usar ng-class
<body ng-class="{{ bodyClass }}">
Hay una solución para el problema de flash en CSS simple que es a prueba de balas. Para la clase del elemento raíz de su aplicación, agregue lo siguiente. Esta solución funciona por orden de procesamiento: todo está oculto en CSS, angular se carga, y luego CSS muestra la raíz de la aplicación. Me gusta usar esto, así que si hay otros elementos no angulares en la página, se mostrarán primero haciendo que la página parezca cargar más rápido.
/* in your CSS file in head */
.myApp {
display:none;
}
<div class="myApp" ng-app="myApp"></div>
Justo antes de que termine el cuerpo, agregue las referencias de su script y algunos CSS en línea:
<script language="javascript" type="text/javascript" src="angular.min.js"></script>
<style>
.myApp {
display:block;
}
</style>
</body>
Lo que estás buscando es ng-cloak .
Tienes que agregarlo así:
<body class="{{ bodyClass }}" ng-cloak>
y esto evitará el flasheo no deseado.
Enlace a documentos sobre esto.
Editar:
También es aconsejable poner el siguiente fragmento en su archivo CSS, de acuerdo con los documentos.
"Para obtener el mejor resultado, la secuencia de comandos angular.js debe cargarse en la sección de cabecera del documento html; alternativamente, la regla css anterior debe incluirse en la hoja de estilos externa de la aplicación".
[ng/:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
Me he dado cuenta de que a veces incluso ng-cloak no parece funcionar realmente. Tal vez estoy haciendo algo mal.
<body ng-cloak class="{{ bodyClass }}">
También hago una pequeña cosa más similar a @mbokil, puedes ocultar el elemento por defecto. Al utilizar un selector de atributos que se dirige a cualquier elemento con el atributo ng-cloak, puede utilizar directivas angulares. Esto tiene varios beneficios, pero el principal beneficio es que una vez que los incendios angulares eliminan este atributo, se desencadenará un redibujado.
<style>
[ng-cloak] {
display:none;
}
</style>
Uno de los problemas que enfrenta es que el navegador mostrará el elemento <body> antes de que AngularJS se haya cargado y haya comenzado a manipular el DOM. Lo que otras personas dijeron acerca de ng-class es correcto, aplicará la clase correcta pero aún no necesita mostrar nada antes de que Angular esté listo.
En versiones anteriores de Angular puedes hacer esto:
<body style="display:none" ng-show="true" ng-class="{{bodyClass}}">
Sin embargo, en versiones recientes esto no funciona porque ng-show hace su visibilidad al agregar y eliminar la clase ng-hide (que es menos específica que un atributo de elemento)
Lo que he estado haciendo recientemente es esto:
<head>
...
<style> <!-- Or you could include this in an existing style sheet -->
.ng-cloak {
display: none !important;
}
</style>
</head>
<body class="ng-cloak" ng-cloak ng-class="{{bodyClass}}">
Hacerlo de esta manera significa que el <body> quedará oculto inmediatamente por el estilo de la clase ng-cloak . Cuando Angular se inicia procesará todas las directivas incluidas ng-class y ng-cloak , por lo que su elemento <body> tendrá la clase correcta y será visible.
Lea más aquí directiva ng-cloak