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

Angular的理解

news 来源：原创 2025/6/28 5:16:20

Angular 是一个由 Google 维护的全功能前端框架，适合构建复杂的企业级应用。它采用 TypeScript 作为首选语言，提供了一套完整的解决方案，包括数据绑定、依赖注入、路由、表单处理等。

1. Angular 的核心概念

1.1 组件化架构

Angular 应用由**组件（Components）**构成，每个组件包含：

HTML 模板（定义 UI）
CSS 样式（定义外观）
TypeScript 类（定义逻辑）
元数据（@Component 装饰器）（配置组件）

@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {title = 'My Angular App';
}

1.2 模块化（NgModule）

Angular 采用模块化设计，每个模块（NgModule）封装一组相关功能：

声明组件、指令、管道
导入其他模块
提供服务（依赖注入）

@NgModule({declarations: [AppComponent], // 注册组件imports: [BrowserModule],     // 导入其他模块providers: [UserService],    // 注册服务bootstrap: [AppComponent]    // 启动组件
})
export class AppModule {}

2. 数据绑定与变更检测

Angular 采用双向数据绑定（[(ngModel)]）和单向数据流（@Input() / @Output()）。

2.1 数据绑定方式

语法	说明
`{{ expression }}`	插值（显示变量）
`[property]="expression"`	属性绑定（父 → 子）
`(event)="handler()"`	事件绑定（子 → 父）
`[(ngModel)]="property"`	双向绑定（表单输入）

2.2 变更检测（Change Detection）

默认策略：Default（检查所有组件）
优化策略：OnPush（仅当输入变化时检查）

@Component({changeDetection: ChangeDetectionStrategy.OnPush
})

3. 依赖注入（DI）

Angular 的 DI 系统管理服务（Services）的创建和共享：

@Injectable() 标记可注入的服务
providers 在模块或组件级别注册服务
构造函数注入（自动解析依赖）

@Injectable({ providedIn: 'root' }) // 全局单例
export class UserService {getUsers() { return [...] }
}@Component({providers: [UserService] // 组件级实例
})
export class UserComponent {constructor(private userService: UserService) {}
}

4. 路由（Router）

Angular 提供 @angular/router 进行 SPA 导航：

RouterModule.forRoot(routes) 配置路由
<router-outlet> 渲染匹配的组件
Router 服务 编程式导航

const routes: Routes = [{ path: '', component: HomeComponent },{ path: 'users', component: UserListComponent }
];@NgModule({imports: [RouterModule.forRoot(routes)],
})
export class AppModule {}

5. 表单处理

Angular 提供模板驱动表单和响应式表单两种方式：

5.1 模板驱动表单

使用 ngModel 绑定数据
适合简单表单

<form #form="ngForm" (ngSubmit)="onSubmit(form)"><input name="username" ngModel required><button type="submit">Submit</button>
</form>

5.2 响应式表单

使用 FormControl、FormGroup 动态管理表单
适合复杂表单验证

loginForm = new FormGroup({username: new FormControl('', Validators.required),password: new FormControl('')
});

6. HTTP 通信

Angular 提供 HttpClient 进行 HTTP 请求：

@Injectable()
export class ApiService {constructor(private http: HttpClient) {}getUsers() {return this.http.get<User[]>('/api/users');}
}

7. 状态管理（NgRx）

对于大型应用，可使用 NgRx（基于 Redux 的状态管理）：

Store（全局状态）
Actions（触发状态变更）
Reducers（纯函数更新状态）
Effects（处理副作用，如 API 调用）

// 定义 Action
export const loadUsers = createAction('[User] Load Users');// 定义 Reducer
const userReducer = createReducer(initialState,on(loadUsers, (state) => ({ ...state, loading: true }))
);

8. Angular 的优势与劣势

✅ 优势

全功能框架：内置路由、表单、HTTP、依赖注入等
TypeScript 支持：强类型，减少运行时错误
企业级适用：适合大型复杂应用
CLI 工具：ng generate 快速生成代码
长期支持（LTS）：Google 维护，版本稳定

❌ 劣势

学习曲线陡峭：概念多（模块、依赖注入、RxJS 等）
性能开销：比 React/Vue 稍重（但可通过 OnPush 优化）
灵活性较低：相比 React，Angular 更“固执己见”

9. Angular vs React vs Vue

特性	Angular	React	Vue
架构	全功能框架	库（需搭配生态）	渐进式框架
语言	TypeScript	JavaScript/TS	JavaScript/TS
数据绑定	双向/单向	单向	双向/单向
学习曲线	高	中	低
适用场景	企业级应用	灵活生态	快速开发

10. 学习资源

官方文档：angular.io
教程：
- Angular Tour of Heroes
- Ultimate Angular（付费）
社区：
- Angular Subreddit
- Angular Discord

总结

Angular 是一个强大但复杂的框架，适合需要长期维护的大型项目。如果你喜欢结构化、强类型、全栈式解决方案，Angular 是一个很好的选择。但对于小型项目或快速原型开发，React 或 Vue 可能更合适。

Angular的理解

Angular 是一个由 Google 维护的全功能前端框架，适合构建复杂的企业级应用。它采用 TypeScript 作为首选语言，提供了一套完整的解决方案，包括数据绑定、依赖注入、路由、表单处理等。 1. Angular 的核心概念 1.1 组件化架构 Angular 应用由…...

编程日记 2025/6/28 5:16:20

广告推荐算法：COSMO算法与A9算法的对比

COSMO算法与A9算法的概念解析 1. A9算法定义与背景： A9算法是亚马逊早期为电商平台研发的核心搜索算法，主要用于优化商品搜索结果的排序和推荐，其核心逻辑围绕产品属性与关键词匹配展开。自2003年推出以来，A9通过分析商品标题…...

编程日记 2025/6/28 3:45:55

10. 七大排序(含四种版本快排及优化) ******

排序算法时间复杂度(平均)时间复杂度(最坏)时间复杂度(最好)空间复杂度稳定性主要使用场景直接插入排序O(n)O(n)O(n)O(1)稳定小规模数据或基本有序数据希尔排序O(n^1.3)O(n)O(n log n)O(1)不稳定中等规模数据，对稳定性无要求选择排序O(n)O(n)O(n)O(1)不稳定小规模数…...

编程日记 2025/6/25 17:04:49

以下是C/C++后台开发常见的高概率面试题

一、语言基础多态的实现通过虚函数表（vtable）实现动态绑定，运行时根据对象类型调用对应的函数。虚函数通过virtual关键字声明，子类可重写基类虚函数112。指针与引用的区别指针是变量，存储地址，支持多…...

编程日记 2025/6/28 3:16:35

CentOS-查询实时报错日志-查询前1天业务报错gz压缩日志

最新版本更新 https://code.jiangjiesheng.cn/article/364?from=csdn 推荐《高并发 & 微服务 & 性能调优实战案例100讲源码下载》 1. 查询实时报错日志物理路径（带*的放在靠后，或者不用*） cd /home/logs/java-gz-log-dir && tail -2000f java-gz-l…...

编程日记 2025/6/28 4:45:50

破界·共生：生成式人工智能（GAI）认证重构普通人的AI进化图谱

在当今这个科技日新月异的时代，人工智能（AI）正以惊人的速度改变着我们的世界。从智能家居到自动驾驶，从医疗诊断到金融分析，AI的应用已经渗透到社会生活的方方面面。面对如此迅猛的发展态势，我们不禁要问：人工智能的未来将走向何方？普通人又该如何把握这一历史机遇，学…...

编程日记 2025/6/22 22:29:29

HTTP代理：网页加速的隐形引擎

目录引言：网页加载速度为何至关重要？ 一、HTTP代理的核心加速原理二、四大加速黑科技详解三、实战场景性能对比四、代理加速的隐藏代价五、未来发展趋势结语：智能代理的选型指南引言：网页加载速度为何至关重要&#…...

编程日记 2025/6/26 22:22:10

Unity 常见报错定位和查找方法

1.控制台直接看报错信息 2.打log 例子： for(int i 0;i < 8;i) {Debug.Log(i);//这是打的log,看看到底i是几的时候出问题gameObject.name strs[i];} 3.断点调试 （1）在你想打断点的行，左边空白处点击可以打断点&#xff…...

编程日记 2025/6/28 4:56:07

人工智能之数学基础:初等反射阵

本文重点在线性代数中，初等反射阵（Householder矩阵）作为一类特殊的正交矩阵，在矩阵变换、特征值计算及几何变换等领域具有广泛应用。其简洁的构造方式和丰富的数学性质，使其成为数值分析和几何处理中的重要工具。什么是初等反射阵（豪斯霍尔德变换） I为单位矩阵，wwT…...

编程日记 2025/6/25 15:45:55

《Linux运维总结：基于银河麒麟V10操作系统+ARM64架构CPU二进制部署单机ACL版consul v1.18.1》

总结：整理不易，如果对你有帮助，可否点赞关注一下？更多详细内容请参考：《Linux运维篇：Linux系统运维指南》一、简介 1、什么是consul Consul是HashiCorp公司推出的开源工具，用于实现分布式系统的服务发现与配置。 Consul是分布式的、高可用的、可横向扩展的。架构图…...

编程日记 2025/6/28 3:18:35

web网站页面测试点---添加功能测试

添加一、创建新的申请时，关闭网络查看数据是否存在，并提示网络错位相关提示语二、在文本框内输入数据 1.在文本框内输入空格，查看文本内容前后是否存在空格 2.在文本框内输入最大长度，查看能否正确提交 3.在文本框内输入最大长…...

编程日记 2025/6/28 5:06:09

实操自动生成接口自动化测试用例

这期抽出来的问题是关于如何使用Eolinker自动生成接口自动化测试用例，也就是将API文档变更同步到测试用例，下面是流程的示例解析。导入并关联API文档和自动化测试用例首先是登陆Eolinker，可以直接在线使用。进入流程测试用例详情页&am…...

编程日记 2025/6/28 3:22:47

【华为OD技术面试真题 - 技术面】- Java面试题（17)

华为OD面试真题精选专栏：华为OD面试真题精选目录: 2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选虚拟机分区1. **虚拟磁盘分区**2. **虚拟机的内存分区**3. **CPU分配**4. **虚拟网络分区**5. **存储虚拟化和分区**6. **虚拟机分区管理**…...

编程日记 2025/6/27 18:05:17

mapState 函数的用法

mapState 是 Vuex 提供的一个辅助函数，其主要作用是将 Vuex 仓库中的状态映射到组件的计算属性中，这样在组件里就能像访问本地计算属性一样访问 Vuex 仓库中的状态。以下为你详细介绍 mapState 函数的不同用法。 1. 基本用法：对象形式当使…...

编程日记 2025/6/28 4:07:50

【学Rust写CAD】17 通用2D仿射变换矩阵结构体（matrix/generic.rs）

源代码 // matrix.rs use std::ops::{Add, Mul};use std::ops::{Add, Mul};/// 通用2D仿射变换矩阵（元素仅需Copy） #[derive(Clone, Copy, Debug, PartialEq)] pub struct Matrix<X, Y, Xx, Xy, Yx, Yy> {pub x: X, pub y: Y,pub xx: Xx, pub xy:…...

编程日记 2025/6/28 4:54:16

STM32单片机入门学习——第3-4节： [2-1、2]软件安装和新建工程

写这个文章是用来学习的,记录一下我的学习过程。希望我能一直坚持下去,我只是一个小白,只是想好好学习,我知道这会很难，但我还是想去做！ 本文写于：2025.04.01 STM32开发板学习——第一节： [1-1]课程简介前言开发板说明引用解答和…...

编程日记 2025/6/3 22:58:44

Linux详解

01 计算机组成原理 1、什么是计算机？ 计算机俗称电脑，就相当于一种人造人， 电脑二字蕴含着人类的对计算机的终极期望，希望一通电就能够像人脑一样去工作 2、为何要有计算机? 为了造出一种机器来取代人去工作&…...

编程日记 2025/6/28 1:18:51

IP数据报报文格式

一概述 IP数据报由两部分组成：首部数据部分。首部的前一部分是固定长度，一共20字节大小，是所有IP数据报文必须具有的；固定部分后面是一些可选字段，其长度是可变的。二首部固定部分各字段意义 （1&…...

编程日记 2025/6/28 4:55:19

自然语言处理（25:（终章Attention 1.）Attention的结构)

系列文章目录终章 1：Attention的结构终章 2：带Attention的seq2seq的实现终章 3：Attention的评价终章 4：关于Attention的其他话题终章 5：Attention的应用目录系列文章目录前言 Attention的结构一.seq…...

编程日记 2025/6/28 3:03:19

Minimind 训练一个自己专属语言模型

发现了一个宝藏项目， 宣传是完全从0开始，仅用3块钱成本 2小时！即可训练出仅为25.8M的超小语言模型MiniMind，最小版本体积是 GPT-3 的 17000，做到最普通的个人GPU也可快速训练 https://github.com/jingyaogong/minimi…...

编程日记 2025/6/28 4:58:24

Android里面内存优化

核心思路在Android开发中，内存优化是保证应用性能稳定和用户体验的关键。我通常从以下几个方面进行内存优化： 1. 内存泄漏检测与修复使用LeakCanary等工具检测内存泄漏常见内存泄漏场景： 静态变量持有Activity/Fragment引用非静态内部…...

编程日记 2025/6/28 4:54:17

Git操作指南

Git操作指南 1.安装并配置Git Git官网：https://git-scm.com/downloads 安装完成后，打开Git Bash，配置Git： git config --global user.email "emailexample.com" git config --global user.name "Your Name&quo…...

编程日记 2025/6/24 11:14:54

【蓝桥杯—单片机】通信总线专项 | 真题整理、解析与拓展（更新ing...）

通信总线专项前言SPI第十五届省赛题 UART/RS485/RS232UARTRS485RS232第十三届省赛题小结和拓展：传输方式的分类第十三届省赛其他相关考点网络传输速率第十五届省赛题第十二届省赛题前言在本文中我会把蓝桥杯单片机赛道历年真题中涉及到通信总线的题目整理出…...

编程日记 2025/6/20 23:05:36

深入探究C语言中的二进制世界：从原理到实践

文章目录深入探究C语言中的二进制世界：从原理到实践一、进制的本质与C语言实现1. 进制系统全景2. C语言中的进制表示3. 格式化输出进阶二、进制转换的工程实践1. 转换算法实现2. 实际应用中的转换技巧快速二进制 - 十六进制转换位运算优化转换 3. 进制转换详细示例…...

编程日记 2025/6/24 10:24:21

【android bluetooth 协议分析 13】【RFCOMM详解 2】【通俗易懂 rfcomm 基本流程】

RFCOMM 协议基本流程一、连接建立流程（附 BTsnoop 实例解析） 1. L2CAP 通道建立 BTsnoop 表现： L2CAP_Connection_Request (PSM0x0003) // 请求建立RFCOMM专用通道L2CAP_Connection_Response (Success) // 对方同意作用：相…...

编程日记 2025/6/22 5:23:03

万字知识篇(2)：SpringBoot的常用注解(上）

SpringBoot的常用注解非常的多，一篇文章根本讲不完，将分为上下两章，通过本章你将会系统的学习到： 1. 注解在SpringBoot中的作用 2. SpringBoot 常用注解速查表 3. 核心启动类注解 4. Configuration 5. Bean 6. PropertySource 7. …...

编程日记 2025/6/28 3:41:43

Postman —— postman实现参数化

什么时候会用到参数化比如：一个模块要用多组不同数据进行测试验证业务的正确性 Login模块：正确的用户名，密码成功；错误的用户名，正确的密码失败 postman实现参数化在实际的接口测试中，部分参数每…...

编程日记 2025/6/28 1:18:58

Docker学习--容器生命周期管理相关命令--docker create 命令

docker create 命令作用： 会根据指定的镜像和参数创建一个容器实例，但容器只会在创建时进行初始化，并不会执行任何进程。语法： docker create[参数] IMAGE（要执行的镜像） [COMMAND]（在容器内部…...

编程日记 2025/6/22 2:07:35

算法基础_基础算法【高精度 + 前缀和 + 差分 + 双指针】

算法基础_基础算法【高精度前缀和差分双指针】 ---------------高精度---------------791.高精度加法题目介绍方法一：代码片段解释片段一： 解题思路分析 792. 高精度减法题目介绍方法一：代码片段解释片段一： 解题思路分析 7…...

编程日记 2025/4/25 19:20:20

C语言深度解析：从零到系统级开发的完整指南

一、C语言的核心特性与优势 1. 高效性与直接硬件控制 C语言通过编译为机器码的特性，成为系统级开发的首选语言。例如，Linux内核通过C语言直接操作内存和硬件寄存器，实现高效进程调度。关键点： malloc/free直接管理内存&#…...

编程日记 2025/6/28 4:28:08

Axure疑难杂症：完美解决中继器筛选问题（时间条件筛选、任性筛选）

亲爱的小伙伴，在您浏览之前，烦请关注一下，在此深表感谢！ 课程主题：中继器筛选专题主要内容：时间条件筛选、多条件组合筛选、多个单一条件混合筛选应用场景：各类数据表的多条件筛选均可使用…...

编程日记 2025/6/28 1:18:52

汇编学习之《扩展指令指针寄存器》

什么是指令指针寄存器？ EIP (Extended Instruction Pointer): 保存cpu 下一次将要执行的代码的地址。通过OllyGbd可以看到CPU即将执行指令的地址和EIP 内部放入的地址一致，多次F8依然是这样。这里要区分下，之前比如EAX，ECX我…...

编程日记 2025/6/27 21:18:54

oracle-blob导出，在ob导入失败

导出： [oraclelncs dmp]$ /home/oracle/sqluldr2 gistar/res#pwd192.168.205.58:1521/lndb query"select * from an_odn_picture where length(PIC_CONTENT)<25000" filean_odn_picture.csv Charsetutf8 textCSV 0 rows exported at 2025-…...

编程日记 2025/6/28 2:58:41

【Linux笔记】进程间通信——匿名管道||进程池

🔥个人主页🔥：孤寂大仙V 🌈收录专栏🌈：Linux 🌹往期回顾🌹：【Linux笔记】动态库与静态库的理解与加载 🔖流水不争，争的是滔滔不一、Linux进程间通…...

编程日记 2025/6/21 5:13:37

Spring Boot 3.4.3 基于 Caffeine 实现本地缓存

在现代企业级应用中，缓存是提升系统性能和响应速度的关键技术。通过减少数据库查询或复杂计算的频率，缓存可以显著优化用户体验。Spring Boot 3.4.3 提供了强大的缓存抽象支持，而 Caffeine 作为一款高性能的本地缓存库，因其优异的…...

编程日记 2025/6/23 20:05:56

windows使用nvm管理node版本

1.下载地址：https://github.com/coreybutler/nvm-windows/releases 选择nvm-setup.exe 2.安装，下载完成后，以管理员身份运行 nvm-setup.exe,选择默认安装，一路next 3.使用，安装完成后会打开一个命令行窗口&#xff0…...

编程日记 2025/6/26 10:23:10

vscode集成deepseek实现辅助编程（银河麒麟系统）【详细自用版】

针对开发者用户，可在Visual Studio Code中接入DeepSeek，实现辅助编程。可参考我往期文章在银河麒麟系统环境下部署DeepSeek：基于银河麒麟桌面&&服务器操作系统的 DeepSeek本地化部署方法【详细自用版】一、前期准备 &#xff08…...

编程日记 2025/6/28 4:41:25

智谱大模型(ChatGLM3)PyCharm的调试指南

前言最近在看一本《ChatGLM3大模型本地化部署、应用开发和微调》，本文就是讨论ChatGLM3在本地的初步布设。（模型文件来自魔塔社区） 1、建立Pycharm工程采用的Python版本为3.11 2、安装对应的包 2.1、安装modelscope包 pip install model…...

编程日记 2025/6/25 4:40:55

MySQL GROUP BY分组获取非聚合列值方法

在使用MySQL进行数据库查询时，如果你需要对数据按照某个或某些列进行分组（GROUP BY），并且希望在结果中包含非聚合列的值，你可以通过以下几种方法来实现： 1. 使用聚合函数虽然这不是直接获取非聚合列值的…...

编程日记 2025/6/25 23:27:34

多路径 TCP 调度的另一面

参考前面的文章一个原教旨的多路径 TCP 和 MP-BBR 公平性推演，一直都破而不立，不能光说怎样不好，还得说说现状情况下，该如何是好。如果 receiver 乱序重排的能力有限(拜 TCP 所赐)，如果非要在多路径上传输 TCP&…...

编程日记 2025/6/22 1:35:19

在Qt中判断输入的js脚本是否只包含函数

目前在使用QtScriptEngine，在利用evaluate注册子函数时，要求用户输入的js文件中的内容仅仅是函数，函数体外不能出现一些变量的声明、函数的调用等其他代码。反复咨询DeepSeek后，终于给出了一个目前测试可用的代码： b…...

编程日记 2025/6/22 7:15:08

【Easylive】MySQL中LEFT JOIN与INNER JOIN的使用场景对比

【Easylive】项目常见问题解答（自用&持续更新中…） 汇总版在MySQL数据库查询中，JOIN操作是最常用的操作之一，而LEFT JOIN和INNER JOIN是两种最基础的JOIN类型。理解它们的区别和适用场景对于编写高效、准确的SQL查询至关重要…...

编程日记 2025/6/28 1:18:55

Boost库中的谓词函数

Boost库中的谓词函数谓词函数基础概念在编程中，谓词函数（Predicate Function）是指返回布尔值（true或false）的函数，用于检测输入是否满足特定条件。谓词函数在STL算法和Boost库中被广泛使用，…...

编程日记 2025/6/28 1:19:28

人工智能之数学基础:基于初等反射矩阵完成矩阵的QR分解

本文重点 QR分解是矩阵分解中的一种重要方法，它将一个矩阵分解为一个正交矩阵Q和一个上三角矩阵R的乘积，即A=QR。这种分解在求解线性方程组、最小二乘问题、特征值计算等领域有着广泛应用。 QR分解的定义 QR分解就是应用了初等反射矩阵，不断的通过初等反射矩阵，然后将A变…...

编程日记 2025/6/28 1:18:53

AI应用案例（1）——智能工牌和会话质检

今天开辟一个新的模块，自己平时也搜集一些典型的行业应用案例，不如就记录到C站，同时和大家也是个分享好了。今天分享的企业和产品，是循环智能的智能工牌。这个产品应用场景清晰，针对的行业痛点合理，解决…...

编程日记 2025/6/28 1:18:57

碰一碰发视频系统--基于H5场景开发

碰一碰发视频#碰一碰发视频#开发基于H5的"碰一碰发视频"交互系统（类似华为/苹果的NFC碰传但通过移动端网页实现），需要结合近场通信（NFC/H5 API）和媒体传输技术。以下是具体实现方案 #碰一碰营销系统# #碰一…...

编程日记 2025/6/28 5:06:07

kotlin扩展函数的实现原理

1. 编译时转换在编译时，Kotlin 扩展函数会被转换为静态函数。这个静态函数的第一个参数是接收者类型（也就是被扩展的类），而调用扩展函数时，实际上是调用这个静态函数，并将接收者对象作为第一个参数传入。…...

编程日记 2025/6/24 7:04:40

激活函数学习笔记

Sigmoid：梯度消失、指数计算复杂运行慢、输出不是以0为中心，梯度平滑便于求导tanh：以0为中心，其他与sigmoid相似ReLu：transformer常用，解决了梯度消失问题、计算复杂度低，存在神经元死亡问题和梯…...

编程日记 2025/6/28 1:18:54

【含文档+PPT+源码】基于Python爬虫二手房价格预测与可视化系统的设计与实现

项目介绍本课程演示的是一款基于Python爬虫二手房价格预测与可视化系统，主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的 Java 学习者。包含：项目源码、项目文档、数据库脚本、软件工具等所有资料带你从零开始部署运行本套系统该项…...

编程日记 2025/6/28 3:11:14

基于 Swoole 的高性能 RPC 解决方案

文章精选推荐 1 JetBrains Ai assistant 编程工具让你的工作效率翻倍 2 Extra Icons：JetBrains IDE的图标增强神器 3 IDEA插件推荐-SequenceDiagram，自动生成时序图 4 BashSupport Pro 这个ides插件主要是用来干嘛的 ？ 5 IDEA必装的插件&…...

编程日记 2025/6/28 4:03:02