ng-alain 基于 ng-zorro-antd 的企业管理后台脚手架。
从开始我一直把它定位在一个 Angular 企业管理后台最佳实践,同时,在公司内部也开始正式基于此模板开发。
她包括几个特性:
- 基于
ng-zorro-antd
- 响应式
- 国际化
-
ACL访问控制
- 基于角色
- 路由守卫
- 延迟加载及良好的启用画面
- 良好的UI路由设计
- 十种颜色版本
-
SCSS预编译
- 良好的目录组织结构
- 简单升级
- 模块热替换
虽然时间只有短短3周,但上述性也是基于项目经验的一次整合。
一、如何下载?
ng-alain 本身并非组件,只是一个单纯的企业后台模板,你可以直接克隆到你的本地,然后立即进入实际开发。
# clone ng-alain repo # --depth 1 removes all but one .git commit history git clone --depth 1 https://github.com/cipchk/ng-alain.git # change directory cd ng-alain # install npm package # in china please use cnpm (https://github.com/cnpm/cnpm) npm install # start the serve npm start # use HMR npm run serve:hmr
二、如何开发?
ng-alain
会一直与 ng-zorro-antd
保持同步更新,但这不代表你需要重新克隆 ng-alain
。
1、目录结构
项目是通过 ng new
来构建的,就如同你平时要创建项目一样,因此,当你克隆 ng-alain
到你本地后,只需要执行 npm install
,那么就相当构建好一个新项目。
以下是一个完整的大概结构:
_documents (允许删除) _screenshot (允许删除) src app core preloader settings translator (可选:国际化) acl (可选:国际化) net (可选:HTTP拦截器) layout routes shared directives (可选:若干自定义的指令) pipes styles assets i18n (可选:国际化) img (可选:一些图片资源) .angular-cli.json package.json
对于可选的文件夹,允许你直接删除,但可能会由于一些依赖倒置编译失败,可以根据编译结果自行调整并删除相关语句。
core
core文件夹包括菜单配置、布局配置、颜色主题、国际化(可选);我建议如果企业后台无须国际化允许删除它。而其他建议保留。
layout
页面整体布局结构,包括:头部、左边菜单,除非在更新日志中明确提醒否则该目录不太会变动。
routes
具体业务页面可以全部放在该目录下面。有关文件结构,可以参考里面的风格。这里的内容对于后续的升级不会有任何是影响。
shared/styles
核心文件,除非你知道你在干什么,否则不建议你去调整它们。
.angular-cli.json
scripts
节点包括第三方类库包引用配置,可以放心移除。
2、项目名称问题
由于是直接克隆的基础上进行开发,因此,对于项目命名上面,有一个窍门是搜索整个文件夹把 ng-alain
替换成你的名称即可。
三、增强 CSS
ng-alain 增加了一些便于微调的样式脚本,包括:排印、颜色、工具类等,有关更多细节可以参与项目 _document 目录的相关文档。
四、关于Antd
ANT Design 官网有一句话:一个 UI 设计语言。除了官网的 react、Angular 实现版本外,还有人实现了 Vue 版本,可以说主流的框架都有它的相应的版本在维护着。
Ant Design 热度非常高,甚至开始有企业在招聘上明确写明有该经验会有加分项。其指引文章系列真心是经典,因此,我建议在你开始接触Antd可以先好好阅读它们。
五、后续
ng-alain 我会一直维护着它,并保持与 Angular、Angular-Cli、ng-zorro-antd 的同步更新。同时,会逐一丰富示例代码,希望这些示例代码能简化日常开发模板需求,同时也欢迎各位PR你的示例代码。
截图