Angular后台管理精美模板分享-前后端分离

Vedu • 2020-11-26 11:50 • 资源分享 • 阅读 1408

大名鼎鼎的Ant Design蚂蚁金服UI很多小伙伴们应该都很熟悉，Ant Design官方出品有2个版本React 、Angular（ng-zorro-antd），另外Ant Design Vue由第三方实现，VUE版本目前也比较完善了，但是毕竟不是亲儿子，在VUE生态里面使用的人不是很多。

ant design

Ant Design以及Ant Design Pro界面想必大家都看到过，不管是React/Angular/Vue版本基本上视觉效果是一致的，今天我要介绍的是基于Angular版本ng-zorro-antd版本的一个精美的后台管理模板ng-alain为啥介绍ng-alain，个人感觉比ant design pro界面更加细腻，菜单更加平滑美观也更符合国人的审美风格，下面来几张图对比一下：

第一张截图是ng-alain的

ng-alain

第二张截图是ant design pro的

ant design pro

大家看到没有，基本布局是一致的，不同的是顶部区域和菜单区域的样式个人感觉ng-alain看着更加的美观和舒服。

ng-alain介绍

下面是NG-ALAIN的介绍，引用自其网站： “NG-ALAIN 是一个企业级中后台前端/设计解决方案脚手架，我们秉承 Ant Design 的设计价值观，目标也非常简单，希望在Angular上面开发企业后台更简单、更快速。随着『设计者』的不断反馈，将持续迭代，逐步沉淀和总结出更多设计模式和相应的代码实现，阐述中后台产品模板/组件/业务场景的最佳实践，也十分期待你的参与和共建。”

我们从github上克隆代码（github.com/ng-alain/ng-alain.git），稍后在本地运行查看效果，克隆代码后我们看到其代码目录结构如下：

ng-alain目录结构

我们通过yarn运行启动项目，启动完成后会打开浏览器访问 http://localhost:4200

al-alain 首页

ng-alain工作台

ng-alain使用

ng-alain内置了很多方便的命令，可以创建模块（文件夹区分），新建页面/新增业务组件，通过命令直接帮你将相关功能页面新建好，然后自行完善相应页面即可。具体操作请查看github或者gitee上文档说明，在此不再累述。

ng-alain另外支持IE11（Angular8 开始支持差异化加载，CLI 会构建出两个单独的包，其中一个包支持老的ES5语法当然打包尺寸更大，支持IE11等老的浏览器），和服务端渲染SSR，另外ng-alain支持国际化和ACL 访问控制列表。使用Angular的朋友可以下载体验下ng-alain，感觉确实还不错。

其他Angular后台管理系统

另外要推荐的是ngx-admin，这个后台管理系统模板个人感觉也蛮不错的，当然这个跟antd没啥关系。

ngx-admin

另外该管理系统ngx-admin提供了对应的前后端示例代码，github上仓库名叫ngx-admin-dotnet-starter，直接包括了前端代码和后端.net的接口代码，.net的小伙伴有兴趣的可以下载看下，目录结构如下：

ngx-admin 前后端代码结构图

写在最后

今天的介绍就到这里，文中ng-alain和ngx-admin相关代码均可以从github上获取，不知道下载的小伙伴们可评论区留言。

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/share/15854.html

Angular后台管理精美模板分享-前后端分离

ng-alain介绍

ng-alain使用

其他Angular后台管理系统

写在最后

相关推荐

发表评论