跳转到主内容
趣航编程网 - 趣学编程,启航技术之路!

浅谈Angular项目中如何引入第三方UI库(Angular Material)

本篇文章给大家介绍一下 angular 项目中引入第三方ui库(angular material)的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 环境:Angular CLI: 11.0.6Angular: 11.0.7Node: 12.18.3npm : 6.14.6IDE: VSCode 1. 第三方UI库的选择 Angular开发,除非你只有简单一两个页面,否则引入第三方UI库就是必不可少的。而具体用哪个库,就需要考虑多方面的东西了。【相关教程推荐:《 angular教程 》】 比如: 流行程度 版本更新情况 (是否能跟进anuglar更新,bug是否及时修复) UI风格,是否适用于项目 入手难易程度 文档完善程度 市面上有很多Angular可用的类库,可用根据项目、企业情况去选择。简单列一下可选的UI库。
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
。很多很强大,只是要收费。https://www.telerik.com/kendo-angular-ui 2. Angular Material 2.1. 优缺点 2.1.1. 优点 官方UI组件 最标准的Material实现 紧跟Angular核心组件的更新进度 官方支持与Angular的同步升级 2.1.2. 缺点 组件不像其他框架那么多,但是基本够用 风格不是特别像国内的框架 2.2. 引入到项目 1、根目录下执行下面命令:
ng add @angular/material
2、import 到页面所属的module,或者是app.module.ts中。
// import MatSliderModule import { MatSliderModule } from '@angular/material/slider'; … @NgModule ({.... imports: [..., MatSliderModule, …] })
3. 总结 第三方组件各有优缺点 根据公司、项目的需求去选择 Angular Material升级更容易,官方支持。 更多编程相关知识,请访问: 编程视频 !!

相关文章