2020年母汤氏许多南埃尔普都说Vue、React、Angula后端三大架构，那时是Vue的四海了。我真的假如这种认知就太狭隘了，即便每一架构都有他们的优劣。那时就给我们撷取两个在Angular合作开发江苏舜天队快速提高合作开发工作效率的UI模块库。
1、Angular/Material
Angular非官方公司出品的 Material Design 艺术风格的UI模块库。
加装
$ npm i @angular/material -S采用
// 导入模块 import { NgModule } from @angular/core; import { MatButtonModule, MatCheckboxModule } from @angular/material; @NgModule({ … imports: [MatButtonModule, MatCheckboxModule], … }) export class AppModule { } // 模板中采用 <button mat-button>Basic</button> <mat-checkbox class=”example–margin” [(ngModel)]=“checked”>Checked</mat-checkbox>2、NG-ZORRO
阿里巴巴团队推出的 Ant Design 艺术风格Angular实现，主要用于企业级中后台产品。
Ant Design UI 的 Angular 实现，合作开发和服务于企业级中后台产品，开箱即用的高质量 Angular 模块。
加装
$ npm i ng-zorro-antd -S采用
// 导入模块 import { NgModule } from @angular/core; import { NzButtonModule } from ng-zorro-antd/button; import { AppComponent } from ./app.component; @NgModule({ declarations: [ AppComponent ],imports: [ NzButtonModule ] }) export class AppModule { } // 模板中采用<button nz-button nzType=“primary”>Primary</button>3、Element-Angular
饿了么团队公司出品的基于 Angular.js 桌面端模块库。
目前用户活跃度不高，因此，功能还不够完善，不够成熟。不过既然是饿了么团队合作开发的，可以尝试采用。
加装
$ npm i element-angular -S采用
import { BrowserModule } from @angular/platform-browser // import module import { ElModule } from element-angular // if you use webpack, import style import element-angular/theme/index.css @NgModule({ imports: [ BrowserModule, ElModule.forRoot(), … ], … bootstrap: [ExAppComponent], })// components template: <el-button>Hello World</el-button>4、PrimeNG
一套丰富的 UI 模块库，拥有80多种模块。
加装
$ npm i primeng primeicons -S采用
// 导入模块 import { NgModule } from @angular/core; import{ ButtonModule }from primeng/button; import { AppComponent } from ./app.component; @NgModule({ declarations: [ AppComponent ],imports: [ ButtonModule ] }) export class AppModule { } // 模板中采用<button pButton type=“button” label=“Click” ></button> <p-button label=“Click” ></p-button>5、Covalent
基于 Teradata平台构建的 Material 艺术风格的一套丰富 UI 模块库。
加装
$ npm i @covalent/core -S ## (optional) Additional Covalent Modules installs $ npmi @covalent/http @covalent/highlight @covalent/markdown @covalent/dynamic-forms @covalent/echarts -S采用
import{ NgModule }from @angular/core; import { CovalentLayoutModule } from @covalent/core/layout; import{ CovalentStepsModule }from @covalent/core/steps; /* any other core modules */ // (optional) Additional Covalent Modules imports import { CovalentHttpModule } from @covalent/http; import { CovalentHighlightModule } from @covalent/highlight; import { CovalentMarkdownModule } from @covalent/markdown; import{ CovalentDynamicFormsModule }from @covalent/dynamic-forms; import { CovalentBaseEchartsModule } from @covalent/echarts/base; // other imports @NgModule({ imports: [ CovalentLayoutModule, CovalentStepsModule, // (optional) Additional Covalent Modules importsCovalentHttpModule.forRoot(), CovalentHighlightModule, CovalentMarkdownModule, CovalentDynamicFormsModule, CovalentBaseEchartsModule, ], … })export class AppModule { }6、Ngx-Bootstrap
基于 Bootstrap 艺术风格的 Angular 模块库。
加装
$ npm i ngx-bootstrap -S采用
import{ NgModule }from @angular/core; import { TooltipModule } from ngx-bootstrap/tooltip; @NgModule({ … imports: [TooltipModule.forRoot(),…] … })export class AppModule { } // 模板中采用 <button type=“button” class=“btn btn-primary” tooltip=“Vivamus sagittis lacus vel augue laoreet rutrum faucibus.”> Simple demo </button>这次就撷取到这里，假如小伙伴们有比较好的Angular模块库，可以在下方进行留言讨论，非常期待你的撷取！
❤️ 最后
转发」，让更多的人也能看到你的撷取！
