2016-08-05 76 views
4

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

+0

我不認爲這是可能的。 –

+0

那麼有沒有辦法解決這個問題?當我只需要對話框模塊時,我正在使用Angular Material的完整安裝時,我的項目非常慢。 – user1149117

回答

1

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

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

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

docs

enter image description here

3

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

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

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

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

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

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

0

您只選擇要安裝的組件,通過使定製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他們。