angular17+ionic7集成开发

news/2024/4/16 16:22:19/文章来源:https://blog.csdn.net/qq_34207898/article/details/136489893

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.luyixian.cn/news_show_999428.aspx

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

相关文章

20240308-2-校招前端面试常见问题-网络及浏览器

校招前端面试常见问题【4】——网络及浏览器 1、网络相关 Q&#xff1a;请简述一下 HTTP 协议&#xff0c;以及 HTTP1.0/1.1/2.0/3.0 的区别&#xff1f; HTTP 协议&#xff1a;超文本传输协议&#xff0c;使用 TCP/IP 协议传输数据。是一个应用层的协议。 HTTP1.0&#xff…

专业140+总430+电子科技大学858信号与系统考研经验成电电子信息与通信工程,电科大,真题,大纲,参考书。

今年考研成绩出来&#xff0c;初试专业课858信号与系统140&#xff0c;总分430&#xff0c;其余各门分数都比较平稳&#xff0c;总分好于自己估分&#xff0c;应群里很多同学要求&#xff0c;我总结一下自己的复习经验。首先我是一个大冤种&#xff0c;专业课资料学长给了一套&…

tomcat优化与部署(三)------nignx优化与nginx +tomcat 部署

在目前流行的互联网架构中&#xff0c;Tomcat在目前的网络编程中是举足轻重的&#xff0c;由于Tomcat的运行依赖于JVM&#xff0c;从虚拟机的角度把Tomcat的调整分为外部环境调优 JVM 和 Tomcat 自身调优两部分 Tomcat 是一个流行的开源 Java 服务器&#xff0c;用于托管 Java …

ai写作一键生成文章速度快

ai写作是一种基于人工智能技术的自动写作工具&#xff0c;它可以根据用户提供的主题或关键词&#xff0c;快速一键生成文章。与传统的手动写作相比&#xff0c;ai写作的速度更快&#xff0c;效率更高。下面小编就带大家一起来见识下ai写作一键生成文章的速度是如何之快&#xf…

Ulysses for macOS v33.1 写作应用 兼容 M1/M2

Ulysses 是面向 Mac、iPhone 和 iPad 的一站式写作环境。Ulysses 提供令人愉悦、专注的写作体验&#xff0c;加上高效文稿管理、无缝同步以及灵活导出&#xff0c;因此是各种写作人士的第一选择。 应用介绍 Ulysses 是面向 Mac、iPhone 和 iPad 的一站式写作环境。Ulysses 提供…

Linux centos 常用的网络负载和网速查看工具和命令

在 CentOS 上查看网络速度和网络负载&#xff0c;可以使用多种工具&#xff0c;以下是一些常用的命令行工具&#xff1a; iftop - 用于实时监视网络带宽使用情况。 安装命令&#xff1a; sudo yum install iftop 使用命令&#xff1a; sudo iftop nload - 一个简单的控制…

怎么做不限扫码次数的文件活码?文件可长期扫描展现下载

如何制作不限扫码次数的文件二维码呢&#xff1f;将文件转二维码后分享给其他人&#xff0c;是现在非常方便的一种文件传输方式。很多小伙伴在制作文件二维码的时候&#xff0c;比较担心的一个问题&#xff0c;就是二维码可以扫码的次数&#xff0c;担心达不到自己预期的效果&a…

JVM系列:垃圾回收器(GC)

JVM系列&#xff1a;垃圾回收器&#xff08;GC&#xff09; &#x1f600; 执行引擎将class文件加载至JVM内存中运行。在运行过程中&#xff0c;需要在内存中动态创建和销毁对象。在传统的C/C语言中&#xff0c;需要手动进行对象销毁以避免内存泄漏。而在Java中&#xff0c;引入…

有名信号量、网络协议模型、UDP编程发送端

我要成为嵌入式高手之3月5日Linux高编第十五天&#xff01;&#xff01; ______________________________________________________ 学习笔记 有名信号量 1、创建semget #include <sys/types.h> #include <sys/ipc.h> #include <sys/sem.h> int semget(…

下载一些ROS的包的方式

ROS Index 我们可以去ROS Index网站下载一些我们需要的包。打开浏览器在网址框输入index.ros.org。或者点击此处链接ROS Index 在这个网站中我们可以浏览并找到我们需要的包&#xff0c;也可以下载它的源代码或者仅安装到我们的系统中来使用。&#xff08;安装过程在终端中进行…

云计算 3月5号 (DNS域名解析及部署)

DNS域名解析服务 1.DNS介绍 DNS 是域名系统 (Domain Name System) 的缩写&#xff0c;是因特网的一项核心服务&#xff0c;它作为可以将域名和IP地址相互映射的一个分布式数据库&#xff0c;能够使人更方便的访问互联网&#xff0c;而不用去记住能够被机器直接读取的IP数串。…

如何防御udp攻击

UDP Flood是互联网上最经典的DDoS&#xff08;Distributed Denial of Service&#xff09;攻击之一。攻击者在短时间内向目标设备发送大量的UDP报文&#xff0c;导致链路拥塞甚至网络瘫痪。一般的UDP报文由攻击工具伪造&#xff0c;通常在数据段具备相同的特征&#xff0c;另一…

Hadoop的UI页面介绍

文章目录 前言一、HDFS的UI页面介绍1. 概述页面2. 数据节点页面2.1 单个数据节点信息页面 3. 数据卷故障信息页面4. 快照信息页面5. 启动进度信息页面6. 文件系统页面 二、YARN的UI页面介绍1. 应用程序页面2. 集群相关信息页面3. 集群节点信息页面4. 应用程序调度信息页面5. 工…

请编程输出无向无权图各个顶点的度 ← STL vector 模拟邻接表存图

【题目描述】 请利用 STL vector 模拟邻接表存图&#xff0c;编程输出无向无权图各个顶点的度。【输入样例】 5 6 1 3 2 1 1 4 2 3 3 4 5 1【输出样例】 4 2 3 2 1【算法分析】 本例利用 STL vector 模拟实现邻接表。代码参见&#xff1a;https://blog.csdn.net/hnjzsyjyj/arti…

初阶数据结构之---二叉树的顺序结构-堆

引言 今天要讲的堆&#xff0c;不是操作系统虚拟进程地址空间中&#xff08;malloc&#xff0c;realloc等开空间的位置&#xff09;的那个堆&#xff0c;而是数据结构中的堆&#xff0c;它们虽然名字相同&#xff0c;却是截然不同的两个概念。堆的底层其实是完全二叉树&#x…

Web核心

JavaWeb技术栈 B/S架构&#xff1a;Browser/Server &#xff0c; 浏览器/服务器 架构模式&#xff0c;其特点为&#xff0c;客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务器端。浏览器只需要请求服务器&#xff0c;获取Web资源&#xff0c;服务器把Web资源…

3.7号freeRtoS

1. 串口通信 配置串口为异步通信 设置波特率&#xff0c;数据位&#xff0c;校验位&#xff0c;停止位&#xff0c;数据的方向 同步通信 在同步通信中&#xff0c;数据的传输是在发送端和接收端之间通过一个共享的时钟信号进行同步的。这意味着发送端和接收端的时钟需要保持…

Postman(注册,使用,作用)【详解】

目录 一、Postman 1. Postman介绍 2. 安装Postman 3. 注册帐号再使用(可保存测试记录) 4. 创建workspace 5. 测试并保存测试记录 一、Postman postman工具可以发送不同方式的请求,浏览器只能发送get请求(所有用这个工具) 在前后端分离开发模式下&#xff0c;前端技术人员…

服务器配置禁止IP直接访问,只允许域名访问

联网信息系统需设置只允许通过域名访问&#xff0c;禁止使用IP地址直接访问&#xff0c;建议同时采用云防护技术隐藏系统真实IP地址且只允许云防护节点IP访问服务器&#xff0c;提升网络安全防护能力。 一、Nginx 修改配置文件nginx.conf&#xff0c;在server段里插入正则表达式…

某准网招聘接口逆向之WebPack扣取

​​​​​逆向网址 aHR0cHM6Ly93d3cua2Fuemh1bi5jb20v 逆向链接 aHR0cHM6Ly93d3cua2Fuemh1bi5jb20vc2VhcmNoP3BhZ2VOdW09MSZxdWVyeT1weXRob24mdHlwZT01 逆向接口 aHR0cHM6Ly93d3cua2Fuemh1bi5jb20vYXBpX3RvL3NlYXJjaC9qb2IuanNvbg 逆向过程 请求方式&#xff1a;GET 参数构成…