Ant Design 的 Angular 实现 NG-ZORRO

Ant Design 的 Angular 实现 NG-ZORRO

MIT
跨平台
阿里巴巴
2017-08-16
局长

NG-ZORRO

Ant Design 的 Angular 实现,开发和服务于企业级后台产品。

Travis branch Codecov GitHub Release Date npm package NPM downloads GitHub license Gitter extension-for-VSCode Twitter

✨ 特性

  • 提炼自企业级中后台产品的交互语言和视觉风格。
  • 开箱即用的高质量 Angular 组件,与 Angular 保持同步升级。
  • 使用 TypeScript 构建,提供完整的类型定义文件。
  • 支持 OnPush 模式,性能卓越。
  • 支持自定义主题。
  • 支持使用单独某个组件。

🖥 支持环境

  • Angular ^8.0.0
  • 支持服务端渲染
  • 现代浏览器,以及 Internet Explorer 11+ (使用 polyfills
  • Electron
IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
Opera
Electron
Electron
IE11, Edge last 2 versions last 2 versions last 2 versions last 2 versions last 2 versions

由于 @angular/cdk 的缘故,ng-zorro-antd 支持主要浏览器的最新两个主版本。

🎨 设计规范

ng-zorro-antd 与 Ant Design 设计规范定期同步,你可以在线查看同步日志

📦 安装

我们强烈推荐官方的 @angular/cli 工具链辅助进行开发,在实际项目开发中,它可以很好的满足对 TypeScript 代码的构建、调试、代理、打包部署等一系列工程化的需求。

$ ng new PROJECT_NAME
$ cd PROJECT_NAME
$ ng add ng-zorro-antd

如果你想了解更多CLI工具链的功能和命令,建议访问 Angular CLI 了解更多

🔨 使用

在每一个需要使用组件的 module 中引入 NgZorroAntdModule

import { NgZorroAntdModule } from 'ng-zorro-antd';

@NgModule({
  imports: [ NgZorroAntdModule ]
})
export class AppModule {
}

@angular/cli 的用户不需要担心下面这项设置,但知道也挺有好处。

然后在 angular.json 文件中引入样式和 SVG icon 资源。

{
  "assets": [
+   {
+     "glob": "**/*",
+     "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
+     "output": "/assets/"
+   }
  ],
  "styles": [
+   "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
  ]
}

参考快速上手以了解更多。

🔗 链接

⌨️ 开发

$ git clone git@github.com:NG-ZORRO/ng-zorro-antd.git
$ cd ng-zorro-antd
$ npm install
$ npm run site:start

浏览器会自动打开。

加载中

评论(25)

不愿透露姓名的Mr成
不愿透露姓名的Mr成
前端都不需要懂oop的么?那写出来的代码个shi有什么区别,一个ng把这些人难成这样
Oo蚂蚁上树不怕高oO
Oo蚂蚁上树不怕高oO
脚本功能只是其一了…
黑狗
黑狗
现在的新框架,入门门槛基本没有,会前端的,1天就能开始正式开发,只有碰到优化和及其少数的情况才需要去看原理和源码
OSC_aUYLVd
OSC_aUYLVd
非常好用
xiaoVVV
xiaoVVV
留一个阿里云免费优惠券->http://izhuanyer.com
大括号啊
大括号啊
听说只有老的,不愿进步的码农才会说:要什么angular要什么react要什么vue,我们jquary不很好吗??? 啥,大清都亡了。sb
i
izhuanyer
我才不告诉你我有阿里云优惠卷->http://izhuanyer.top
4fun
4fun
我只想说,阿里的轮子,方
哈蛋
不清楚大家都是考虑,我一直坚持,那些相对原始的东西弄个好了,再根据具体需要选择往上的东西。
陈鸿彬
nz-form报错怎么回事啊,就官网上的代码贴进来的Can't bind to 'formGroup' since it isn't a known property of 'form'.

NG-ZORRO 8.5.1 发布,Ant Design 的 Angular 实现

NG-ZORRO 8.5.1 发布了。NG-ZORRO 是 Ant Design 的 Angular 实现,用于开发和服务于企业级后台产品。 新版本更新内容如下: Bug Fixes code-editor: 修复 config 取值错误,优化相关文档 (#...

2019/11/20 07:26

NG-ZORRO 8.5.0 发布,Ant Design 的 Angular 实现

NG-ZORRO 8.5.0 发布了。NG-ZORRO 是 Ant Design 的 Angular 实现,用于开发和服务于企业级后台产品。 新版本更新内容如下: Bug Fixes auto-complete: 修复默认值无法选中的问题 (#4366)...

2019/11/12 07:20

NG-ZORRO 8.4.1 发布,Ant Design 的 Angular 实现

NG-ZORRO 8.4.1 发布了。NG-ZORRO 是 Ant Design 的 Angular 实现,用于开发和服务于企业级后台产品。 新版本更新内容如下: Bug Fixes core: 修复全局配置在 prod 模式下的问题 (#4325) (c...

2019/10/25 07:07

NG-ZORRO 8.4.0 发布,Ant Design 的 Angular 实现

NG-ZORRO 8.4.0 发布了。NG-ZORRO 是 Ant Design 的 Angular 实现,用于开发和服务于企业级后台产品。 新版本更新内容如下: Bug 修复 tree: 修复 nzHideUnMatched 不生效的问题 (#4286) (8...

2019/10/16 07:17

NG-ZORRO 8.3.0 发布,Ant Design 的 Angular 实现

NG-ZORRO 8.3.0 发布了。NG-ZORRO 是 Ant Design 的 Angular 实现,用于开发和服务于企业级后台产品。 新版本更新内容如下: Bug Fixes cascader: 支持假值, 除了 null / undefined) (#4119...

2019/09/11 07:17

NG-ZORRO-MOBILE 1.0.0 beta.2 发布,基于 Angular 8 的 UI 组件

NG-ZORRO-MOBILE 1.0.0 beta.2 发布了,NG-ZORRO-MOBILE 是 Ant Design 移动规范的 Angular 实现,服务于阿里巴巴集团数据无线业务。 更新内容如下: Bug Fixes list: 修复 typescript 格式导...

2019/09/08 07:34

NG-ZORRO-MOBILE 1.0.0 beta.1 发布,基于 Angular 8 的 UI 组件

NG-ZORRO-MOBILE 1.0.0 beta.1 发布了,NG-ZORRO-MOBILE 是 Ant Design 移动规范的 Angular 实现,服务于阿里巴巴集团数据无线业务。 更新内容如下: Bug Fixes module: stepper: 修复用户输...

2019/09/05 07:29

NG-ZORRO 8.2.1 发布,Ant Design 的 Angular 实现

NG-ZORRO 8.2.1 发布了。NG-ZORRO 是 Ant Design 的 Angular 实现,用于开发和服务于企业级后台产品。 新版本更新内容如下: Bug Fixes cascader: 修复鼠标移动未正确隐藏子节点问题 (#3916...

2019/08/28 07:03

NG-ZORRO-MOBILE 1.0.0 beta.0 发布,基于 Angular 的 UI 组件

NG-ZORRO-MOBILE 1.0.0 beta.0 发布了,NG-ZORRO-MOBILE 是 Ant Design 移动规范的 Angular 实现,服务于阿里巴巴集团数据无线业务。 更新内容如下: BreakChange toast: toast 重构 (454b5...

2019/08/24 07:45

NG-ZORRO 8.2.0 发布,Ant Design 的 Angular 实现

NG-ZORRO 8.2.0 发布了。NG-ZORRO 是 Ant Design 的 Angular 实现,用于开发和服务于企业级后台产品。 新版本更新内容如下: Bug Fixes badge: 修复初始动画问题 (#3925) (353c95b), closes ...

2019/08/14 07:17

没有更多内容

加载失败,请刷新页面

1
回答
NG-ZORRO标签页渲染问题

使用ng-zorro组件的nz-tab来做有个标签页切换,但是不知道为什么标签名渲染不出来,求解答 <nz-tabset> <nz-tab *ng...

2018/04/26 09:57

没有更多内容

加载失败,请刷新页面

没有更多内容

NG-ZORRO-MOBILE (Ant Design Mobile of Angular) 移动端UI组件库正式发布

NG-ZORRO-MOBILE 是 Ant Design 移动规范的 Angular 实现。 Ant Design 作为服务于企业级产品的设计体系,基于『确定』和『自然』的设计价值观,通过模块化的解决方案,降低冗余的生产成本,...

2018/10/15 10:38
65
0
ng-alain 发布正式版!

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

2018/07/26 14:49
1.9K
1
ng-zorro-antd V0.6~V0.7 升级指南

NG-ZORRO-ANTD v0.7升级指南 官方写给0.6.x 版本用户 CHANGELOG 如何升级 npm install ng-zorro-antd@0.7.0 命令即可升级至 0.7.0 正式版本 升级后项目会有各种问题 首先引入样式 修改.angu...

2018/11/06 17:34
444
0
ng-zorro 的upload组件 与 msf4j 的合作实现文件上传

1. 准备工作 ng-zorro的upload组件可以实现文件上传,当然还有其他的组件可以实现同样的功能,这里就不讨论其他的了。 msf4j是java的一个微服务框架,这里使用它来实现后端上传。 angular:>...

2019/07/11 00:12
47
0
基于阿里出得ng-Alain搭建后台管理系统

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

2018/07/18 16:00
1.8K
0
angular 在惰性加载模块引入ng-zorro报错

![](https://oscimg.oschina.net/oscnet/d7086b52d2f791caf492419551ae5712b73.jpg) 找了半天 按照报错提示 是重复引入了BrowserModule模块 但是查找了整个项目 除了在app.module.ts外根本没...

2018/06/08 15:09
18
0
angular/cli@8.2.0整合ng-zorro-antd@8.1.2创建项目

一、项目目录结构 二、安装 angular/cli@8.2.0 npm install -g @angular/cli@8.2.0 三、使用 angular/cli@8.2.0 创建项目 项目创建指令:ng new angular-demo --routing 四、安装 ng-zorro-a...

2019/03/26 12:36
180
0
Snails 1.0正式发布

Snails 项目源于给实习生做的一个Ng-Alain + SpringBoot入门学习项目,随着项目逐步完善,便将其开源并正式发布Snails 1.0版本。 基于简单、实用性等考虑,项目中使用了Lombok、Jpa、Java8等...

01/20 04:51
56
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部