Come sbarazzarsi di più tag di stile inseriti alla testa da Angular Material?

Question

Angular Material inserisce più tag di stile (circa 30) con attributo md-theme-style. Immagino che sia una specie di messa a punto delle prestazioni, ma preferirei farlo da solo - non ho bisogno di framework esterni per inquinare il mio HTML in questo modo sgradevole. Qualche idea su come sbarazzarsi di questo?

Answer 1

Non so se valga la pena. Esegui il backup del tuo lavoro, non ho verificato nulla di tutto questo:

Angular-material include alcuni css del tema predefinito come variabile const in JavaScript. È possibile visualizzare il codice nel angular-material.js in basso a partire dalla linea di:

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

Quando viene caricato nel browser questo aggiunge un sacco di tag di stile CSS in modo dinamico al documento pagina. Per disattivarle è necessario ricompilare angolare materiale da soli utilizzando i seguenti comandi:

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

quindi installare dipendenze:

cd material 
npm install 

Poi vai a gulp/util.js e cambio di line 53 da:

var jsProcess = series(jsBuildStream, themeBuildStream()) 

di essere:

var jsProcess = series(jsBuildStream) 

quindi eseguire il processo di compilazione:

gulp build 

Questa domanda fornisce maggiori dettagli: How to get rid off Angular Material extra styles and CSS linked by it 'forcefully'

Answer 2

Non sono sicuro se questo risponde alla domanda, ma per rimuovere completamente tutti gli elementi del <style/> In cima alla pagina, ho fatto quanto segue:

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

e questo ha rimosso con successo tutti gli elementi.

Ora, quando voglio loro generati, Io chiamo questo all'interno del controller principale:

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 risposta si basa su this question.

Answer 3

Direct from the angular material docs

pigro Genera Temi

Per impostazione predefinita, ogni tema viene generato quando definito. È possibile disattivare questo nella sezione di configurazione utilizzando il $mdThemingProvider

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

Ecco la sintassi esatta ho usato, e ha funzionato come un campione. (Importante notare questo non rompere qualsiasi stile per noi, sia):

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

Può anche essere utile sapere questo sembra essere uno standard per angolare. Ho dovuto abbassare anche le animazioni.Di default stavano animando praticamente tutto.