Angular 常用模板、组件、规范 (实用）

深藏阁楼爱情的钟 2022-05-15 15:00 535阅读 0赞

整时间：2018-10-30

【PC端】  
**一、Ant Design of Angular（阿里）**  
1、Demo  
[https://ng-alain.github.io/ng-alain][https_ng-alain.github.io_ng-alain]   
2、ng-zorro 官网 （UI组件）  
[https://ng.ant.design/docs/introduce/zh][https_ng.ant.design_docs_introduce_zh]  
3、ng-alain 官网 （企业后台模板）  
[https://ng-alain.com/zh ][https_ng-alain.com_zh]  
4、ng-alain 特性： 响应式、简单升级 、支持Docker部署。。。  
[https://github.com/ng-alain/ng-alain/blob/master/README-zh\_CN.md ][https_github.com_ng-alain_ng-alain_blob_master_README-zh_CN.md]  
5、一套基于 Ng-zorro-antd  （理念）  
[https://www.ctolib.com/topics-122500.html ][https_www.ctolib.com_topics-122500.html]

*  [整个antd的指引文章（非常经典一定要细读）][antd]
 *  [设计规则][Link 1]
 *  [工具类规则][Link 2]
 *  [目录结构与版本升级说明][Link 3]

６、angular 系列（创建项目集成ng zorro）  
[https://www.jianshu.com/p/c3e518d166f2][https_www.ctolib.com_topics-122500.html]  
7、Angular前端项目(使用ng-zorro组件库 、引入echarts等组件 )  
[https://www.jianshu.com/p/e4e9022bb43a][https_www.jianshu.com_p_e4e9022bb43a]

**二、primeNG （大漠穷秋推荐。控件丰富， 比 ng-bootstrap 和 Angular Material 要丰富许多）**  
1、官网（慢）  
[https://www.primefaces.org/primeng/\#/ ][https_www.primefaces.org_primeng_]    
2、大漠穷秋示例  
[https://gitee.com/mumu-osc/NiceFish-Admin][https_gitee.com_mumu-osc_NiceFish-Admin]

**三、Angular/Material2**  
1、官网 (慢, 英文 v7.0.2）  
[https://material.angular.io/][https_material.angular.io]   
2、官网 (中文版 v6.4.6）  
[https://material.angular.cn/][https_material.angular.cn]  
2、GitHub  
[https://github.com/angular/material2][https_github.com_angular_material2]  
3、官方入门教程（中文版）  
[https://www.jianshu.com/p/10c6ccf42e00][https_www.jianshu.com_p_10c6ccf42e00]

【移动端】  
**一、Ionic**  
1、官网  
[https://ionicframework.com/docs/][https_ionicframework.com_docs]

**二、Ant Design Mobile of Angular  （阿里）**  
1、ng-zorro-mobile 官网 (UI组件）   
[http://ng.mobile.ant.design/\#/docs/introduce/zh][http_ng.mobile.ant.design_docs_introduce_zh]         
2、有了ng-zorro-mobile，ionic4如虎添翼   (使用示例）  
[https://cloud.tencent.com/developer/article/1354421][https_cloud.tencent.com_developer_article_1354421]

**三、Angular WeUI 微信组件**  
[https://cipchk.github.io/ngx-weui/\#/start][https_cipchk.github.io_ngx-weui_start]

【其他】  
**一、Angular 模板网 （inspinia、metronic。。。）**  
[http://www.ngui.cc/][http_www.ngui.cc]  
**二、AmdUI （收费，非Angular）**  
[http://demo.admui.com/login][http_demo.admui.com_login]  
三、Vue、React、Angular最佳UI框架  
[https://blog.csdn.net/Fundebug/article/details/80175493?utm\_source=blogxgwz0][https_blog.csdn.net_Fundebug_article_details_80175493_utm_source_blogxgwz0]

【编程规范】  
一、【荐】Angular官方代码风格指南  
[https://blog.csdn.net/chelen\_jak/article/details/83620589][https_blog.csdn.net_chelen_jak_article_details_83620589]  
二、Angular : 项目文件夹src目录结构及作用  
[https://blog.csdn.net/chelen\_jak/article/details/83621788][https_blog.csdn.net_chelen_jak_article_details_83621788]  
三、Angular目录的2种分法（类型优先、功能优先）  
[http://wiki.jikexueyuan.com/project/angularjs-practices-style-guide/general.html][http_wiki.jikexueyuan.com_project_angularjs-practices-style-guide_general.html]  
四、使用 AngularJS 从零构建大型应用 (类型优先）  
[https://www.v2ex.com/t/168015][https_www.v2ex.com_t_168015]

[https_ng-alain.github.io_ng-alain]: https://ng-alain.github.io/ng-alain
[https_ng.ant.design_docs_introduce_zh]: https://ng.ant.design/docs/introduce/zh
[https_ng-alain.com_zh]: https://ng-alain.com/zh
[https_github.com_ng-alain_ng-alain_blob_master_README-zh_CN.md]: https://github.com/ng-alain/ng-alain/blob/master/README-zh_CN.md
[https_www.ctolib.com_topics-122500.html]: https://www.ctolib.com/topics-122500.html
[antd]: https://ant.design/docs/spec/introduce-cn
[Link 1]: https://segmentfault.com/a/1190000010807890
[Link 2]: https://segmentfault.com/a/1190000010807951
[Link 3]: https://segmentfault.com/a/1190000010808012
[https_www.jianshu.com_p_e4e9022bb43a]: https://www.jianshu.com/p/e4e9022bb43a
[https_www.primefaces.org_primeng_]: https://www.primefaces.org/primeng/#/
[https_gitee.com_mumu-osc_NiceFish-Admin]: https://gitee.com/mumu-osc/NiceFish-Admin
[https_material.angular.io]: https://material.angular.io/
[https_material.angular.cn]: https://material.angular.cn/
[https_github.com_angular_material2]: https://github.com/angular/material2
[https_www.jianshu.com_p_10c6ccf42e00]: https://www.jianshu.com/p/10c6ccf42e00
[https_ionicframework.com_docs]: https://ionicframework.com/docs/
[http_ng.mobile.ant.design_docs_introduce_zh]: http://ng.mobile.ant.design/#/docs/introduce/zh
[https_cloud.tencent.com_developer_article_1354421]: https://cloud.tencent.com/developer/article/1354421
[https_cipchk.github.io_ngx-weui_start]: https://cipchk.github.io/ngx-weui/#/start
[http_www.ngui.cc]: http://www.ngui.cc/
[http_demo.admui.com_login]: http://demo.admui.com/login
[https_blog.csdn.net_Fundebug_article_details_80175493_utm_source_blogxgwz0]: https://blog.csdn.net/Fundebug/article/details/80175493?utm_source=blogxgwz0
[https_blog.csdn.net_chelen_jak_article_details_83620589]: https://blog.csdn.net/chelen_jak/article/details/83620589
[https_blog.csdn.net_chelen_jak_article_details_83621788]: https://blog.csdn.net/chelen_jak/article/details/83621788
[http_wiki.jikexueyuan.com_project_angularjs-practices-style-guide_general.html]: http://wiki.jikexueyuan.com/project/angularjs-practices-style-guide/general.html
[https_www.v2ex.com_t_168015]: https://www.v2ex.com/t/168015