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

【问题标题】：How to get rid off multiple style tags inserted to head by AngularJS Material?如何摆脱AngularJS Material插入到头部的多个样式标签？
【发布时间】：2016-03-18 06:19:57
【问题描述】：

AngularJS Material 插入了多个（大约 30 个）带有md-theme-style 属性的样式标签。我想这是某种性能调整，但我宁愿自己做——我不需要外部框架以这种讨厌的方式污染我的 HTML。关于如何摆脱样式标签的任何想法？

【问题讨论】：

标签： angularjs angularjs-material

【解决方案1】：

我不知道这是否值得麻烦。请备份你的工作，我没有测试过这些：

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

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

当加载到您的浏览器中时，它会为页面文档动态添加大量 css 样式标签。要禁用它们，您需要使用以下命令自己重新编译 angular-material：

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

然后安装依赖：

cd material
npm install

然后转到 gulp/util.js 并将行 53 从：

var jsProcess = series(jsBuildStream, themeBuildStream() )

成为：

var jsProcess = series(jsBuildStream)

然后运行构建过程：

gulp build

这个问题提供了更多细节： How to get rid off Angular Material extra styles and CSS linked by it 'forcefully'

【讨论】：

同样的问题发生在我身上，我使用 grunt 而不是 gulp，我如何使用 grunt @Jared Hooper 删除这些标签

【解决方案2】：

Direct from the angular material docs

懒惰生成主题

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

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

这是我使用的确切语法，它就像一个冠军。（重要的是要注意这也没有破坏我们的任何风格）：

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

知道这似乎是角度的标准也可能很有用。我也不得不关掉动画。默认情况下，它们几乎为所有内容设置动画。

【讨论】：

对我来说，这仍然创造了一些 <style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style> 但比以前少得多，谢谢！

【解决方案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.
});

答案基于this question.

【讨论】：