只包含我需要的角度材質的模塊

Question

我使用Angular Material的模塊$ mdDialog，但我不需要完整的庫。是否可能只包含我在項目中需要的模塊，以及我該怎麼做？我已經在Bower項目中安裝了Angular Material，並使用了Gulp。

Answer 1

根據我上面的評論，$mdDialog依賴於angular-material.js，它依賴於angular.js，angular-aria.js和angular-animate.js。我認爲沒有任何辦法。

雖然您使用的是角材，但我想建議一個替代方案 - Polymer，它與角材的風格相似，風格一致。這個建議與你不想加載大量的依賴關係有關。

使用聚合物的好處是，你可以包括獨立的元素，例如paper-dialog - demo

從docs

Answer 2

不久角材料將變成v1.1.0爲主要版本。

作爲另外的material-tools存儲庫將公佈。

Material Tools允許開發人員使用最必要的組件構建自定義Angular Material構建。

它還可以建立預編譯的主題風格，這顯著提高性能。

材料工具已經可用，但仍處於測試階段。

https://github.com/angular/material-tools

Answer 3

您只選擇要安裝的組件，通過使定製angularjs從angular material git repository建立如下

• 下載或克隆angular material回購。
• 去存儲庫文件夾，並執行「故宮安裝」或「故宮更新」

對於自定義JS打造

在「\吞掉」文件夾編輯util.js中，更新buildJs （）函數

function buildJs() { 
    // original code commented 
    //var jsFiles = config.jsBaseFiles.concat([path.join(config.paths, '*.js')]); 

     var jsFiles = config.jsBaseFiles; 

     //adding the paths of components you want 
     jsFiles.push('src/components/icon/**/*.js'); 
     jsFiles.push('src/components/showHide/**/*.js'); 
     jsFiles.push('src/components/virtualRepeat/**/*.js'); 
     jsFiles.push('src/components/dialog/**/*.js'); 

• 運行 「一飲而盡建」，並找到在JS 「\ DIST」 文件夾

我使用與的WebPack angularjs，我複製了「角material.js」到「\ node_modules \角材料」在我的應用程序，我是能夠使構建無任何變化。

存儲庫中的 「\一飲而盡\任務」 文件夾中創建自定義的CSS

編輯 「集結scss.js」。編輯的getPaths（）函數

function getPaths() { 
    var paths = config.scssBaseFiles.slice(); 
    if (modules) { 
     paths.push.apply(paths, modules.split(',').map(function (module) { 
     return 'src/components/' + module + '/*.scss'; 
     })); 
    } else { 
    // original code commented 
    // paths.push('src/components/**/*.scss'); 
     paths.push('src/core/services/layout/**/*.scss'); 

     //add the paths of components you want  
     paths.push('src/components/icon/**/*.scss'); 
     paths.push('src/components/showHide/**/*.scss'); 
     paths.push('src/components/virtualRepeat/**/*.scss'); 
     paths.push('src/components/datepicker/**/*.scss'); 
     paths.push('src/components/autocomplete/**/*.scss'); 
     paths.push('src/components/backdrop/**/*.scss'); 
     paths.push('src/components/dialog/**/*.scss'); 

• 「一飲而盡構建」還將建立CSS中的「\ DIST」文件夾

我希望它能幫助，請在情況下角料一飲而盡構建註釋改變。

其他方式

當您安裝使用NPM angularjs，你可以找到在「\ node_modules \角材料\模塊\ JS」每個組件的JS和CSS文件，您可以使用您的自定義生成到concatinate他們。