कोणीय सामग्री द्वारा सिर में डाले गए कई स्टाइल टैग से छुटकारा पाने के लिए कैसे?

Question

कोणीय सामग्री एमडी-थीम-शैली विशेषता के साथ एकाधिक (लगभग 30) शैली टैग सम्मिलित करता है। मुझे लगता है कि यह किसी प्रकार का प्रदर्शन ट्यूनिंग है लेकिन मैं इसे स्वयं कर दूंगा - मुझे इस HTML में अपने एचटीएमएल को प्रदूषित करने के लिए बाहरी ढांचे की आवश्यकता नहीं है। कोई विचार यह कैसे छुटकारा पाने के लिए?

Answer 1

मुझे नहीं पता कि यह परेशानी के लायक है या नहीं। कृपया अपने काम का बैकअप लें, मैंने इसका कोई परीक्षण नहीं किया है:

कोणीय-सामग्री में कुछ डिफ़ॉल्ट थीम सीएसएस जावास्क्रिप्ट में एक कॉन्स वैरिएबल के रूप में शामिल है। आप लाइन के साथ शुरू तल पर angular-material.js में इस कोड को देख सकते हैं:

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

जब आपके ब्राउज़र में लोड इस गतिशील पेज दस्तावेज़ में सीएसएस शैली टैग के बहुत सारे कहते हैं। तब घूंट/util.js और से परिवर्तन लाइन 53 जाना

cd material 
npm install 

:

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

फिर स्थापित dependancies: उन्हें निष्क्रिय करने के लिए आप कोणीय सामग्री पुन: संयोजित करने के लिए अपने आप को निम्न कमांड का प्रयोग की आवश्यकता होगी

var jsProcess = series(jsBuildStream, themeBuildStream()) 

होने के लिए:

var jsProcess = series(jsBuildStream) 

फिर निर्माण प्रक्रिया चलाएँ: How to get rid off Angular Material extra styles and CSS linked by it 'forcefully'

Answer 2

मुझे यकीन है कि नहीं कर रहा हूँ अगर यह सवाल का जवाब है, लेकिन पूरी तरह से से <style/> सभी तत्वों के दूर करने के लिए:

gulp build 

यह सवाल और अधिक विस्तार देता है पृष्ठ के शीर्ष पर, मैंने निम्नलिखित किया:

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

और इससे सभी तत्वों को सफलतापूर्वक हटा दिया गया।

अब, जब मैं उन्हें उत्पन्न चाहते हैं, मैं इस मुख्य नियंत्रक के भीतर फोन: Lazy विषय-वस्तु उत्पन्न

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.

Answer 3

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

यह भी जानना इस कोणीय के लिए एक मानक हो रहा है उपयोगी हो सकता है। मुझे एनिमेशन को भी चालू करना पड़ा।डिफ़ॉल्ट रूप से वे बहुत ज्यादा सब कुछ एनिमेट कर रहे थे।