当前位置： 首页 > news >正文

Angular基础---HelloWorld---Day1

news 2026/2/9 6:39:14

文章目录

      • 1. 创建Angular 项目
      • 2.对Angular架构的最基本了解
      • 3.创建并引用新的组件（component）
      • 4.对Angular架构新的认识（多组件）
      • 5.组件中业务逻辑文件的编辑（ts文件）
      • 6.标签中属性的绑定
        • (1) ID的绑定
        • (2) class的绑定
        • (3) 样式的绑定
        • (4) ng内部样式的绑定
        • (5)条件判断

1. 创建Angular 项目


ng version			// 查看下angular 是否安装成功了ng new  HelloWorld        // 使用这种方式创建新项目，最终没有app.modules.ts 这个文件（对刚入口的人员不友好，因为要学习到这个文件的用法）ng new HelloWorldAngular --no-standalone --routing --ssr=false  // 这种方式创建的包含app.modules.ts文件（应该是Angular 17 最新版才需要这样）// 为什么最新版Angular 没有app.module.ts文件，可参考如下link
// https://github.com/angular/angular/issues/52751npm start  		// 直接启动Angular 项目，不会自动打开浏览器ng serve --open  // 启动Angular 项目 并通过浏览器自动打开angular 入口页面


step1： ng new HelloWorldAngular --no-standalone --routing --ssr=false
在这里插入图片描述


step2： 在VS code 中打开项目文件夹，并在terminal中执行npm start启动项目

在这里插入图片描述


step3： 点击terminal中的local 的网址，或copy 到浏览器中，即可看到angular 入口页面
在这里插入图片描述
在这里插入图片描述


step4： 启动完项目，如果想进行简单的服务操作，输入h + enter 即可看到如下命令提示

press r + enter to force reload browserpress u + enter to show server urlpress o + enter to open in browserpress c + enter to clear consolepress q + enter to quit


2.对Angular架构的最基本了解


在这里插入图片描述

  • 入口文件会一直存在，方便加载新建的页面
  • app.component.ts 文件复制加载不同的组件，以及执行某个文件使用的模板文件、样式文件
  • 强化理解，可以通过如下几个step了解和实践

step1.上面看到的入口页面,index.html页面加载的流程介绍：
在这里插入图片描述

在这里插入图片描述



step2.将项目的入口文件变更为新建的html文件：app.simplepage.html效果
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述



3.创建并引用新的组件（component）

ng g c my-new-component  		// 创建新的组件（generate component）

step1： 创建新的组件

在这里插入图片描述


step2： 查看组件选择器（selector）的名字：app-my-new-component’
在这里插入图片描述

在这里插入图片描述

step3： 引用组件：app-my-new-component’

下图说明，新建的组件如果希望被引用，需要找到一个组件（app.component）去引用这个新组件（my-new-component）才可以。

在这里插入图片描述


step4： 修改新组件：将CSS文件& HTML文件修改
在这里插入图片描述


step5： 修改新组件：启动项目，最终看到的效果

在这里插入图片描述



4.对Angular架构新的认识（多组件）


在这里插入图片描述



5.组件中业务逻辑文件的编辑（ts文件）


step1: 修改新组件html文件、TS文件。并在ts文件中引入新的变量name&在构造器中打印内容
在这里插入图片描述


constructor & ngOnInit可参考如下文章，目前阶段不需要完全看懂

Angular 生命周期（constructor & ngOnInit）的作用
在这里插入图片描述

step2: 最终看到的效果
在这里插入图片描述

step3: 花括号语法支持的其他类型：
在这里插入图片描述

最终展示的效果如下：

在这里插入图片描述



6.标签中属性的绑定


(1) ID的绑定

在这里插入图片描述

看到的最终效果：

在这里插入图片描述

(2) class的绑定

在这里插入图片描述

在这里插入图片描述


(3) 样式的绑定

在这里插入图片描述

在这里插入图片描述


(4) ng内部样式的绑定

在这里插入图片描述

在这里插入图片描述


(5)条件判断

在这里插入图片描述

在这里插入图片描述

相关文章：

Angular基础---HelloWorld---Day1

文章目录 1. 创建Angular 项目2.对Angular架构的最基本了解3.创建并引用新的组件（component）4.对Angular架构新的认识（多组件）5.组件中业务逻辑文件的编辑（ts文件）6.标签中属性的绑定(1) ID的绑定(2) class…...

编程日记 2024/3/4 10:51:31

k8s部署项目常见的问题及解决方案

在Kubernetes（k8s）部署项目中，确实存在一些常见问题和挑战。以下是这些问题及其相应的解决方案： 网络插件问题： 问题：网络插件配置不当或版本不兼容可能导致Pod间通信问题。解决方案：重新部署或…...

编程日记 2024/3/4 10:50:30

Redis实现乐观锁+秒杀场景demo

在Redis中，乐观锁通常是通过使用 WATCH、MULTI 、EXEC和DISCARD命令实现的。这种乐观锁机制允许客户端在执行事务期间监视一个或多个键，并且只有在事务执行期间没有其他客户端修改被监视的键时，才会执行事务。 应用场景： 库存控…...

编程日记 2024/3/4 10:47:27

阅读笔记 | Transformers in Time Series: A Survey

阅读论文： Wen, Qingsong, et al. “Transformers in time series: A survey.” arXiv preprint arXiv:2202.07125 (2022). 这篇综述主要对基于Transformer的时序建模方法进行介绍。论文首先简单介绍了Transformer的基本原理，包括位置编码、多头注意力机…...

编程日记 2024/3/4 10:46:26

WPF MVVM中List＜＞和ObservableCollection＜＞的区别与对比分析

在WPF MVVM&#xff08;模型-视图-视图模型&#xff09;架构中&#xff0c;数据绑定是实现UI与后端逻辑分离的关键特性。为了使UI能够响应后端数据的变化&#xff0c;通常需要用到特定的集合类型。在WPF中&#xff0c;最常见的两种集合类型是List< T>和ObservableCollect…...

编程日记 2024/3/4 10:39:19

python给企微发消息

方法一&#xff1a;webhook方式。使用群机器人给企微群发消息 import requestsdef qwxsendmessage(msg):urlhttps://qyapi.weixin.qq.com/cgi-bin/webhook/send?key6c598840-804a-4eb5-a999-a023313 #url换成自己群机器人的webhookurldata{msgtype:text,text:{content:msg}}…...

编程日记 2024/3/4 10:35:15

TCP/IP状态迁移

TCP&#xff08;传输控制协议&#xff09;是一种面向连接的流式控制协议&#xff0c;它定义了不同的状态以管理通信过程中的连接。TCP 状态迁移描述了 TCP 连接在不同状态之间的转换过程&#xff0c;常见的 TCP 状态包括 CLOSED、LISTEN、SYN_SENT、SYN_RECEIVED、ESTABLISHED、…...

编程日记 2024/3/4 10:33:13

C语言实现各类排序算法

排序算法是计算机科学中的一个重要概念,它是一种将一个无序的数列重新排列成有序的方法。常见的排序算法有: 选择排序&#xff08;Selection Sort&#xff09; 选择排序是一种简单直观的排序演算法。它的工作原理:首先在未排序序列中找到最小(大)元素&#xff0c;存放到排序序…...

编程日记 2024/3/4 10:27:06

Network LSA 结构简述

Network LSA主要用于描述一个区域内的网络拓扑结构&#xff0c;包括网络中的路由器和连接到这些路由器的网络。它记录了每个路由器的邻居关系、连接状态以及连接的度量值&#xff08;如带宽、延迟等&#xff09;&#xff0c;以便计算最短路径和构建路由表。display ospf lsdb n…...

编程日记 2024/3/4 10:25:03

揭示IP风险画像的作用与价值

在当今数字化时代&#xff0c;互联网的快速发展为企业和个人带来了巨大的机遇&#xff0c;同时也带来了各种安全风险和威胁。随着网络攻击手段的不断升级和演变&#xff0c;传统的安全防御手段已经无法满足对抗复杂多变的网络威胁的需求。IP风险画像作为一种新型的网络安全解决…...

编程日记 2024/3/4 10:24:02

[python] dataclass 快速创建数据类

在Python中&#xff0c;dataclass是一种用于快速创建数据类的装饰器和工具。自Python 3.7起&#xff0c;通过标准库中的dataclasses模块引入。它的主要目的是简化定义类来仅存储数据的代码量。通常&#xff0c;这样的类包含多个初始化属性&#xff0c;但没有复杂的方法&#xf…...

编程日记 2024/3/4 10:17:55

opencv实现图像的融合

实现图像的融合并且输出一张jpg格式的照片。 先显示一个彩色图的照片 然后我以彩色方式读取1.png&#xff0c;以灰度图方式读取3.png这张图片&#xff0c;并且用两个窗口独立地去显示(我后来发现不能把灰度图和彩色图相融合) 然后实现两个融合 #include <opencv2/highgu…...

编程日记 2024/3/4 10:12:50

Orbit 使用指南 02 | 在场景中生成原始对象| Isaac Sim | Omniverse

如是我闻&#xff1a; Orbit使用指南02将 深入探讨如何使用Python代码在Orbit中向场景生成各种对象&#xff08;或原始对象&#xff09;。一起探索如何生成地面平面、灯光、基本图形形状以及来自USD文件的网格。前置知识&#xff1a;如何生成空白场景&#xff0c;Orbit 使用指…...

编程日记 2024/3/4 10:11:49

【2024】利用python爬取csdn的博客用于迁移到hexo,hugo,wordpress...

前言 博主根据前两篇博客进行改进和升级 利用python爬取本站的所有博客链接-CSDN博客文章浏览阅读955次&#xff0c;点赞6次&#xff0c;收藏19次。定义一个json配置文件方便管理现在文件只有用户名称,后续可加配置读取用户名称&#xff0c;并且将其拼接成csdn个人博客链接ty…...

编程日记 2024/3/4 10:10:47

从嵌入式Linux到嵌入式Android

最近开始投入Android的怀抱。说来惭愧&#xff0c;08年就听说这东西&#xff0c;当时也有同事投入去看&#xff0c;因为恶心Java&#xff0c;始终对这玩意无感&#xff0c;没想到现在不会这个嵌入式都快要没法搞了。为了不中年失业&#xff0c;所以只能回过头又来学。 首先还是…...

编程日记 2024/3/4 10:09:46

蓝桥ACM培训-实战1

前言&#xff1a; 今天老师没讲课&#xff0c;只让我们做了一下几道题目。 正文&#xff1a; Problem:A 小蓝与操作序列&#xff1a; #include<bits/stdc.h> using namespace std; stack<int> a; int main(){int n,flag1,ans;string cz;cin>>n;for(int i1;…...

编程日记 2024/3/4 10:08:45

波动数列（蓝桥杯）

问题描述&#xff1a; 观察如下数列&#xff1a; 1 3 0 2 -1 1 -2 … 这个数列中后一项总是比前一项增加 2 或者减少 3。 栋栋对这种数列很好奇&#xff0c;他想知道长度为 n nn 和为 s ss 而且后一项总是比前一项增加 a aa 或者减少 b bb 的整数数列可能有多少种呢&#xff1f…...

编程日记 2024/3/4 10:07:44

第二篇【传奇开心果系列】Python的自动化办公库技术点案例示例：深度解读Pandas金融数据分析

传奇开心果博文系列 系列博文目录Python的自动化办公库技术点案例示例系列 博文目录前言一、Pandas 在金融数据分析中的常见用途和功能介绍二、金融数据清洗和准备示例代码三、金融数据索引和选择示例代码四、金融数据时间序列分析示例代码五、金融数据可视化示例代码六、金融数…...

编程日记 2024/3/4 10:05:42

Flink：Temporal Table Function（时态表函数）和 Temporal Join

博主历时三年精心创作的《大数据平台架构与原型实现&#xff1a;数据中台建设实战》一书现已由知名IT图书品牌电子工业出版社博文视点出版发行&#xff0c;点击《重磅推荐&#xff1a;建大数据平台太难了&#xff01;给我发个工程原型吧&#xff01;》了解图书详情&#xff0c;…...

编程日记 2024/3/4 10:00:36

Go语言中的时间控制：定时器技术详细指南

Go语言中的时间控制&#xff1a;定时器技术详细指南 引言定时器基础创建和使用time.Timer使用time.Ticker实现周期性任务定时器的内部机制小结 使用time.Timer实现简单的定时任务创建和启动定时器停止和重置定时器定时器的实际应用小结 利用time.Ticker处理重复的定时任务创建和…...

编程日记 2024/3/4 9:58:33

浏览器访问 AWS ECS 上部署的 Docker 容器（监听 80 端口）

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

编程新知 2026/2/8 15:03:14

【杂谈】-递归进化：人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

编程新知 2025/12/9 0:22:01

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

编程新知 2025/9/10 5:36:56

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2026/1/30 15:16:32

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

编程新知 2026/1/24 6:22:43

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

编程新知 2025/10/3 0:42:17

论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing

Muffin 论文 现有方法 CRADLE 和 LEMON&#xff0c;依赖模型推理阶段输出进行差分测试&#xff0c;但在训练阶段是不可行的&#xff0c;因为训练阶段直到最后才有固定输出&#xff0c;中间过程是不断变化的。API 库覆盖低&#xff0c;因为各个 API 都是在各种具体场景下使用。…...

编程新知 2026/2/1 1:28:58

TCP/IP 网络编程 | 服务端 客户端的封装

设计模式 文章目录 设计模式一、socket.h 接口&#xff08;interface&#xff09;二、socket.cpp 实现&#xff08;implementation&#xff09;三、server.cpp 使用封装&#xff08;main 函数&#xff09;四、client.cpp 使用封装&#xff08;main 函数&#xff09;五、退出方法…...

编程新知 2025/7/27 7:26:07

EasyRTC音视频实时通话功能在WebRTC与智能硬件整合中的应用与优势

一、WebRTC与智能硬件整合趋势​ 随着物联网和实时通信需求的爆发式增长&#xff0c;WebRTC作为开源实时通信技术&#xff0c;为浏览器与移动应用提供免插件的音视频通信能力&#xff0c;在智能硬件领域的融合应用已成必然趋势。智能硬件不再局限于单一功能&#xff0c;对实时…...

编程新知 2026/2/8 2:10:10

StarRocks 全面向量化执行引擎深度解析

StarRocks 全面向量化执行引擎深度解析 StarRocks 的向量化执行引擎是其高性能的核心设计&#xff0c;相比传统行式处理引擎&#xff08;如MySQL&#xff09;&#xff0c;性能可提升 5-10倍。以下是分层拆解&#xff1a; 1. 向量化 vs 传统行式处理 维度行式处理向量化处理数…...

编程新知 2025/12/25 15:36:09