如何摆脱AngularJS Material插入头部的多个样式标签

Question

AngularJS Material插入多个（约30个）具有md-theme-style属性的样式标签。我想这是某种性能调整，但我宁愿自己做——我不需要一个外部框架来以这种恶劣的方式污染我的HTML。关于如何去掉样式标签，你有什么想法吗？

Answer 1

我不知道这是否值得这么麻烦。请备份你的工作，我还没有测试过任何一个：

Angular材质包含一些默认的主题css作为JavaScript中的常量变量。您可以在底部的angular-material.js中以以下行开始查看此代码：

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

当加载到浏览器中时，它会向页面文档动态添加大量css样式标记。要禁用它们，您需要使用以下命令重新编译角度材料：

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

然后安装依赖项：

cd material
npm install

然后转到gullow/util.js并将53行从：更改为

var jsProcess = series(jsBuildStream, themeBuildStream() )

将：

var jsProcess = series(jsBuildStream)

然后运行构建过程：

gulp build

这个问题提供了更多细节：如何摆脱Angular Material的额外样式和链接的CSS'；有力地'；

Answer 2

直接从角度材料文档

懒惰生成主题

默认情况下，每个主题都是在定义时生成的。您可以使用$mdThemingProvider 在配置部分禁用此功能

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

这是我使用的确切语法，它像冠军一样工作。（需要注意的是，这也没有打破我们的任何风格）：

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

知道这似乎是一个角度的标准也可能很有用。我也不得不把动画的音量调低。默认情况下，他们几乎对所有内容都设置了动画。

Answer 3

我不确定这是否回答了问题，但为了从页面顶部完全删除所有<style/>元素，我做了以下操作：

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

并且这成功地去除了所有元素。

现在，当我想要生成它们时，我在主控制器中调用它：

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

答案是基于这个问题。