首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >有了ng-zorro-mobile,ionic4如虎添翼

有了ng-zorro-mobile,ionic4如虎添翼

作者头像
IT晴天
发布于 2018-10-15 04:59:30
发布于 2018-10-15 04:59:30
2.7K00
代码可运行
举报
文章被收录于专栏:ionic3+ionic3+
运行总次数:0
代码可运行

前端一般会听过阿里的Ant Design,而对于angular使用者,大多也听过ng-zorro(Ant Design for Angular的PC版),最近一次ng-zorro的更新,带来了新的开源迷弟:ng-zorro-mobile(Ant Design Mobile for Angular)。

打开ng-zorro-mobile官网,侧边栏很醒目地标示了在ionic中使用:

ionic使用

众所周知,ionic自身也是一个UI框架,涵盖绝大多数常用组件,但有些组件没有或不好用,就要借助第三方组件,现在有了ng-zorro-mobile,对ionic有了极大的补充。

在ionic中使用ng-zorro-mobile非常简单,先是创建项目,有ionic相关经验对下面几行代码非常熟悉:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
#全局安装ionic-cli
npm install -g ionic
#使用ionic-cli创建项目
ionic start PROJECT-NAME

然后接入ng-zorro-antd-mobile,其中有两种方式:

  1. 使用angular-cli只需要以下一句命令即可完成模块初始化配置(前提安装了angular-cli):
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
ng add ng-zorro-antd-mobile
  1. 使用npm,则先安装模块:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install ng-zorro-antd-mobile --save

然后在 app.modules.ts 中,全局引入 ng-zorro-antd-mobile:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { NgZorroAntdMobileModule } from 'ng-zorro-antd-mobile';
imports: [
    ...
    NgZorroAntdMobileModule
  ]

让我们看下ng-zorro-antd-mobile带来了哪些有用的组件,随便截几个图:

notice

step

picker

imagePicker

calendar

modal

actionSheet

好了,不一一截图了,有兴趣自行上官网上看吧。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.10.13 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
ng-zorro-mobile,踩坑记
ionic3和ionic4差别是比较大的,所以ionic3二次封装的组件基本是不能直接用在ionic4上。ng-zorro-mobile并不是依赖ionic的组件封装,而是基于angular6封装,所以理论上是兼容ionic3/4的,只是ionic3当前稳定版最高兼容到angular5,要使用ng-zorro-mobile要自行调整代码。而ionic4是兼容angular6的,所以可无缝使用ng-zorro-mobile。
IT晴天
2018/10/25
4.3K0
Angular实战之使用NG-ZORRO创建一个企业级中后台框架(新手入门篇)
  在之前的一篇文章已经介绍过了,公司正在使用NG-ZORRO组件库开发后台应用,并且详细的介绍了Angular开发环境的搭建和项目的创建。这篇文章就是为了让大家熟悉了解我们该如何在Angular项目中使用到NG-ZORRO UI组件库搭建后台管理框架。
追逐时光者
2020/12/28
4K0
Angular实战之使用NG-ZORRO创建一个企业级中后台框架(新手入门篇)
Angular 结合 NG-ZORRO 快速开发
连更的这几天的文章,我们已经了解了不少 angular 的知识点了,这次我们来个小成品。
Jimmy_is_jimmy
2022/04/15
2.1K0
Angular 结合 NG-ZORRO 快速开发
Angular-Cli脚手架介绍、安装并搭建项目
最简单的使用方式参照以下 StackBlitz 演示,也推荐 Fork 本例来进行 Bug Report,注意不要在实际项目中这样使用。
江一铭
2022/06/17
2.2K0
Angular-Cli脚手架介绍、安装并搭建项目
Angular 中后台前端解决方案 - Ng Alain 介绍
背景 之前项目使用过vue.js+iview,习惯了后端开发的我,总觉得使用不习惯,之前分析易企秀前端代码,接触到了angular js,完备的相关功能,类似后端开发的体验,让人耳目一新,全新的angular拥抱typescript,更是为后端开发量身打造, 学习angular,可以参考学习笔记: Angular快速学习笔记(4) -- Observable与RxJS Angular快速学习笔记(3) -- 组件与模板 Angular快速学习笔记(2) -- 架构 Angular 快速学习笔记(1) --
JadePeng
2018/05/28
2.1K0
angular2及以上框架PC版后台管理模版手机版
基于Ant Design 的 Angular版本,文档是中文的,ui丰富且漂亮,而且基于管理后台的有相应版本:ng-alain
IT晴天
2018/08/20
1.9K0
Can't bind to 'formGroup' since it isn't a known property of 'form'错误解决方案
最近学习了下angular,利用Angular CLI 在本地搭建了个环境,然后装了个ant.design的NG-ZORRO库,试了下用ui的脚手架来创建组件
李维亮
2021/07/08
1K0
angular使用NG ZORRO来构建博客展示项目(项目结构及路由)
创建项目 使用angular脚手架搭建项目。 如何使用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 --save 在根 module 中需要使用 NgZorroAntdModule.forRoo
易兒善
2018/08/21
1.4K0
angular使用NG ZORRO来构建博客展示项目(项目结构及路由)
Ionic3学习笔记(十二)拍照上传图片以及从相册选择图片上传
Ionic Native - Camera GitHub - cordova-plugin-camera Ionic Native - Image Picker GitHub - ImagePicker
Theo Tsao
2018/09/07
1.5K0
Angular 项目多国语言设置
有时候,我们开发了一个项目,需要走国际化。那么我们需要设置多国语言。下面,我们以 Angular 项目为例,说说怎么针对 Angular 项目来设置多国语言。React 和 Vue 项目同理~
Jimmy_is_jimmy
2023/03/14
2.2K0
Angular 项目多国语言设置
Ionic4与Ionic3部分比较
有较长时间没有用Ionic了,见新的公众号需求比较简单,便决定使用Ionic4来实现。
IT晴天
2018/09/19
7.6K0
Ionic4与Ionic3部分比较
UI库(CSS+HTML)
1:浏览器兼容,浏览器兼容一直是前端开发头疼的事情,各种版本型号的浏览器,相互兼容,调试,往往都会让很多人心力憔悴。
PM吃瓜
2023/03/02
2K0
UI库(CSS+HTML)
npm依赖(框架平台)
写到最后总结得差不多了,后续如果我想起还有哪些框架平台遗漏的,会继续在这篇文章上补全,同时也希望各位倔友对文章里的要点进行补充或者提出自己的见解。欢迎在下方进行评论或补充喔,喜欢的点个赞或收个藏,保证你在开发时用得上。
JowayYoung
2020/04/01
2.9K0
Angular17 使用 ngx-formly 动态表单
ngx-formly 是 Angular 应用实现响应式的动态表单框架,不仅支持自动生成表单、易于上手的自定义字段扩展、自定义验证扩展、支持 Formly Schema 和 JSON Schema,还有开箱即用的内置表单主题。
前端小鑫同学
2024/01/08
1.5K0
Angular17 使用 ngx-formly 动态表单
Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目
  最近一直在使用阿里的NG-ZORRO(Angular组件库)开发公司后端的管理系统,写了一段时间的Angular以后发现对于我们.NET后端开发而言真是非常的友善。因此这篇文章主要是对这段时间使用Angular做一些小总结,希望可以帮到有需要的同学。
追逐时光者
2020/12/23
3.3K0
Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目
Mobile first! Wijmo 5 + Ionic Framework之:Hello World!
本教程中,我们用Wijmo 5 和 Ionic Framework实现一个Mobile的工程:Hello World。 Ionic是什么? Ionic是一个HTML5框架、免费、开源,用于帮助生成hybird mobile Apps (混合移动应用)。 Ionic包含3部分: CSS 样式:用于渲染Web页面,使得页面更接近原生移动应用 (Native App)。 AngularJS:Ionic使用AngularJs的扩展指令作为核心框架库,同时AngularJs也加快了开发过程。 Apache Cordo
葡萄城控件
2018/01/10
2.6K0
Mobile first! Wijmo 5 + Ionic Framework之:Hello World!
Angular实战之使用NG-ZORRO创建一个企业级中后台框架(进阶篇)
  上一篇文章我们讲了如何在创建的Angular项目中快速引入ng-zorro-antd企业中台组件库,并且快速构建后台管理页面框架模板。这一章主要介绍的是如何在创建好的后台管理页面框架的快速生成NG-ZORRO相关的组件,并且介绍Angular相关目录结构、生命周期函数,路由配置和使用相关知识点,以及如何使用Angular CLI使用一行代码快速添加Angular应用的新功能。让你快熟的构建一个属于自己的NG-ZORRO后台管理框架,注意我们的前端代码的编写全部都是在VS Code上面编写。
追逐时光者
2020/12/31
5.1K0
Angular CLI 使用教程指南参考
Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本.
庞小明
2018/07/30
3.5K0
Angular Material 的设计之美
Angular Material 作为 Angular 的官方组件库,无论是设计交互还是易用性都有着极高的质量。正如官方所说其目的就是构建基于 Angular 和 TypeScript 的高质量组件库。
叙帝利
2019/09/29
5.6K0
Angular Material 的设计之美
Angular 实现类似微服务的效果
世间万物皆对象
2024/03/20
2540
推荐阅读
相关推荐
ng-zorro-mobile,踩坑记
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档