재료
1.2.5
머티리얼 디자인은 다양한 장치에 걸쳐 적용되는 시각적, 모션 및 상호 작용 디자인의 통합 시스템에 대한 사양입니다. 우리의 목표는 AngularJS 단일 페이지 애플리케이션(SPA)에서 사용할 머티리얼 디자인 사양을 구현하는 간결하고 가벼운 AngularJS 기본 UI 요소 세트를 제공하는 것입니다.
AngularJS Material은 AngularJS(v1.x) 개발자를 위한 Google의 머티리얼 디자인 사양(2014-2017)을 구현한 것입니다.
머티리얼 디자인 사양(2018+) 구현에 대해서는 Angular(v2+) 개발자를 위해 구축된 Angular Material 프로젝트를 참조하세요.
AngularJS Material 지원은 2022년 1월에 공식적으로 종료되었습니다. 지원 종료의 의미를 확인하고 지원 종료 공지를 읽어보세요. 적극적으로 지원되는 Angular Material을 보려면 Material.angular.io를 방문하세요.
보안 문제 보고에 대한 자세한 내용은 여기에서 확인하세요.
AngularJS Material에는 재사용 가능하고 잘 테스트되었으며 액세스 가능한 UI 구성 요소가 풍부하게 포함되어 있습니다.
빠른 링크:
최신 버전의 AngularJS Material을 사용하려면 AngularJS 1.7.2 이상을 사용해야 합니다.
AngularJS Material은 package.json의 browserslist 필드에 정의된 브라우저 버전을 지원합니다. 우리 문서 사이트에서 더 자세히 알아보세요.
AngularJS Material은 여기에 나열된 스크린 리더 버전을 지원합니다.
개발자는 NPM과 gulp를 사용하여 AngularJS Material을 구축할 수 있습니다.
먼저 로컬 프로젝트의 npm 종속성을 설치하거나 업데이트하세요.
npm installGulp v3을 전역적으로 설치합니다.
npm install -g gulp@3그런 다음 gulp 작업을 실행합니다.
# To build `angular-material.js/.css` and `Theme` files in the `/dist` directory
gulp build
# To build the AngularJS Material Docs and Demos in `/dist/docs` directory
gulp docs 개발의 경우 docs:watch NPM 스크립트를 사용하여 개발 모드에서 실행합니다.
# To build the AngularJS Material Source, Docs, and Demos in watch mode
npm run docs:watch빌드 프로세스 작동 방식과 추가 명령(테스트 및 디버깅에 사용 가능)에 대한 자세한 내용을 보려면 개발자는 빌드 가이드를 읽어야 합니다.
AngularJS Material 라이브러리 구축에 관심이 없는 개발자의 경우 NPM을 사용하여 AngularJS Material 배포 파일을 설치하고 사용하세요.
프로젝트의 루트 디렉터리로 변경합니다.
# To get the latest stable version, use NPM from the command line.
npm install angular-material --save
# To get the most recent, latest committed-to-master version use:
npm install http://github.com/angular/bower-material#master --save로컬 프로젝트 내에서 AngularJS Material 배포 파일을 설치하고 사용하는 방법에 대한 자세한 내용을 보려면 배포 저장소를 방문하세요.
AngularJS Material의 CDN 버전을 사용할 수 있습니다.
Google CDN을 사용하면 배포 파일의 로컬 복사본을 다운로드할 필요가 없습니다. 대신 CDN URL을 참조하면 해당 원격 라이브러리 파일을 쉽게 사용할 수 있습니다. 이는 CodePen 또는 Plunker와 같은 온라인 도구를 사용할 때 특히 유용합니다.
< head >
< link rel =" stylesheet " href =" https://ajax.googleapis.com/ajax/libs/angular_material/1.2.1/angular-material.min.css " >
head >
< body >
< script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js " > script >
< script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-animate.min.js " > script >
< script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-aria.min.js " > script >
< script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-messages.min.js " > script >
< script src =" https://ajax.googleapis.com/ajax/libs/angular_material/1.2.1/angular-material.min.js " > script >
body >최신 빌드 버전을 원하는 개발자는 GitCDN.xyz를 사용하여 배포 저장소에서 직접 가져올 수 있습니다.
< head >
< link rel =" stylesheet " href =" https://gitcdn.xyz/cdn/angular/bower-material/master/angular-material.css " >
head >
< body >
< script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.js " > script >
< script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-animate.js " > script >
< script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-aria.js " > script >
< script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-messages.min.js " > script >
< script src =" https://gitcdn.xyz/cdn/angular/bower-material/master/angular-material.js " > script >
body > 필요한 자산을 모두 설치했으면 ngMaterial 및 ngMessages 앱의 종속성으로 추가하세요.
angular . module ( 'myApp' , [ 'ngMaterial' , 'ngMessages' ] ) ;
