发布 ng-alain Beta 版本

ng-alain 基于 ng-zorro-antd 的企业管理后台脚手架。

从开始我一直把它定位在一个 Angular 企业管理后台最佳实践，同时，在公司内部也开始正式基于此模板开发。

她包括几个特性：

• 基于 ng-zorro-antd
• 响应式
• 国际化

• ACL访问控制

  • 基于角色
  • 路由守卫
• 延迟加载及良好的启用画面
• 良好的UI路由设计
• 十种颜色版本

• SCSS预编译

  • 增长排印、颜色、若干小插件
• 良好的目录组织结构
• 简单升级
• 模块热替换

虽然时间只有短短3周，但上述性也是基于项目经验的一次整合。

1、如何下载？

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

2、如何开发？

ng-alain 会一直与 ng-zorro-antd 保持同步更新，但这不表明你须要从新克隆 ng-alain。

注：完整的项目会包括不少示例代码、第三方依赖包等，后续会维护一个简化版本。

一、目录结构

项目是经过 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 节点包括第三方类库包引用配置，能够放心移除。

二、项目名称问题

因为是直接克隆的基础上进行开发，所以，对于项目命名上面，有一个窍门是搜索整个文件夹把 ng-alain 替换成你的名称便可。

3、加强 CSS

ng-alain 增长了一些便于微调的样式脚本，包括：排印、颜色、工具类等，有关更多细节能够参与项目 _document 目录的相关文档。

4、关于Antd

ANT Design 官网有一句话：一个 UI 设计语言。除了官网的 react、Angular 实现版本外，还有人实现了 Vue 版本，能够说主流的框架都有它的相应的版本在维护着。

Ant Design 热度很是高，甚至开始有企业在招聘上明确写明有该经验会有加分项。其指引文章系列真心是经典，所以，我建议在你开始接触Antd能够先好好阅读它们。

5、后续

ng-alain 我会一直维护着它，并保持与 Angular、Angular-Cli、ng-zorro-antd 的同步更新。同时，会逐一丰富示例代码，但愿这些示例代码能简化平常开发模板需求，同时也欢迎各位PR你的示例代码。

截图