文档章节

ng-alain 发布正式版!

黑魔法
 黑魔法
发布于 2018/07/26 14:49
字数 1111
阅读 453
收藏 1

ng-alain是一个基于ng-zorro-antd的企业后台脚手架,目标也非常简单,希望在Angular上面开发企业后台更简单、更快速。github地址是:cipchk/ng-alain

一直以来对Ant Desig的理念非常喜欢,而一直出于工作的需要能够运用的机会本不多,直到 ng-zorro-antd 的出现,终于能够在内部真正实践。而 ng-alain 虽然时间很短,但在群里很多朋友的支持下,让其尽可能有一个比较可靠的实施。据我所知包括我们公司自己在内,已经有好几个企业开始转移至该脚手架上面来。

你可以非常简单的从 github 克隆一份最新代码,然后立即进入业务开发。

git clone --depth 1 https://github.com/cipchk/ng-alain.git

结构

ng-alain 实际是一个标准的 Angular Cli 构建的项目,因此对她就像是你前女友一样,一定不会感到陌生。

在此基础上,我将公共业务组件放在 shared/components 下面,且目前已经包括图表相关有几十个组件服务于企业后台常见业务服务型组件。

我们在处理时间、货币上面频繁极高,而提供一种非常简洁的这类数据渲染极重要。例如:{{ time | date }} 期望结果应该:2017-11-19 04:25;而 {{ price | currenty }} 期望的结果应该是:¥303,634.13 的时候,只需要这样:{{ time | _date }}。没错在 Angular 内置的管道里,我增加了以下划线开头的新管道来处理这类渲染。

以上我尽量保持一种简洁而又有效的方式,我想这也是 Ant Design 理念之一。

样式风格

ng-alain 有自己的一套样式风格定义,但这些定义都是基于 Ant Desig 设计理念;例如,两个横向按钮之间以 Ant Desig 的一种标准应该有 8px 的间距,一般我们会这样:

<button nz-button style="margin-right: 8px">A</button>
<button nz-button>B</button>

而对于 ng-alain 来说,应该是这样:

<button nz-button class="mr-sm">A</button>
<button nz-button>B</button>

假如你是在一个表单里出现时,你连 class 都可以省略。

而 ng-alain 默认设置了 preserveWhitespaces: false 因此你会发现俩俩之间真的只有 8px。

Ant Design PRO

它是 React 发布不久的一个脚手架真的非常棒,没几天其 Star 就直接盖了 ng-zorro-antd 有点心疼 ng-zorro-antd 哈。

当然 React 能做的,Angular 自然也能做,因此 ng-alain 也实现了一套 And Design Pro,原本我打算加一个完全一样的 LayoutComponet。然,我发现 pro 的风格与ng-alain真的不谋而合,将 pro 内容区域在 ng-alain 中形成一种很好的契合,文章开头的图片就是来自 Pro 在 ng-alain 实现的分析页。

Pro 页面并不多,但涵盖面很广,ng-alain 除了用户页以外其他页面都已经实现完毕。

ng-zorro-antd-extra 番外篇

维护 ng-zorro-antd 的阿里团队的确有点小慢,特别是在 Ant Design 马上要 3.0,而当前 ng-zorro-antd 还有很多值得优化以及一些部分核心组件还未上线,而别说 3.0 的计划。因此ng-zorro-antd-extra是我自己维护一个基于 Ant Design 3.0 版本下实现部分非常急需的组件。

在组件接口上我保持 ng-zorro-antd 的风格,我会在未来提交 PR 至 ng-zorro-and。

千言万语

我要表达的话还非常多,只是为了一个记录正式版文章中并不适合讨论太多。或许你可以点开DEMO体验一下。

其中一些我认为值得注意的话已经整合在项目的 _document 下面。

未来

ng-alain 会作为我一个非常重要的开源项目持续更新,当然这一切的来源都是基于 ng-zorro-antd 的基础,但若你一样喜欢 Angular 以及 Ant Design 的理念,那为何不好好看一下 ng-alain,多多少少你能带走点什么。

未来我重点工作会在:

  • 提供更丰富业务组件库
  • 跟进 angular、ng-zorro-antd、Ant Design Pro
  • 工具上的支持,包括:vscode snippets、Angular Cli 中间件等
  • 重构及优化代码



 

本文转载自:https://www.jianshu.com/p/b4dafabefcc6

黑魔法
粉丝 15
博文 178
码字总数 44775
作品 0
武汉
前端工程师
私信 提问
发布 ng-alain 1.0.0 正式版

ng-zorro-antd 0.7.0 发布时我就想说那得喝一杯,这个版本的等待其实在社区里反应是有点“忐忑”,所以当VTHINK跟我说来今天要发布 0.7 时我说那晚上得喝一杯。然而,为了将 ng-alain 也同步...

cipchk
2018/05/16
0
0
基于阿里出得ng-Alain搭建后台管理系统

首先跟大家介绍一下ng_Alain(阿里团队出品) ng-alain技术栈基于 Typescript、Angular、g2、@delon 和 ng-zorro-antd,提前了解和学习这些知识会非常有帮助。 ng-alain 脚手架是基于 Angular ...

方宏春
2018/07/18
477
0
ng alain-PC版的select组件在iphone的Safari浏览器带不出键盘----focus()使用

为了iphone的兼容性~而且是已经上线之后才发现问题,产品还各种催促!!! 项目使用的ng alain的PC版做的,但是现在需要兼容手机适配,只能按照产品的想法做了,但是遇到一个大坑,iphone手机...

YJ_
01/12
29
0
ng-alain官方demo编译打包后,vendor.js文件太大,有啥优化办法吗

ng-alain官方demo编译打包后,vendor.js文件太大,有啥优化办法吗?

ahdkk
02/22
263
1
如何更好使用 ng-zorro-antd 图标

自 ng-zorro-antd 1.7.x 以后图标发生破坏性变更,虽然带了诸多优势,同时也带来几个劣势: 若采用动态加载会产生额外的HTTP请求 若静态加载需要逐一注册图标 组件的 参数无法直接指定图标 ...

cipchk
2018/10/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

spring cloud

一、从面试题入手 1.1、什么事微服务 1.2、微服务之间如何独立通讯的 1.3、springCloud和Dubbo有哪些区别 1.通信机制:DUbbo基于RPC远程过程调用;微服务cloud基于http restFUL API 1.4、spr...

榴莲黑芝麻糊
8分钟前
0
0
Executor线程池原理与源码解读

线程池为线程生命周期的开销和资源不足问题提供了解决方 案。通过对多个任务重用线程,线程创建的开销被分摊到了多个任务上。 线程实现方式 Thread、Runnable、Callable //实现Runnable接口的...

小强的进阶之路
昨天
6
0
maven 环境隔离

解决问题 即 在 resource 文件夹下面 ,新增对应的资源配置文件夹,对应 开发,测试,生产的不同的配置内容 <resources> <resource> <directory>src/main/resources.${deplo......

之渊
昨天
8
0
详解箭头函数和普通函数的区别以及箭头函数的注意事项、不适用场景

箭头函数是ES6的API,相信很多人都知道,因为其语法上相对于普通函数更简洁,深受大家的喜爱。就是这种我们日常开发中一直在使用的API,大部分同学却对它的了解程度还是不够深... 普通函数和...

OBKoro1
昨天
7
0
轻量级 HTTP(s) 代理 TinyProxy

CentOS 下安装 TinyProxy yum install -y tinyproxy 启动、停止、重启 # 启动service tinyproxy start# 停止service tinyproxy stop# 重启service tinyproxy restart 相关配置 默认...

Anoyi
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部