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

Angular 知识框架

news 来源：原创 2025/7/1 11:00:55

一、Angular 基础

1. Angular 简介

Angular 是什么？
- 基于 TypeScript 的前端框架（Google 维护）。
- 适用于构建单页应用（SPA）。
核心特性
- 组件化架构
- 双向数据绑定
- 依赖注入（DI）
- 模块化设计（NgModule）
Angular vs AngularJS
- Angular（2+）是完全重写的版本，不兼容 AngularJS（1.x）。

2. 开发环境搭建

安装工具
- Node.js（LTS 版本）
- Angular CLI：npm install -g @angular/cli
创建项目
```
ng new my-app
cd my-app
ng serve
```

项目结构

/src/app         # 核心代码/components/services/assets      # 静态资源index.html   # 主入口

3. TypeScript 基础

类型系统
- 基本类型：string, number, boolean, any
- 接口（interface）
- 类（class）
装饰器（Decorators）
- @Component, @Injectable, @Input, @Output

二、Angular 核心概念

4. 组件（Components）

组件结构

@Component({selector: 'app-hello',templateUrl: './hello.component.html',styleUrls: ['./hello.component.css']
})
export class HelloComponent {name = 'Angular';
}

模板语法
- 插值：{{ name }}
- 属性绑定：[property]="value"
- 事件绑定：(event)="handler()"
生命周期钩子
- ngOnInit, ngOnDestroy, ngAfterViewInit 等

5. 指令（Directives）

内置指令
- *ngIf（条件渲染）
- *ngFor（循环渲染）
- [ngClass], [ngStyle]（动态样式）
自定义指令
- @Directive 装饰器

6. 数据绑定

单向绑定
- 属性绑定：[value]="data"
- 事件绑定：(click)="onClick()"
双向绑定
- [(ngModel)]（需导入 FormsModule）

7. 服务与依赖注入（DI）

创建服务

@Injectable({providedIn: 'root' // 全局单例
})
export class DataService {getData() { return [1, 2, 3]; }
}

依赖注入

constructor(private dataService: DataService) {}

8. 路由（Routing）

配置路由

const routes: Routes = [{ path: 'home', component: HomeComponent },{ path: 'about', component: AboutComponent }
];

路由导航
- <router-outlet>（占位符）
- routerLink（链接跳转）
- Router.navigate()（编程式导航）

三、Angular 进阶

9. 表单处理

模板驱动表单
- NgModel，NgForm
响应式表单
- FormGroup, FormControl
- Validators（表单验证）

10. HTTP 通信

HttpClient

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

拦截器（Interceptors）
- 全局请求/响应处理

11. 状态管理

RxJS
- Observable, Subject
- 操作符：map, filter, debounceTime
NgRx（Redux 风格）
- Store, Actions, Reducers

12. 性能优化

变更检测策略
- ChangeDetectionStrategy.OnPush

懒加载模块

{ path: 'admin', loadChildren: () => import('./admin.module') }

AOT 编译（Ahead-of-Time）
- 提升运行时性能

四、Angular 高级

13. 国际化（i18n）

ng xi18n 提取翻译文本
多语言切换

14. 测试

单元测试
- Jasmine + Karma
- TestBed（ Angular 测试工具）
E2E 测试
- Protractor（已弃用，推荐 Cypress）

15. 部署

生产构建
```
ng build --prod
```

Docker 部署

FROM nginx
COPY dist/my-app /usr/share/nginx/html

五、学习路线建议

1. 初级阶段（1-2 个月）

TypeScript 基础
Angular 组件 & 数据绑定
路由 & HTTP 请求

2. 中级阶段（2-4 个月）

响应式表单
RxJS 异步编程
状态管理（NgRx）

3. 高级阶段（4-6 个月）

性能优化（懒加载、AOT）
自定义指令/管道
微前端架构（Angular Elements）

4. 实战项目

初级：Todo List（CRUD 操作）
中级：电商网站（购物车、路由守卫）
高级：管理后台（NgRx、权限控制）

通过这个知识框架，你可以逐步掌握 Angular 的核心技术，并进阶到企业级开发。建议结合 Angular 官方文档和实战项目练习！

Angular 知识框架

一、Angular 基础 1. Angular 简介 Angular 是什么？ 基于 TypeScript 的前端框架（Google 维护）。适用于构建单页应用（SPA）。核心特性组件化架构双向数据绑定依赖注入（DI） 模块化设计…...

编程日记 2025/7/1 11:00:55

python三方库sqlalchemy

SQLAlchemy 是 Python 中最强大、最受欢迎的 ORM（对象关系映射）库，它允许你使用 Python 对象来操作数据库，而不需要直接编写 SQL 语句。同时，它也提供了对底层 SQL 的完全控制能力，适用于从简单脚本到大型企…...

编程日记 2025/6/29 1:02:42

【SSL部署与优化】如何为网站启用HTTPS：从Let‘s Encrypt免费证书到Nginx配置

网站启用HTTPS 的完整实战指南，涵盖从 Let’s Encrypt 免费证书申请到 Nginx 配置的详细步骤，包括重定向、HSTS 设置及常见问题排查： 一、准备工作 1. 确保域名解析正确 • 在 DNS 管理后台，将域名（如 example.com&…...

编程日记 2025/6/28 22:56:40

Kubernetes控制平面组件：Kubelet详解（四）：gRPC 与 CRI gRPC实现

云原生学习路线导航页（持续更新中） kubernetes学习系列快捷链接 Kubernetes架构原则和对象设计（一）Kubernetes架构原则和对象设计（二）Kubernetes架构原则和对象设计（三）Kubernetes控…...

编程日记 2025/6/28 23:40:21

电商平台自动化

为什么要进行独立站自动化纯人工测试人力成本高，相对效率低回归测试在通用模块重复进行人工测试，测试效率低前期调研备选自动化框架（工具）： Katalon Applitools Testim 阿里云EMAS Playwright Appium Cypress 相关…...

编程日记 2025/6/29 1:09:33

【kafka】kafka概念，使用技巧go示例

1. Kafka基础概念 1.1 什么是Kafka？ Kafka是一个分布式流处理平台，用于构建实时数据管道和流式应用。核心特点： 高吞吐量：每秒可处理百万级消息持久化存储：消息按Topic分区存储在磁盘分布式架构：支持水平…...

编程日记 2025/6/29 0:58:12

计算机系统结构——Cache性能分析

一、实验目的加深对Cache的基本概念、基本组织结构以及基本工作原理的理解。掌握Cache容量、相联度、块大小对Cache性能的影响。掌握降低Cache不命中率的各种方法以及这些方法对提高Cache性能的好处。理解LRU与随机法的基本思想以及它们对Cache性能的影响。二、实验平台实…...

编程日记 2025/6/28 22:56:11

Spring Web MVC————入门(2)

1，请求我们接下来继续讲请求的部分，上期将过很多了，我们来给请求收个尾。还记得Cookie和Seesion吗，我们在HTTP讲请求和响应报文的时候讲过，现在再给大家讲一遍，我们HTTP是无状态的协议，这次的…...

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

Adobe DC 2025安装教程

一.软件下载点此下载二.软件安装...

编程日记 2025/6/28 22:56:41

W1电力线载波通信技术

CK_Label_W1 产品型号：CK_Label_W1 尺寸：37*65*33.7mm 按键：1 指示灯：1 RGB灯(红/绿/蓝/黄/紫/白/青) 外观颜色：白色合规认证：CE, RoHS 工作温度：0-50℃ 提示功能：蜂鸣器声音…...

编程日记 2025/6/28 22:56:27

现代 Web 自动化测试框架对比：Playwright 与 Selenium 的深度剖析

现代 Web 自动化测试框架对比：Playwright 与 Selenium 的深度剖析摘要：本文对 Playwright 与 Selenium 在开发适配性、使用难度、场景适用性及性能表现等方面进行了全面深入的对比分析。通过详细的技术实现细节阐述与实测数据支撑，为开发者…...

编程日记 2025/7/1 11:00:18

第二章：CSS秘典 · 色彩与布局的力量

剧情承接：色彩失衡的荒原林昊穿过 HTML 大门，眼前却是一片灰白扭曲的荒原。所有页面元素如同幽灵般漂浮，没有色彩、没有结构，错乱无章。 “这是失控的样式荒原。” 零号导师的声音再次响起， “HTML 给了你骨架&…...

编程日记 2025/6/28 23:32:17

ubuntu studio 系统详解

Ubuntu Studio 系统详解：面向多媒体创作的专业 Linux 发行版一、定位与目标用户 Ubuntu Studio 是 Ubuntu 的官方衍生版本（Flavor），专为音频、视频、图形设计、音乐制作、影视后期等多媒体创作场景设计。目标用户包括&#x…...

编程日记 2025/6/28 22:56:26

在 Ubuntu 20.04.6 LTS 中将 SCons 从 3.1.2 升级到 4.9.1

在 Ubuntu 20.04.6 LTS 中将 SCons 从 3.1.2 升级到 4.9.1，可以通过以下步骤完成： 方法 1：使用 pip 安装（推荐） 步骤 1：卸载旧版本 SCons # 如果通过 apt 安装的旧版本，先卸载 sudo apt remov…...

编程日记 2025/6/29 1:20:57

边缘计算网关工业物联网应用：空压机远程运维监控管理

边缘计算网关在空压机远程运维监控管理中的工业物联网应用，主要体现在数据采集与处理、设备监控、故障诊断与预警、远程控制等方面，以下是具体介绍： 数据采集与处理多源数据采集：边缘计算网关能连接空压机的各类传感器&#xf…...

编程日记 2025/6/28 23:27:50

【大模型面试每日一题】Day 18：大模型中KV Cache的作用是什么？如何通过Window Attention优化其内存占用？

【大模型面试每日一题】Day 18：大模型中KV Cache的作用是什么？如何通过Window Attention优化其内存占用？ 📌 题目重现 🌟🌟 面试官:大模型中KV Cache的作用是什么？如何通过Window Attention优…...

编程日记 2025/6/29 0:27:31

Spring的 @Validate注解详细分析

在 Spring Boot 中，参数校验是保证数据合法性的重要手段。除了前面提到的NotNull、Size等基础注解外，JSR-303（Bean Validation 1.0）、JSR-349（Bean Validation 1.1）和 JSR-380（Bean Validation …...

编程日记 2025/6/28 22:56:20

现代计算机图形学Games101入门笔记(三)

三维变换具体形式缩放，平移特殊点旋转。这里涉及到坐标系，先统一定义右手坐标系，根据叉乘和右手螺旋判定方向。这里还能法线Ry Sina 正负与其他两个旋转不一样。这里可以用右手螺旋，x叉乘z，发现大拇指朝下&#xff0…...

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

AI时代的弯道超车之第八章：具体分享几个AI实际操作方法和案例

在这个AI重塑世界的时代，你还在原地观望吗？是时候弯道超车，抢占先机了！李尚龙倾力打造——《AI时代的弯道超车：用人工智能逆袭人生》专栏，带你系统掌握AI知识，从入门到实战，全方位提升认知与竞争力！内容亮点： AI基础 + 核心技术讲解职场赋能 + 创业路径揭秘打破…...

编程日记 2025/6/28 23:44:19

企业网络新选择：软件定义架构下的MPLS

随着现代企业园区网络和运营商级基础设施的不断发展，多协议标签交换 （MPLS） 已成为一项基础技术，这要归功于其高效的数据包转发、高级流量工程功能以及对多租户环境的强大支持。什么是MPLS？ MPLS（多协议…...

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

SparkSQL操作Mysql

（一）准备mysql环境我们计划在hadoop001这台设备上安装mysql服务器，（当然也可以重新使用一台全新的虚拟机）。以下是具体步骤： 使用finalshell连接hadoop001.查看是否已安装MySQL。命令是: rpm -qa|grep…...

编程日记 2025/6/29 0:48:35

【论文阅读】UNIT: Backdoor Mitigation via Automated Neural Distribution Tightening

ECCV2024 https://github.com/Megum1/UNIT 我们的主要贡献总结如下： 我们引入了UNIT（“AUtomated Neural DIstribution Tightening”），这是一种创新的后门缓解方法，它为每个神经元近似独特的分布边界，用于…...

编程日记 2025/6/28 23:45:30

Android逆向学习（十） IDA逆向编辑Android so文件

Android逆向学习（十） IDA逆向编辑Android so文件一、写在前面这是吾爱破解论坛正己大大的第10个教程 native code在我之前的博客中讲到过，所以这里就不讲了简单来说，native code就是在android中使用c或c语言进行开发这样…...

编程日记 2025/6/30 0:01:06

OpenCV + PyAutoGUI + Tkinter + FastAPI + Requests 实现的远程控制软件设计方案

以下是基于 OpenCV PyAutoGUI Tkinter FastAPI Requests 实现的远程控制软件设计方案。该方案分为被控端（服务端） 和控制端（客户端），支持屏幕实时查看、键盘映射和鼠标操作。 1. 系统架构 ------------------- …...

编程日记 2025/6/29 0:31:12

C++.神经网络与深度学习（赶工版）（会二次修改）

神经网络与深度学习 1. 神经网络基础1.1 神经元模型与激活函数1.2 神经网络结构与前向传播2.1 损失函数与优化算法均方误差损失函数交叉熵损失函数梯度下降优化算法 2.2 反向传播与梯度计算神经元的反向传播 3.1 神经元类设计与实现神经元类代码实现代码思路 3.2 神经网络类构建…...

编程日记 2025/6/29 0:54:14

砷化镓太阳能电池：开启多元领域能源新篇

砷化镓太阳能电池作为一种高性能的光伏产品，具有诸多独特优势。其中，锗衬底砷化镓太阳能电池表现尤为突出，它具备高转化效率、耐辐照和高电压等特性。在空间供电电源领域，这些优势使其成为人造卫星、太空站、太空探测器和登陆探测…...

编程日记 2025/6/28 23:54:29

[Linux] vim及gcc工具

目录一、vim 1.vim的模式 2.vim的命令集 (1):命令模式 (2):底行模式 3.vim配置二、gcc 1.gcc格式及选项 2.工作布置三、自动化构建工具makefile 1.基本使用方法 2.配置文件解析 3.拓展在linux操作系统的常用工具中，常用vim来进行程序的编写&#xff1b…...

编程日记 2025/6/28 23:56:53

java加强 -stream流

Stream流是jdk8开始新增的一套api，可以用于操作集合或数组的内容。 Stream流大量的结合了Lambda的语法风格来编程，功能强大，性能高效，代码简洁，可读性好。体验Stream流把集合中所有以三开头并且三个字的元素存储到…...

编程日记 2025/6/28 22:56:25

RHCE认证通过率

红帽RHCE考试总体通过率38%（2023年数据），细分数据显示自学者通过率18%，参加官方培训者47%，企业团体考生53%。通过率差异由备考资源和考试策略决定。 RHCE考试重点考Ansible自动化运维，需在3.5小时内完成12…...

编程日记 2025/6/28 22:56:19

OpenEvidence AI临床决策支持工具平台研究报告

平台概述 OpenEvidence是一个专为医疗专业人士设计的临床决策支持工具，旨在通过整合各类临床计算器和先进的人工智能技术，提高医生的诊疗决策效率和准确性。作为一款综合性医疗平台，OpenEvidence将复杂的医学计算流程简化，同时提供个性化的临床建议，使医生能够更快、更准…...

编程日记 2025/6/28 22:56:23

gd32e230c8t6 keil6工程模板

下载固件gd32e230c8t6固件官方下载（需登录） 或蓝奏云新建一个文件夹，把固件压缩包里的里的Firmware和Template拖进去 keil新建gd32e230c8工程必须勾选CMSIS-CORE 新建一个文件夹，双击任意改名点击manage project it…...

编程日记 2025/6/28 22:56:22

正向代理与反向代理区别及应用

正向代理和反向代理是两种常见的代理服务器类型，它们在网络架构中扮演不同角色，核心区别在于代理对象和使用场景。 1. 正向代理（Forward Proxy） 定义：正向代理是客户端（如浏览器）主动配置的代理…...

编程日记 2025/6/28 23:07:34

自然语言处理入门级项目——文本分类

文章目录前言1.数据预处理1.1数据集介绍1.2数据集抽取1.3划分数据集1.4数据清洗1.5数据保存 2.样本的向量化表征2.1词汇表2.2向量化2.3自定义数据集2.4备注结语前言本篇博客主要介绍自然语言处理领域中一个项目案例——文本分类，具体而言就是判断评价属于积极还…...

编程日记 2025/6/29 0:18:36

UOS专业版上通过源码安装 Python 3.13 并保留系统默认版本

在 UOS 专业版上通过源码安装 Python 3.13 并保留系统默认版本，可按照以下步骤操作： 1. 安装依赖首先安装编译 Python 所需的依赖库： sudo apt update sudo apt install -y build-essential zlib1g-dev libncurses5-dev \ libgdbm-dev li…...

编程日记 2025/6/29 1:18:38

【题目】：ViT-CoMer: Vision Transformer with Convolutional Multi-scale Feature Interaction for Dense Predictions 【引用格式】：Xia C, Wang X, Lv F, et al. Vit-comer: Vision transformer with convolutional multi-scale feature interaction…...

编程日记 2025/6/29 0:39:39

kaggle薅羊毛

参考：https://pytorch-tutorial.readthedocs.io/en/latest/tutorial/chapter05_application/5_1_kaggle/#512-kaggle https://github.com/girls-in-ai/Girls-In-AI/blob/master/machine_learning_diary/data_analysis/kaggle_intro.md 1，code training…...

编程日记 2025/6/29 0:05:38

Python 之 Flask 入门学习

安装 Flask 在开始使用 Flask 之前，需要先安装它。可以通过 pip 命令来安装 Flask： pip install Flask创建第一个 Flask 应用创建一个简单的 Flask 应用，只需要几行代码。以下是一个最基本的 Flask 应用示例： from flask imp…...

编程日记 2025/6/28 22:56:24

SpringBoot Vue MySQL酒店民宿预订系统源码（支付宝沙箱支付）+代码讲解视频

💗博主介绍💗：✌在职Java研发工程师、专注于程序设计、源码分享、技术交流、专注于Java技术领域和毕业设计✌ 温馨提示：文末有 CSDN 平台官方提供的老师 Wechat / QQ 名片 :) Java精品实战案例《700套》 2025最新毕业设计选题推荐…...

编程日记 2025/6/28 23:38:37

Oracle日期计算跟Mysql计算日期差距问题-导致两边计算不一致

Oracle数据库对日期做加法时，得到的时间是某天的12:00:00 例： Oracle计算 select (TO_DATE(2025-04-14, YYYY-MM-DD)1.5*365) from dual; 结果：2026/10/13 12:00:00Mysql计算 select DATE_ADD( str_to_date( 2025-04-14, %Y-%m-%d ), INTER…...

编程日记 2025/6/29 0:19:28

多线程（三）

上一期关于线程的执行，咱们说到线程是 “ 随机调度，抢占式执行 ”。所以我们对于线程之间执行的先后顺序是难以预知的。例如咱们打篮球的时候，球场上的每一位运动员都是一个独立的 “ 执行流 ”，也可以认为是一个线程&#xff0…...

编程日记 2025/6/29 1:32:06

微服务商城（1）开篇、服务划分

参考：https://mp.weixin.qq.com/s?__bizMzg2ODU1MTI0OA&mid2247485597&idx1&sn7e85894b7847cc50df51d66092792453&scene21#wechat_redirect 为什么选择go-zero go-zero 为我们提供了许多高并发场景下的实用工具，比如为了降低接口耗时…...

编程日记 2025/6/29 0:39:53

刘强东 “猪猪侠” 营销：重构创始人IP的符号革命|创客匠人热点评述

当刘强东身着印有外卖箱猪猪侠的 T 恤漫步东京涩谷街头时，这场看似荒诞的行为艺术实则揭开了互联网商业竞争的新篇章。这位曾经以严肃企业家形象示人的京东创始人，正通过二次元 IP 的深度绑定，完成从商业领袖到文化符号的华丽转身。一、IP …...

编程日记 2025/6/29 0:57:31

MQ消息队列的深入研究

目录 1、Apache Kafka 1.1、 kafka架构设 1.2、最大特点 1.3、功能介绍 1.4、Broker数据共享 1.5、数据一致性 2、RabbitMQ 2.1、架构图 2.2、最大特点 2.3、工作原理 2.4、功能介绍 3、RocketMQ 3.1、架构设计 3.2、工作原理 3.3、最大特点 3.4、功能介绍 3…...

编程日记 2025/6/28 23:38:01