cloak - ¿Cómo deshacerse de las múltiples etiquetas de estilo insertadas en la cabeza por AngularJS Material?

ng-class

Question

AngularJS Material inserta varias etiquetas de estilo (alrededor de 30) con el atributo md-theme-style . Supongo que es una especie de ajuste de rendimiento, pero preferiría hacerlo yo mismo: no necesito un marco externo para contaminar mi HTML de esta manera desagradable. ¿Alguna idea sobre cómo deshacerse de las etiquetas de estilo?

Answer 1

No estoy seguro de si esto responde a la pregunta, pero para eliminar por completo todos los elementos <style/> de la parte superior de la página, hice lo siguiente:

angular.module( ''myApp'', [''ngMaterial''] )
   .config( function( $mdThemingProvider, $provide ) {
       $mdThemingProvider.theme(''myTheme'')
           .primaryPalette(''blue'')
           .accentPalette(''green'')
           .warnPalette(''yellow'');
       $mdThemingProvider.generateThemesOnDemand(true);
       $provide.value(''themingProvider'', $mdThemingProvider);
    });

y esto eliminó con éxito todos los elementos.

Ahora, cuando quiero que se generen, lo llamo dentro del controlador principal:

angular.module(''myApp'').controller(''MyCtrl'', function( themingProvider ){
    themingProvider.reload(''myTheme''); 
    // pretty sure it''s themingProvider.generateTheme(''myTheme'')
    // but I ended up refactoring this workaround out, anyway.
});

La respuesta se basa en esta pregunta.

Answer 2

No sé si vale la pena la molestia. Por favor haga una copia de seguridad de su trabajo, no he probado nada de esto:

El material angular incluye algunos temas por defecto css como una variable constante en JavaScript. Puede ver este código en angular-material.js en la parte inferior comenzando con la línea:

angular.module("material.core").constant("$MD_THEME_CSS"...

Cuando se carga en su navegador, esto agrega dinámicamente muchas etiquetas de estilo css al documento de la página. Para deshabilitarlos, deberá volver a compilar el material angular con los siguientes comandos:

git clone https://github.com/angular/material.git

Luego instale dependencias:

cd material
npm install

Luego vaya a gulp / util.js y cambie la línea 53 desde:

var jsProcess = series(jsBuildStream, themeBuildStream() )

ser:

var jsProcess = series(jsBuildStream)

A continuación, ejecute el proceso de construcción:

gulp build

Esta pregunta proporciona más detalles: cómo deshacerse de los estilos adicionales de Material Angular y CSS vinculados por él "a la fuerza"

Answer 3

Directamente desde la documentación del material angular.

Temas perezosos para generar

De forma predeterminada, cada tema se genera cuando se define. Puede deshabilitar esto en la sección de configuración usando el $mdThemingProvider

angular.module(''myApp'', [''ngMaterial''])
    .config(function($mdThemingProvider) {
        //disable theme generation
        $mdThemingProvider.generateThemesOnDemand(true);
    });

Aquí está la sintaxis exacta que utilicé, y funcionó como un campeón. (Es importante tener en cuenta que esto tampoco rompió ningún estilo para nosotros):

.config([''$mdThemingProvider'', function($mdThemingProvider) {
    $mdThemingProvider.generateThemesOnDemand(true);
}])

También puede ser útil saber que esto parece ser un estándar para angular. Tuve que bajar las animaciones también. Por defecto estaban animando casi todo.