타사 UI 라이브러리(Angular Material)를 Angular 프로젝트에 도입하는 방법에 대한 간략한 설명

이 글에서는 Angular 프로젝트에 타사 UI 라이브러리(Angular Material)를 도입하는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

환경:

• Angular CLI: 11.0.6
• Angular: 11.0.7
• Node: 12.18.3
• npm: 6.14.6
• IDE: VSCode

1. 타사 UI 라이브러리 선택

Angular 개발은 한두 개의 간단한 페이지만 있는 것이 아니라면 타사 UI 라이브러리 도입은 필수적입니다. 어떤 라이브러리를 사용할지는 여러 측면을 고려해야 합니다. [관련 추천 튜토리얼: "angular tutorial"]

예:

• 인기

• 버전 업데이트(추가 업데이트를 따를 수 있는지, 버그가 적시에 수정되는지 여부)

• UI 스타일, 프로젝트에 적합한지 여부

• Ease 의 시작

• 문서의 완전성

시중에는 Angular에 사용할 수 있는 클래스 라이브러리가 많이 있으며 프로젝트 및 기업 조건에 따라 선택할 수 있습니다. 선택적 UI 라이브러리를 간략하게 나열합니다.

• Angular Material: Angle 공식 UI 라이브러리. https://material.angular.io/Angular Material: angular 官方UI库。https://material.angular.io/

• clarity: 国外的一套比较流行的框架， https://clarity.design/。

• NG-ZORRO: 阿里Ant Design的Angular版本。 https://ng.ant.design/docs/introduce/en

• Element Angular：国内非常流行的基于Vue的Element，同样有Angular版本。 https://element-angular.faas.ele.me/

• Kendo UI

clarity: 비교적 인기 있는 외국 프레임워크인 https://clarity.design/.

NG-ZORRO: Alibaba Ant Design의 각도 버전입니다. https://ng.ant.design/docs/introduce/en

Element Angular: 중국에서 매우 인기 있는 Vue 기반 Element에도 Angular 버전이 있습니다. https://element-angular.faas.ele.me/

검도 UI. 많은 것들이 매우 강력하지만 수수료가 필요합니다. https://www.telerik.com/kendo-angular-ui

• 2.Angular Material
• 2.1. 장점과 단점

2.1.1 장점

• 컴포넌트
• 가장 표준적인 머티리얼 구현

Angular 핵심 컴포넌트의 업데이트 진행을 따릅니다공식적으로 Angular와의 동시 업그레이드를 지원합니다

2.1.2.단점

컴포넌트가 다른 프레임워크만큼 많지는 않지만, 기본적으로는 충분합니다. 국내 프레임워크와 특별히 다르지 않은 스타일을 사용합니다.

• 1. 루트 디렉터리에서 다음 명령을 실행합니다.

  ng add @angular/material

2. 페이지가 속한 모듈 또는 app.module .ts.

• // import MatSliderModule
  import { MatSliderModule } from '@angular/material/slider';
  
  …
  @NgModule ({....
    imports: [...,
    MatSliderModule,
  …]
  })

  3. 요약
타사 구성요소에는 고유한 장점과 단점이 있습니다.

회사와 프로젝트의 필요에 따라 선택하세요

🎜🎜🎜Angular Material은 업그레이드가 더 쉽고 공식적으로 지원됩니다. . 🎜🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 타사 UI 라이브러리(Angular Material)를 Angular 프로젝트에 도입하는 방법에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!