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

Angular基础---HelloWorld---Day1

news 2026/1/15 23:48:28

文章目录

      • 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

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

编程新知 2026/1/15 5:01:19

高等数学（下）题型笔记（八）空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

编程新知 2026/1/15 5:27:46

动态 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

深度学习水论文：mamba＋图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...

编程新知 2026/1/15 10:33:58

人工智能 - 在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型

在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型。这些平台各有侧重&#xff0c;适用场景差异显著。下面我将从核心功能定位、典型应用场景、真实体验痛点、选型决策关键点进行拆解&#xff0c;并提供具体场景下的推荐方案。 一、核心功能定位速览 平台核心定位技术栈亮…...

编程新知 2025/8/8 13:20:37

机器学习的数学基础：线性模型

线性模型 线性模型的基本形式为&#xff1a; f ( x ) ω T x b f\left(\boldsymbol{x}\right)\boldsymbol{\omega}^\text{T}\boldsymbol{x}b f(x)ωTxb 回归问题 利用最小二乘法&#xff0c;得到 ω \boldsymbol{\omega} ω和 b b b的参数估计$ \boldsymbol{\hat{\omega}}…...

编程新知 2025/10/2 9:07:50

多元隐函数 偏导公式

我们来推导隐函数 z z ( x , y ) z z(x, y) zz(x,y) 的偏导公式&#xff0c;给定一个隐函数关系&#xff1a; F ( x , y , z ( x , y ) ) 0 F(x, y, z(x, y)) 0 F(x,y,z(x,y))0 &#x1f9e0; 目标&#xff1a; 求 ∂ z ∂ x \frac{\partial z}{\partial x} ∂x∂z​、 …...

编程新知 2025/9/19 5:31:38

【深尚想】TPS54618CQRTERQ1汽车级同步降压转换器电源芯片全面解析

1. 元器件定义与技术特点 TPS54618CQRTERQ1 是德州仪器&#xff08;TI&#xff09;推出的一款 汽车级同步降压转换器&#xff08;DC-DC开关稳压器&#xff09;&#xff0c;属于高性能电源管理芯片。核心特性包括&#xff1a; 输入电压范围&#xff1a;2.95V–6V&#xff0c;输…...

编程新知 2026/1/13 21:12:14

Java多线程实现之Runnable接口深度解析

Java多线程实现之Runnable接口深度解析 一、Runnable接口概述1.1 接口定义1.2 与Thread类的关系1.3 使用Runnable接口的优势 二、Runnable接口的基本实现方式2.1 传统方式实现Runnable接口2.2 使用匿名内部类实现Runnable接口2.3 使用Lambda表达式实现Runnable接口 三、Runnabl…...

编程新知 2025/9/15 15:07:19

aurora与pcie的数据高速传输

设备&#xff1a;zynq7100&#xff1b; 开发环境&#xff1a;window&#xff1b; vivado版本&#xff1a;2021.1&#xff1b; 引言 之前在前面两章已经介绍了aurora读写DDR,xdma读写ddr实验。这次我们做一个大工程&#xff0c;pc通过pcie传输给fpga&#xff0c;fpga再通过aur…...

编程新知 2026/1/15 6:04:11