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

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

精美Angular后台管理模板分享-前后端分离(含所有代码)

ant design

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

第一张截图是ng-alain的

精美Angular后台管理模板分享-前后端分离(含所有代码)

ng-alain

第二张截图是ant design pro的

精美Angular后台管理模板分享-前后端分离(含所有代码)

ant design pro

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

ng-alain介绍

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

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

精美Angular后台管理模板分享-前后端分离(含所有代码)

ng-alain目录结构

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

精美Angular后台管理模板分享-前后端分离(含所有代码)

al-alain 首页

精美Angular后台管理模板分享-前后端分离(含所有代码)

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没啥关系。

精美Angular后台管理模板分享-前后端分离(含所有代码)

ngx-admin

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

精美Angular后台管理模板分享-前后端分离(含所有代码)

ngx-admin 前后端代码结构图

写在最后

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

内容出处:,

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

发表评论

登录后才能评论