angular 八大组件：6个精选Angular开源UI组件库
angular 八大组件：6个精选Angular开源UI组件库// 引入组件 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饿了么团队出
2020年听过很多同行都说Vue、React、Angula前端三大框架，现在是Vue的天下了。我觉得如果这样理解就太片面了，毕竟每个框架都有自己的优缺点。今天就给大家分享几个在Angular开发中能快速提升开发效率的UI组件库。
Angular官方出品的 material Design 风格的UI组件库。
https://material.angular.io/
https://github.com/angular/components
安装
$ 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>
阿里巴巴团队推出的 Ant Design 风格Angular实现，主要用于企业级中后台产品。
Ant Design UI 的 Angular 实现，开发和服务于企业级中后台产品，开箱即用的高质量 Angular 组件。
https://ng.ant.design
https://github.com/NG-ZORRO/ng-zorro-antd
安装
$ 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>
饿了么团队出品的基于 Angular.js 桌面端组件库。
目前用户活跃度不高，因此，功能还不够完善，不够成熟。不过既然是饿了么团队开发的，可以尝试使用。
https://element-angular.faas.ele.me/
https://github.com/ElemeFE/element-angular
安装
$ 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>'
一套丰富的 UI 组件库，拥有80多种组件。
https://www.primefaces.org/primeng/
https://github.com/primefaces/primeng/
安装
$ 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>
基于 Teradata 平台构建的 Material 风格的一套丰富 UI 组件库。
https://teradata.github.io/covalent/
https://github.com/teradata/covalent/
安装
$ npm i @covalent/core -S
## (optional) Additional Covalent Modules installs
$ npm i @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 imports
CovalentHttpModule.forRoot()
CovalentHighlightModule
CovalentMarkdownModule
CovalentDynamicFormsModule
CovalentBaseEchartsModule
]
...
})
export class AppModule { }
基于 Bootstrap 风格的 Angular 组件库。
https://valor-software.com/ngx-bootstrap
https://github.com/valor-software/ngx-bootstrap
安装
$ 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组件库，可以在下方进行留言讨论，非常期待你的分享！
❤️ 最后
如果觉得这篇文章对你有帮助，点个「关注/转发」，让更多的人也能看到你的分享！
