首页/新闻资讯/正文详情

Angular入门教程

发布时间:2026/9/24 14:09:17 来源:云帆数科 栏目:资讯中心
Angular入门教程
Angular 18由于 Angular 每半年发布一个主版本迭代较快现目前最新稳定版本为 18第一步使用npm install -g angular/cli18命令下载 Angular CLI 18效果如下第二步使用ng new my-angular-app创建一个全新的项目以此为例我创建的项目名为 myex使用以下命令运行项目查看效果cd my-angular-app ng serve第三步使用ng add ng-zorro-antd18命令导入组件效果如下再使用ng serve命令运行效果如下使用ng-zorro-antd中的组件需要先导入依赖也就是在app.component.ts中添加下述命令import { NzButtonModule } from ng-zorro-antd/button;修改html中的代码使用ng-zorro-antd组件库中的按钮组件CtrlS进行保存却产生报错效果如下原因是项目缺少了ctrl/tinycolor这个第三方库但ng-zorro-antd组件库又依赖于它。所以使用npm install ctrl/tinycolor命令下载依赖包下载完成之后再次运行项目效果如下第四步在 app.component.ts 中导入 NzButtonModule在app.component.ts中导入NzButtonModule并添加到imports数组中代码如下import { Component } from angular/core; import { NzButtonModule } from ng-zorro-antd/button; Component({ selector: app-root, standalone: true, imports: [NzButtonModule], templateUrl: ./app.component.html, styleUrls: [./app.component.css] }) export class AppComponent { title my-angular-app; }第五步在 app.component.html 中添加按钮代码在app.component.html中添加 ng-zorro-antd 的按钮组件代码如下button nz-button nzTypeprimary主要按钮/button button nz-button nzTypedefault默认按钮/button button nz-button nzTypedashed虚线按钮/button button nz-button nzTypetext文本按钮/button button nz-button nzTypelink链接按钮/button保存后运行ng serve命令即可在浏览器中看到不同类型的按钮效果包括主要按钮、默认按钮、虚线按钮、文本按钮和链接按钮。

相关推荐

TEN Framework 中的 Soniox 实时语音识别扩展(soniox_asr_python)使用与源码解析
TEN Framework 中的 Soniox 实时语音识别扩展(soniox_asr_python)使用与源码解析

人工智能AI Agent多模态语音AI 应用 【免费下载链接】ten-framework Open-source framework for conversational voice AI agents 项目地址: https://gitcode.com/TEN-framework/ten-framework 点击查看 免费下载 本指南以 TEN Framework 仓库中的 soniox_asr_pyth… · 2026/9/24 14:09:17

高精度TEC温控系统实战:H桥驱动与PID算法详解
高精度TEC温控系统实战:H桥驱动与PID算法详解

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 14:09:17

Yii 2 HTTP 缓存实战:用 HttpCache 过滤器驾驭 Last-Modified、ETag 与 Cache-Control
Yii 2 HTTP 缓存实战:用 HttpCache 过滤器驾驭 Last-Modified、ETag 与 Cache-Control

后端Web框架 【免费下载链接】yii2 Yii 2: The Fast, Secure and Professional PHP Framework 项目地址: https://gitcode.com/gh_mirrors/yi/yii2 点击查看 免费下载 本篇技术指南围绕 Yii 2 框架的客户端缓存能力展开:通过配置 yii\filters\HttpCache… · 2026/9/24 14:09:17

大麦抢票自动化:从克隆仓库到替你把订单点下去只需10分钟
大麦抢票自动化:从克隆仓库到替你把订单点下去只需10分钟

大麦抢票自动化:从克隆仓库到替你把订单点下去只需10分钟 【免费下载链接】ticket-purchase 大麦自动抢票,支持人员、城市、日期场次、价格选择 项目地址: https://gitcode.com/GitHub_Trending/ti/ticket-purchase 开售前第 8 次刷新&#xff0c… · 2026/9/24 16:07:19

15分钟部署自己的免费天气API:Open-Meteo 自托管全流程
15分钟部署自己的免费天气API:Open-Meteo 自托管全流程

15分钟部署自己的免费天气API:Open-Meteo 自托管全流程 【免费下载链接】open-meteo Free Weather Forecast API for non-commercial use 项目地址: https://gitcode.com/GitHub_Trending/op/open-meteo 想在自己的产品里加天气功能,却不想被商业… · 2026/9/24 16:07:19

IdeaVim vim-engine 演进路线深度解析:可写性检测、不可变 Caret 与跨编辑器架构
IdeaVim vim-engine 演进路线深度解析:可写性检测、不可变 Caret 与跨编辑器架构

代码编辑器 【免费下载链接】ideavim IdeaVim – A Vim engine for JetBrains IDEs 项目地址: https://gitcode.com/gh_mirrors/id/ideavim 点击查看 免费下载 IdeaVim 以独立的 vim-engine 模块承载纯 Vim 语义(命令解析、动作执行、寄存器与标记、Ex … · 2026/9/24 16:07:19

PowerInfer 在 Android 上的构建与本地部署指南:Termux 设备端编译与 NDK 交叉编译全流程
PowerInfer 在 Android 上的构建与本地部署指南:Termux 设备端编译与 NDK 交叉编译全流程

人工智能大模型推理引擎本地部署 【免费下载链接】PowerInfer High-speed Large Language Model Serving for Local Deployment 项目地址: https://gitcode.com/gh_mirrors/po/PowerInfer 点击查看 免费下载 本文以 smallthinker/docs/android.md 为骨架&#xff0… · 2026/9/24 16:07:19

HyperDX 代码规范实战指南:grep-first 复用、Mantine 语义变体与前端工程最佳实践
HyperDX 代码规范实战指南:grep-first 复用、Mantine 语义变体与前端工程最佳实践

HyperDX 代码规范实战指南:grep-first 复用、Mantine 语义变体与前端工程最佳实践 【免费下载链接】hyperdx Resolve production issues, fast. An open source observability platform unifying session replays, logs, metrics, traces and errors powered by Cli… · 2026/9/24 16:07:19

Python网站导航项目-3.导航数据后端管理应用开发
Python网站导航项目-3.导航数据后端管理应用开发

本文系统性地描述了一个导航网站的搭建过程,从项目构思到实际的功能实现,逐步展现了如何通过 Django 框架构建一个便捷高效的导航管理系统。项目目标在于帮助用户通过直观的前端界面管理导航数据,同时通过批量抓取外部网站的 logo,提高页面的美观性和可读性。 文章内容涵盖… · 2026/9/24 16:07:13

基于YOLOv8的渔船作业监控系统:从环境搭建到边缘部署全流程
基于YOLOv8的渔船作业监控系统:从环境搭建到边缘部署全流程

简介:这是一套面向计算机、人工智能、自动化等专业学生与教师的毕业设计级项目资源,围绕YOLOv8实现渔船作业监控系统,可用于毕设、课程设计、大作业或项目立项演示。压缩包共97个文件,约24.21MB,以70个Python源码文件为… · 2026/9/24 0:00:13

1D-CNN时间序列建模实战:从Conv1d原理到工业落地
1D-CNN时间序列建模实战:从Conv1d原理到工业落地

简介:面向时间序列数据建模的一维卷积神经网络完整实现,适合深度学习入门者及需要快速验证时序模型的研究者,能够从音频、文本、传感器或股价等序列中挖掘局部特征与时间依赖。压缩包体积很小,只有3KB,内含3个Python脚… · 2026/9/24 0:00:26

柔软的L:汉语语流中被忽视的舌肌张力控制
柔软的L:汉语语流中被忽视的舌肌张力控制

1. 这个“L”不是字母表里的L,而是舌尖上的L最近在几个方言群和语音教学社群里,反复看到有人发一句:“也说字母L:柔软的长舌”。初看以为是英语发音课笔记,点开才发现全是方言爱好者、播音系学生、语言康复师甚至戏曲演… · 2026/9/24 0:00:44

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码