前言： 在之前的一篇文章已经介绍过了，公司正在使用NG-ZORRO组件库开发后台应用，并且详细的介绍了Angular开发环境的搭建和项目的创建。...这篇文章就是为了让大家熟悉了解我们该如何在Angular项目中使用到NG-ZORRO UI组件库搭建后台管理框架。...NG-ZORRO介绍： 官网地址：https://ng.ant.design/docs/introduce/zh ng-zorro-antd 是遵循 Ant Design 设计规范的 Angular...NG-ZORRO特性： 提炼自企业级中后台产品的交互语言和视觉风格。 开箱即用的高质量 Angular 组件库，与 Angular 保持同步升级。...使用 TypeScript 构建，提供完整的类型定义文件。 支持 OnPush 模式，性能卓越。 数十个国际化语言支持。 深入每个细节的主题定制能力。
NG Zorro [NG Zorro.png] 第三个要重点推荐的Angular组件库是基于Ant Design设计体系的NG Zorro组件库。...Ant Design 是蚂蚁金服的一门设计语言，经历过多年的迭代和积累，它对UI的设计思想已经成为一套事实标准，受到众多前端开发者及企业的追捧和喜爱，也是React开发者手中的神兵利器。...作为Ant Design的Angular实现，NG Zorro不仅继承了Ant Design的独到思想和极致体验，同时也结合了Angular框架的优点和特性。...组件的风格与Ant Design最新版本保持同步，组件的接口也尽量保持与Ant Design的React版本一致。 说Zorro是国内最受欢迎的Angular组件库，相信没有人会反对。...Nebular [Nebular.png] Nebular 是一个可定制的Angular UI库，基于Eva Design设计规范，包含40多个UI组件，4个可视主题，认证和安全模块。
背景 之前项目使用过vue.js+iview，习惯了后端开发的我，总觉得使用不习惯，之前分析易企秀前端代码，接触到了angular js，完备的相关功能，类似后端开发的体验，让人耳目一新，全新的angular...随着『设计者』的不断反馈，将持续迭代，逐步沉淀和总结出更多设计模式和相应的代码实现，阐述中后台产品模板/组件/业务场景的最佳实践，也十分期待你的参与和共建。...先来理下关系： Antd是蚂蚁金服开源的一个服务于企业级产品的设计体系，基于『确定』和『自然』的设计价值观和模块化的解决方案，让设计者专注于更好的用户体验。 Antd官方提供了基于react的实现。...然后开源项目NG-ZORRO(Ant Design of Angular)是Ant Design 的 Angular 实现。...ng-alain技术栈基于 Typescript、Angular、g2、@delon 和 ng-zorro-antd，并遵循Antd设计了新的组件，基于ng-alain可以快速的开发中后台。
结合 ng-zorro angular 比较流行的 ui 框架有： Angular Material 官方指定 UI 框架 NG-ZORRO，又名 Ant Design of Angular 国内比较流行的...如果熟悉 Vue 或者 React 版本的 Ant Design，相信你可以无缝链接啊～ 我们重新使用 angular-cli 生成一个项目 ng-zorro。...如果你还不了解相关的 angular 主要内容，请先前往文章了解 Angular 开发的内容。...添加 ng-zorro 是很简单的事情：进入 ng-zorro 根目录，执行 ng add ng-zorro-antd 即可。...思路： 先添加页面 user 用户的列表页面，使用 ng-zorro 中 table 组件 用户的新增和更改页面可以共用同一个页面，使用 ng-zorro 中 form 组件 页面删除功能直接使用弹窗提示
如何使用angular脚手架搭建项目参看这篇文章 ng new blog-angular 安装NG ZORRO 我们界面UI选用NG ZORRO。...可以参考官网，https://ng.ant.design/#/docs/angular/getting-started cd blog-angular npm install ng-zorro-antd.../platform-browser'; import { NgModule } from '@angular/core'; import { NgZorroAntdModule } from 'ng-zorro-antd.../platform-browser'; import { NgModule } from '@angular/core'; import { NgZorroAntdModule } from 'ng-zorro-antd...效果 源码下载 思考 这章主要写了路由和项目文件的管理。 结合angular的模块化思想，尽量将不同功能的东西分在不同的文件夹中，组成不同的模块。
正如官方所说其目的就是构建基于 Angular 和 TypeScript 的高质量组件库。 官方列举了如下几点来解释“高质量”的含义。 国际化和可访问性，以便所有用户都可以使用。...但是在编写 ng-matero 的过程中，随着对 Angular Material 的深入了解，我发现这种说法稍显狭隘甚至产生了一定的误导，所以我希望这篇文章可以让大家对 Angular Material...题外话：为什么 ng-matero 会选择 Angular Material 抛开官方提到的几点不谈。首先我是那种比较激进的开发者，对于先进的设计理念，我都有跃跃欲试的执念。...国内的 Element UI 以及 Ant Design 都是 Bootstrap 3 时代的风格。...任何组件库都无法满足所有业务需求，如果你无法在 Angular Material 中找到可用的组件，你可以尝试第三方组件，或者可以将 ng-zorro-antd 按模块单独引入。
1：浏览器兼容，浏览器兼容一直是前端开发头疼的事情，各种版本型号的浏览器，相互兼容，调试，往往都会让很多人心力憔悴。...3 and 4 AntDsign for React - 基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。...Ant Design Pro - (React 生态)一个企业级中后台前端/设计解决方案 AntDesign for Vue - 这里是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品...ant-design-pro-vue vue-antd-admin vue-alain ant-design-vue-pro NG-ZORRO - Ant Design of Angular NG-ZORRO-MOBILE...Element for Vue - 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Element-React Element Angular Bootstrap
'zh' : 'en'; 设置 UI 框架的多国语言 这里的 UI 框架我们以 NG-ZORRO 为例，使用的版本号为 ^12.1.1。...现在的脚手架很聪明，我们生成项目，在添加 NG-ZORRO 的时候，它会询问我们选择哪种语言。...import { zh_CN } from 'ng-zorro-antd/i18n'; import zh from '@angular/common/locales/zh'; @NgModule({...所以，我们更改了下： // 引用的 ant design angular 库的语言处理 import { NZ_I18N } from 'ng-zorro-antd/i18n'; // 中文 import...NG-ZORRO 中 Empty 组件的提示成功更改为英文： 设置自定义多国语言 那么，对于我们自定义的页面内容，怎么翻译呢？
每周资讯 IMWeb前端社区 想要成为一名优秀的前端，需要及时掌握互联网技术的时事热点，这周又有哪些值得关注的最新动态呢，让我来为大家一一揭晓！...4 阿里巴巴即将开源 Angular 组件库 NG-ZORRO Zorro 的外观设计由 Ant-Design 团队担纲，而且和其它组件库共享了一致的风格和动画效果。...Zorro 已经在阿里云团队内部使用，无论是组件的数量，还是代码质量，包括外观设计，都非常值得大家期待！...对于 Angular 社区来说，这是一个重大的消息，Zorro 的发布将会进一步提升 Angular 在企业应用方面的巨大优势。...该系统可自动实现服务注册，服务发现、运行状况检查，以及进程的生命周期管理任务。它提供了一种基于HTTP的全新API，简化的配置语言，目前仅支持Consul。
比如ng-zorro中，大量这样用法，https://ng.ant.design/components/card/zh#components-card-demo-simple ? ?...下图是看zorro的ISSUE中的一个截图， 其写法我不知道对不对。 递归组件的标准实践待确认！！！ ? 下面我就这两个情况，实践讨论一下！...一、如何组件自定义输入内容 比如在一个页面上，引用nz-card时，把页面上ng-template>内容插入到nz-card中去， ?...需要考虑几个问题， 1、如何引用当前面页上的一个元素（ 本地变量 # ，我记得以前官方文档叫“局部模版变量"或“模板引用变量”) 2、引用的变量如何传递给子组件中（子组件用@Input 一个类型为TemplateRef...的变量接收） 3、子组件如何使用这个引用变量（ 在模版中，用ngTemplateOutlet 绑定这个变量即可） 4、引用元素从主页面上来， 如何把子组件的数据（即子组件中上下文）传递给这个引用元素上来
问题：edge浏览器下，固定列的边框消失 原因：ng-zorro-antd表格组件使用nzLeft和nzRight指令固定的表格列，这两个指令的实现css3中的标签： position: -webkit-sticky...，我们可以指定宽度，让其超过外层div宽度（这样可以看到滚动效果）。...（nz-range-picker）确认按钮需要点两次 原因：尚未明确 解决方案： 升级组件版本，目前ng-zorro-antd 8.5之上的版本未见这个问题。..." class="ant-calendar-ok-btn abs-right">确 定 ng-template> 对应css： .abs-right { position...此时需要删除原来的页脚，可通过： ::ng-deep .ant-calendar-footer-btn { display: none; } 这种方式删除默认页脚，此时额外的页脚不可使用绝对定位。
Ant Design Pro 是一套开箱即用的中台前端/设计解决方案。...特性 优雅美观：基于 Ant Design 体系精心设计 常见设计模式：提炼自中后台应用的典型页面和场景 最新技术栈：使用 React/dva/antd 等前端前沿技术开发 响应式：针对不同屏幕大小设计...DruidDataSource 高效可管理的数据库连接池。 SQLParser Druid可以做什么？...如下是一个基于Druid内置扩展StatFilter的监控实现： 7：NG-ZORRO NG-ZORRO 是一个企业级的 UI 组件库，是 Ant Design 的 Angular 4.0 实现，开发和服务于企业级后台产品...特性 提炼自企业级中后台产品的交互语言和视觉风格，定期与 Ant Design React 版本保持更新一致。 开箱即用的高质量 Angular 组件。
Pro 是一套开箱即用的中台前端/设计解决方案。...特性 优雅美观：基于 Ant Design 体系精心设计 常见设计模式：提炼自中后台应用的典型页面和场景 最新技术栈：使用 React/dva/antd 等前端前沿技术开发 响应式：针对不同屏幕大小设计...DruidDataSource 高效可管理的数据库连接池。 SQLParser Druid可以做什么？...7.NG-ZORRO NG-ZORRO 是一个企业级的 UI 组件库，是 Ant Design 的 Angular 4.0 实现，开发和服务于企业级后台产品。...特性 提炼自企业级中后台产品的交互语言和视觉风格，定期与 Ant Design React 版本保持更新一致。 开箱即用的高质量 Angular 组件。
前言： 上一篇文章我们讲了如何在创建的Angular项目中快速引入ng-zorro-antd企业中台组件库，并且快速构建后台管理页面框架模板。...这一章主要介绍的是如何在创建好的后台管理页面框架的快速生成NG-ZORRO相关的组件，并且介绍Angular相关目录结构、生命周期函数，路由配置和使用相关知识点，以及如何使用Angular CLI使用一行代码快速添加...让你快熟的构建一个属于自己的NG-ZORRO后台管理框架，注意我们的前端代码的编写全部都是在VS Code上面编写。 Angular项目目录介绍（重要）： ?...app.module.ts（根模块）： NgModule 用于描述应用的各个部分如何组织在一起。 每个应用有至少一个 Angular 模块，根模块就是你用来启动此应用的模块。...项目开源地址： https://github.com/YSGStudyHards/YyFlight-NG-ZORRO
框架间的差异越来越小，加上 Ant-Design/Fusion-Design/NG-ZORRO/ElementUI 组件库的成熟，选择任一你熟悉的框架都能高效完成业务。 那接下来核心问题是什么？...无论如何优化，始终要遵循 Redux 三原则： ? 这三个问题我们是通过自研 iron-redux 库【1】来解决，以下是背后的思考： 如何组织 Action？...四、开发工具覆盖全链路 2019 年，你几乎不可能再开发出 React/Angular/Vue 级别的框架，也没必要再造 Ant-Design/Fusion-Design/Ng-Zorro 这样的轮子。...单拿其中的【开发】环节展开，就有很多可扩展的场景： ? 一个有代表性的例子是，我们开发了国际化工具 kiwi【7】。...通过 CR 让项目中任何一行代码都至少被两人触达过，减少了绝大多数的低级错误，提升了代码质量，这也是帮助新人成长最快的方式之一。 ?
使用 NG ZORRO 在上一篇文章中，我们已经安装了NG ZORRO，并在跟模块中引入了，在子模块中使用还需要再次引入。...编辑layout模块中的header组件 在layout.module.ts中引入NG ZORRO import { NgZorroAntdModule } from 'ng-zorro-antd...这两个并没有设计成core模块的组件，但是也放在这里，不知道放在哪里合适。...注意这个子模块我们要使用NG ZORRO，所以还是要在子模块中引入。...动态路由是如何传值的 页面样式和布局如何优化
所以到了我这里的时候，我就在想我要如何做，怎么做。公司内，我基本上已经变成了一个非常纯粹的管理者了，基本上不用写什么业务代码，更多的时候做做技术选型架构设计。...然后机缘之下接触到了卡色的Ng-alain，然后进行了集成和适配。但是因为版本太早,无论是Ng-alain还是ng-zorro，在当时生态相比react的版本都不那么成熟。...这个也是让我体会到了如何做最大的兼容性对于框架的设计者来说挑战才是最大的。 这也是非常佩服土牛的模块化设计思想。...52ABP在2019年，做了太多对于Angular下的适配了，尤其是NG-Zorro的官方组件过于残缺，但是已经上车了就坚持搞了下去，好在仅两年ng-zorro的官方组件生态库越来越完善和齐备。...而我呆的是积微物联因为运营模式，加上我的项目因为政策、运营模式都比较新，见到了太多用技术无法解决的事物了之后，所以我就要去思考，52ABP到底要怎么搞，才能长久的做下去。
这是一个让 print 能够不在末尾打印出\n（换行符）符号的小窍门。.../ 另外，介绍几个我常用的第三方组件： 界面组件首选Ant： 链接：NG-ZORRO - Ant Design Of Angular https://ng.ant.design/ 备选Primary：...按照类的设计原则，字段都是private的，只能在类的内部使用，如果是public的，那么外部类谁都有可能访问，对字段进行破坏性的修改，这是我们不希望看到的，所以字段一定是private的。...，或者让某个字段只能读不能赋值（对应该字段的的属性只让它有get{}，不写set{}）。...对于外部使用者来说只能够使用它，不能控制它，如何控制操作是由类自身决定的（或者说是由程序员决定的，嘿嘿~）。 另外，字段值可以用作ref、out参数，而属性不能。
框架间的差异越来越小，加上 Ant-Design/NG-ZORRO/ElementUI 组件库的成熟，选择任一你熟悉的框架都能高效完成业务。 那接下来核心问题是什么？我们认为是状态管理。...最终 TS 让代码更加健壮，尤其是对于大型项目，编译通过几乎就代表运行正常，也给重构增加了很多信心。.../Vue 级别的框架，也没必要再造 Ant-Design/Ng-Zorro 这样的轮子。...单拿其中的【开发】环节展开，就有很多可扩展的场景： ? 一个有代表性的例子是，我们开发了国际化工具 kiwi-intl。...通过 CR 让项目中任何一行代码都至少被两人触达过，减少了绝大多数的低级错误，提升了代码质量，这也是帮助新人成长最快的方式之一。 ?
-g @angular/cli # 创建为 standalone 类型的项目 ng new angular-ngx-formly --standalone=false 安装 NG-ZORRO 组件库...： 推荐使用 angular-cli 提供的 ng add 进行安装配置： # 1....选择创建项目的模板: sidemenu ng add ng-zorro-antd 安装 Formly 核心模块： 推荐使用 angular-cli 提供的 ng add 进行安装配置： # 可选主题包括...：bootstrap / material / ng-zorro-antd / ionic / primeng / kendo / nativescript # 需要组件库的使用同步 ng add @ngx-formly.../schematics --ui-theme=ng-zorro-antd Angular CLI 添加新页面： 推荐使用 angular-cli 提供的 ng generate 自动生成： ng g m
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
