내가 필요로하는 각도 재료의 모듈 만 포함하십시오

Question

각도 재료의 $ mdDialog 모듈을 사용하고 있지만 전체 라이브러리는 필요하지 않습니다. 프로젝트에 필요한 모듈 만 포함시킬 수 있습니까? 어떻게 할 수 있습니까? Bower와 Angular Material을 설치했고 프로젝트에서 Gulp를 사용했습니다.

Answer 1

위의 내 의견에 따르면 $mdDialog은 angular.js, angular-aria.js 및 angular-animate.js에 의존하는 angular-material.js에 따라 다릅니다. 나는 주위에 어떤 방법이 있다고 생각하지 않는다.

각도 재료를 사용하고 있지만 대체 재료 - Polymer을 제안하고 싶습니다.이 재료는 각도 재료와 스타일이 비슷합니다. 이 제안은 많은 의존성을로드하고 싶지 않은 것과 관련이 있습니다. 곧 각도 재료는 주요 릴리스로 v1.1.0로 전환됩니다 docs

Answer 2

에서 demo

-

폴리머를 사용의 장점은 예를 paper-dialog에 대해 별도의 요소를 포함 할 수 있다는 것입니다.

material-tools 리포지토리는 으로 발표됩니다.

Material Tools를 사용하면 개발자가 가장 필요한 구성 요소를 사용하여 사용자 정의 Angular Material 빌드를 작성할 수 있습니다.

또한 미리 컴파일 된 테마 스타일 시트를 빌드하여 성능을 크게 향상시킬 수 있습니다.

재료 도구는 이미 사용할 수 있지만 여전히 베타 버전입니다.

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

Answer 3

당신은

• 다운로드를 다음 또는 angular material의 repo를 복제로하여 사용자 지정 AngularJS와는 angular material git repository에서 구축, 원하는 구성 요소 만 선택합니다.
• 저장소 폴더를 이동하고 buildJs를 업데이트, 사용자 정의에 대한

는 JS은 "\ 쭉 마시는"폴더 편집에서 util.js을

를 구축 "NPM 설치"또는 "NPM 업데이트"를 실행() 함수

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를 사용하고 있는데, "angular-material.js"를 "\ node_modules \ angular-material"에 복사하여 변경하지 않고 빌드를 만들 수있었습니다.저장소에 "\ 꿀꺽의 \ 작업"폴더에

편집 "빌드 scss.js"사용자 정의 CSS를 구축을 위해

.

이

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'); 

• 나는 그것이 도움이되기를 바랍니다

이 경우 각 소재 꿀꺽 빌드에서 의견을주십시오 "꿀꺽 빌드"또한 "\의 DIST"에 CSS를 구축 할 것입니다 폴더는() 함수 getPaths을 편집 변경되었습니다. 당신이 NPM과 AngularJS와를 설치할 때

다른 방법

, 당신은 "\ node_modules \ 각 소재 \ 모듈 JS을 \"의 각 구성 요소에 대한 JS 및 CSS 파일을 찾을 수 있습니다 당신은 concatinate하기 위해 사용자 지정 빌드를 사용할 수 있습니다 그들.