angular开发案例（精美Angular后台管理模板分享-前后端分离）

angular开发案例（精美Angular后台管理模板分享-前后端分离）下面是NG-ALAIN的介绍，引用自其网站： “NG-ALAIN 是一个企业级中后台前端/设计解决方案脚手架，我们秉承 Ant Design 的设计价值观，目标也非常简单，希望在Angular上面开发企业后台更简单、更快速。随着『设计者』的不断反馈，将持续迭代，逐步沉淀和总结出更多设计模式和相应的代码实现，阐述中后台产品模板/组件/业务场景的最佳实践，也十分期待你的参与和共建。”大家看到没有，基本布局是一致的，不同的是顶部区域和菜单区域的样式个人感觉ng-alain看着更加的美观和舒服。ng-alain第二张截图是ant design pro的ant design pro

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