angular17+ionic7集成开发

1、需求背景

因部门要求使用angular作为基础的前端框架,也因为近期需要搭建一套新的移动端H5,故此有采用angular17+ionic7集成搭建项目。

2、搭建步骤

  • 环境安装

        本地开发环境需要需要安装以下版本:

        node 20.9.0

        angular-cli  17.2.2

        ionic-cli 7

## 先版本采用cli方式安装
npm i -g @ionic/cli@7## 安装angular脚手架
npm i -g @angular-cli@17.2.2
  • 搭建NG-ZORRO-MOBILE移动端项目       

        地址:NG-ZORRO-MOBILE - Ant Design Mobile Of Angular根据ng-zorro-mobile官方网站的Ionic中使用章节介绍步骤:       NG-ZORRO-MOBILE - Ant Design Mobile Of Angular

        

ionic start your project name
ng add ng-zorro-antd-mobile@10.0.0

如果采用ng add ng-zorro-antd-mobile方式,则会自动帮你添加ng所需要的各种配置或者包了。

但是需要注意的是:\src\app\app.component.html的页面内容需要修改回来:

<ion-app><ion-router-outlet></ion-router-outlet>
</ion-app>

如果采用npm install ng-zorro-antd-mobile --save方式,则需要自行配置:

(1)app.modules.ts 中,全局引入 ng-zorro-antd-mobile。

(2)angular.json 中,全局引入 ng-zorro-antd-mobile样式。

npm install ng-zorro-antd-mobile --save
  • 运行项目
ionic serve

按照以上即可搭建一个完整的项目了。

3、图标使用

如果你觉得两个UI框架的图标都不太满意,但是自身又不会UI画图切图的话,那么可以使用阿里的图标矢量图:iconfont-阿里巴巴矢量图标库

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/722231.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

老卫带你学---K8S源码剖析(Capabilities)

K8S源码剖析&#xff08;Capabilities&#xff09; 我们可以在pod、container中通过设置securityContext来限制container对宿节点的权限 但是有的时候我们需要给予container部分系统特权&#xff0c;那就需要额外配置capability&#xff0c;比如这样&#xff1a; containers…

【语言学习】C++algorithm库的命名空间问题

阅读这篇文章时&#xff0c;发现一个很有趣的点&#xff0c;原来使用copy和back_inserter时不需要使用std::。 查了一圈资料&#xff0c;没找到合理的解释&#xff0c;问了一下GPT&#xff1a; algorithm中的函数不需要显式地使用std命名空间是因为这些函数通常在标准库头文件中…

数据结构与算法:堆排序和TOP-K问题

朋友们大家好&#xff0c;本节内容来到堆的应用&#xff1a;堆排序和topk问题 堆排序 1.堆排序的实现1.1排序 2.TOP-K问题3.向上调整建堆与向下调整建堆3.1对比两种方法的时间复杂度 我们在c语言中已经见到过几种排序&#xff0c;冒泡排序&#xff0c;快速排序&#xff08;qsor…

QJsonValue的学习

类型判断&#xff1a; QJsonValue v("1");QJsonValue v1(1);qDebug()<<v.isString();//trueqDebug()<<v.isBool();//falseqDebug()<<v.isDouble();//falseqDebug()<<v1.isString();//falseqDebug()<<v1.isBool();//falseqDebug()<…

微信小程序云开发教程——墨刀原型工具入门(安装以及基础使用教程)

引言 作为一个小白&#xff0c;小北要怎么在短时间内快速学会微信小程序原型设计&#xff1f; “时间紧&#xff0c;任务重”&#xff0c;这意味着学习时必须把握微信小程序原型设计中的重点、难点&#xff0c;而非面面俱到。 要在短时间内理解、掌握一个工具的使用&#xf…

嵌入式学习32-函数传参复习及进程的消息队列

1.函数: 1.函数的定义 2.函数的调用 3.函数的声明 2.函数传参: 1.赋值传递&#xff08;复制传递&#xff09; 函数体内部想要使用函数体外部变量值的时候使用复制传递 2.全局变量传递 3.地址传递 函数体内部想要修改函数体外部变量值的时候使…

代码随想录刷题day14|二叉树的理论基础二叉树的前中后序递归遍历

文章目录 day14学习内容一、二叉树的理论基础1.1、完全二叉树 二、二叉树的递归遍历2.1、递归三部曲2.2、前序递归遍历2.3、中序递归遍历2.4、后序递归遍历 总结1.感想2.思维导图 day14学习内容 day14主要内容 二叉树的理论基础二叉树的遍历 声明 本文思路和文字&#xff0c;引…

了解MVCC的实现吗 ?(隐式字段,ReadView,undo log)

MVCC即多版本并发控制&#xff0c;它的实现原理主要依赖于记录中的隐藏字段、undo log&#xff08;回滚日志&#xff09;以及Read View&#xff08;读视图&#xff09;。 MVCC是数据库管理系统中用于处理并发操作的一项技术&#xff0c;它允许多个事务对同一数据进行读写操作而…

稀碎从零算法笔记Day4-LeetCode:交替合并字符串

前言&#xff1a;今天妹有深夜档&#xff0c;因为8点有个飞机 题型&#xff1a;字符串、双指针&#xff08;笔者没用这个思路&#xff09; 链接&#xff1a;1768. 交替合并字符串 - 力扣&#xff08;LeetCode&#xff09; 来源&#xff1a;LeetCode 著作权归作者所有。商业转…

java计算日期相差天数的4种方法

方法1&#xff1a;long值相减&#xff08;推荐&#xff09; public static void main(String[] args) {DateFormat dateFormat new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");try {Date startDate dateFormat.parse("2024-03-01 10:00:00");//开始时间D…

基础算法(二)#蓝桥杯

文章目录 8、双指针8.1、挑选子串8.2、聪明的小羊肖恩8.3、神奇的数组 9、二分9.1、跳石头9.2、可凑成的最大花朵数9.3、最大通过数9.4、妮妮的月饼广场9.5、基德的神秘冒险9.6、体育健将 10、倍增10.1、快速幂10.2、最近公共祖先LCA查询10.3、理想之城10.4、数的变换 8、双指针…

【十二】【SQL】表的约束

NOT NULL非空约束 展示对NULL的查询 mysql> select NULL; ------ | NULL | ------ | NULL | ------ 1 row in set (0.00 sec)mysql> select 1NULL; -------- | 1NULL | -------- | NULL | -------- 1 row in set (0.00 sec)mysql> 第一条查询&#xff1a;select NU…

JasperStudio中TextField文本框组件渲染之后,出现行间距不一致的问题

目录 1.1、问题描述 1.2、解决方案 1.1、问题描述 最近在处理线上遇到的一个问题,是有关JasperReports报表相关的问题,问题背景大概是这样的:我们的项目中使用了JasperReports来渲染报表,其中使用到了Text Field文本框组件,但是问题是渲染出来的数据直接会出现一些间距…

Python脚本删除文本文件中的重复行

实例&#xff1a;需要用Python删除文本文件a.txt中的重复行. Case1:仅需要删除文件中的重复行&#xff1a; rFile open(a.txt, r) wFile open(b.txt, w) allLine rFile.readlines() rFile.close() s set() for i in allLine:s.add(i) for i in s:wFile.write(i) open(b.t…

洛谷:P3068 [USACO13JAN] Party Invitations S(枚举、前缀和)

这题我们数据范围太大&#xff0c;用二维肯定是不行的&#xff0c;我们可以采用一维线性存储。 如题意&#xff0c;我们可以将每组奶牛编号都存在一维数组里面&#xff0c;只需记录每组的头尾指针就可以了。 如题中样例我们就可以存储成1 3 3 4 1 2 3 4 5 6 7 4 3 2 1 然后第…

[LeetBook]【学习日记】寻找和为指定数字的连续数字

题目 文件组合 待传输文件被切分成多个部分&#xff0c;按照原排列顺序&#xff0c;每部分文件编号均为一个 正整数&#xff08;至少含有两个文件&#xff09;。传输要求为&#xff1a;连续文件编号总和为接收方指定数字 target 的所有文件。请返回所有符合该要求的文件传输组…

【kubernetes】关于k8s集群的存储卷

目录 一、存储卷的分类 二、empty存储卷以及特点 三、hostpath存储卷以及特点 四、nfs存储卷以及特点 五、pvc存储卷 查看pv的定义 查看pvc的定义 实操&#xff1a;静态创建pv的方式 实现pvc存储卷 步骤一&#xff1a;先完成nfs的目录共享&#xff0c;需要准备不同的目…

C# 中 TryParse 将字符串转换为特定类型的方法

在 C# 中&#xff0c;TryParse 是一个用于将字符串转换为特定类型的方法。它用于尝试解析字符串并将其转换为指定类型的值&#xff0c;而不会引发异常。如果解析成功&#xff0c;它将返回 true 并将解析结果存储在输出参数中&#xff1b;如果解析失败&#xff0c;它将返回 fals…

redis10 应用问题(穿透、击穿、雪崩、分布式锁)

思维草图 缓存穿透 查询不存在的数据&#xff0c;穿透redis缓存&#xff0c;请求直接攻击后端db。 问题 当系统中引入redis缓存后&#xff0c;一个请求进来后&#xff0c;会先从redis缓存中查询&#xff0c;缓存有就直接返回&#xff08;相当于一道隔离闸&#xff0c;保护db…

vue设计原理-带你重走vue诞生路程

我们首先看下面这个小demo demo源码: <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" conten…