大名鼎鼎的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上获取，不知道下载的小伙伴们可以私信给我。

angular新建组件_精美Angular后台管理模板分享-前后端分离（含所有代码）相关推荐

java计算机毕业设计基于springboot+vue+elementUI的口腔管理平台管理系统(前后端分离）
项目介绍口腔卫生是关系民生的一个重要问题.口腔健康会直接影响全身的健康,口腔基本常见的有龋齿,牙周炎等问题,而且人类的牙齿只有2次更换周期,一旦牙齿彻底完成更换终生将不再更换,所以越来越多的人开始关 ...
bootstrap4 后台管理模板_开源的后台管理模板
后台管理模板 vue-Element-Admin vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui 实现. 它使用了最新的前端技术栈,内置了 i18 ...
crm开源系统 tp框架_八个开源的 Spring Boot 前后端分离项目，一定要收藏！
点击蓝色字关注我们前后端分离已经在慢慢走进各公司的技术栈,不少公司都已经切换到这个技术栈上面了.即使贵司目前没有切换到这个技术栈上面,也非常建议大家学习一下前后端分离开发,以免在公司干了两三年,SS ...
前后端分离项目_七个开源的 Spring Boot 前后端分离项目，一定要收藏
来自公众号:江南一点雨前后端分离已经在慢慢走进各公司的技术栈,根据松哥了解到的消息,不少公司都已经切换到这个技术栈上面了.即使贵司目前没有切换到这个技术栈上面,松哥也非常建议大家学习一下前后端分离开 ...
java 同域名下怎么访问同事的项目_喜大普奔，两个开源的前后端分离项目可以在线体验了...
折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和V 部落上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了,以帮助 ...
前后端解析_好程序员Web前端教程分享前后端分离接口
随着互联网的高速发展以及IT开发技术的升级,前后端分离已成为互联网项目开发的业界标准使用方式.在实际工作中,前后端的接口联调对接工作量占Web前端人员日常工作的30%-50%,甚至会更高.接下来的好程 ...
angular ui组件_使用Angular Material将现代UI组件添加到Angular项目中
angular ui组件 Learn how to use Angular Material in this full course for beginners from Codevolution. ...
layui查档页面_首页--layui后台管理模板 2.0
将顶部高度修改为50px,如果有朋友感觉还是原来的高度更好,请将index.css文件中最底部的4行样式去掉即可,有注释郑重提示:由于后期会对此框架进行多次开发,基本上修改的是大框架,所以强烈不建议 ...
vue3+ts+vite后台管理模板
vue3+ts+vite后台管理模板支持前后端控制权限,使用uniapp+vue3+ts+elementplus+vite开发,码云地址:https://gitee.com/yongqiang062 ...
angular4前后端分离_使用Angular v4的新HTTP客户端
angular4前后端分离 With the release of Angular v4.3 in July, some new features where introduced. Among th ...

angular新建组件_精美Angular后台管理模板分享-前后端分离（含所有代码）

ng-alain介绍

ng-alain使用

其他Angular后台管理系统

写在最后

angular新建组件_精美Angular后台管理模板分享-前后端分离（含所有代码）相关推荐

最新文章

热门文章