仅包含我需要的Angular Material模块

Question

我正在使用Angular Material的模块$ mdDialog，但我不需要完整的库。是否可以只包含项目中需要的模块，我该怎么做？我已经在Bower中安装了Angular Material并在我的项目中使用了Gulp。

Answer 1

很快Angular Material将成为v1.1.0作为主要版本。

另外，material-tools存储库将宣布。

Material Tools允许开发人员使用最必要的组件构建自定义Angular Material构建。

它还可以构建预编译的主题样式表，从而显着提高性能。

材料工具已经可用，但仍处于测试阶段。

  

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

Answer 2

根据我上面的评论，foreach (var chk in CheckedInc) { chkTypeofIncident.Items.FindByValue(chk.IncidentsMasterID).Selected = true; } 取决于angular-material.js，它取决于angular.js，angular-aria.js和angular-animate.js。我认为没有办法解决这个问题。

虽然你正在使用Angular Material我想建议一个替代方案 - Polymer，它与Angular Material的风格类似且一致。此建议与您不希望加载大量依赖项有关。

使用Polymer的优势在于您可以包含单独的元素，例如paper-dialog - demo

来自docs

Answer 3

您只选择所需的组件，方法是从angular material git repository构建自定义angularjs，如下所示

• 下载或克隆angular material个回购。
• 进入存储库文件夹并执行“npm install”或“npm update”

对于自定义js构建

在“\ gulp”文件夹中编辑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');

• 运行“gulp build”并在“\ dist”文件夹中找到js文件

我在webpack中使用angularjs，我在我的应用程序中将“angular-material.js”复制到“\ node_modules \ angular-material”，我可以在不做任何更改的情况下进行构建。

用于构建自定义css

在存储库的“\ gulp \ tasks”文件夹中编辑“build-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');

• “gulp build”还将在“\ dist”文件夹中构建css

我希望它有所帮助，请在角度材料吞噬构建发生变化时发表评论。

其他方式

当您使用npm安装angularjs时，您可以在“\ node_modules \ angular-material \ modules \ js”中找到每个组件的js和css文件，您可以使用自定义构建来连接它们。