最近有个小错误，因为最近还是在看thingsboard，最近终于看到前端的代码，突然发现怎么全是ts的文件，仔细一看原来并不是之前认为的AngularJS，而是Angular。。。我tm真的无语了，又要去重新学。。。
Angular的结构比起AngularJS真的复杂很多，以前还可以说是传统HTML+JS结构的扩展。新的版本真的大变了。
以前的AngularJS只要一个html就是开炫，现在是要一堆文件，就算摸清楚最小系统，也要折腾一番，唉，好吧。。。
1 环境配置
手动配置Angular的环境也是堪称折磨，尤其是package.json，tsconfig.json。所以一般都用自动配置。
首先是安装node.js，安装的原始命令是：
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
因为众所周知的原因，这个命令很大概率要超时，必须换成。
curl -o- https://gitee.com/mirrors/nvm/raw/v0.39.7/install.sh | bash
之后source ~/.bashrc
然后升级nvm install --lts
# 然后全局安装 Angular CLI
npm i -g @angular/cli
后面用到的ng命令，就是Angular CLI工具。这个工具的帮助如下：
# 创建项目（这一步 CLI 会自动生成配置和依赖），
ng new hello-angular --minimal --routing=false --style=css
cd hello-angular
ng serve -o # 默认 http://localhost:4200
2 最简单的Hello world
最小的angular结构
.
├── angular.json
├── package.json
├── src
│ ├── index.html
│ ├── main.ts
│ └── styles.css
├── tsconfig.app.json
└── tsconfig.json2 directories, 7 files
其中4个json配置，css都可以用ng new自动生成。（自己配置确实有点麻烦，我搞了很久配置都要报错）
mian.ts
import {Component} from '@angular/core';
import {bootstrapApplication} from '@angular/platform-browser';@Component({selector: 'app-root',template: `Hello world!`,
})
export class Playground {}bootstrapApplication(Playground);index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><title>HelloAngular</title><base href="/" /></head><body><app-root></app-root></body>
</html>可以看出，一个angluar的基本结构还是index.html开始。
由app-root寻址到第一个组件。组件就是angular的核心。
@Component({...})
export class MyComponent {// 逻辑代码
}@Component是组件类的装饰器，这个以前玩angularJS的时候还真没看到过。。。现在的typescript也是越来越复杂了。
3 更典型的Angular
在上一步生成的代码基础上，做了一些修改。如下：
main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { App } from './app/app';
import { appConfig } from './app/app.config';bootstrapApplication(App, appConfig).catch((err) => console.error(err));
index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><title>HelloAngular</title><base href="/" /></head><body><app-root></app-root> <!-- 👈 Angular 根组件挂载点 --></body>
</html>
app.ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common'; // ✅ 加上这个！
import { TodoService, TodoItem } from './todo.service';@Component({selector: 'app-root',standalone: true,imports: [FormsModule, CommonModule], // ✅ 把 CommonModule 加入 importstemplateUrl: './app.component.html',styleUrls: ['./app.component.css'],
})
export class App {newTitle = '';constructor(public todo: TodoService) {}add() {if (this.newTitle.trim()) {this.todo.add({ title: this.newTitle.trim(), done: false });this.newTitle = '';}}toggle(item: TodoItem) {this.todo.toggle(item);}remove(item: TodoItem) {this.todo.remove(item);}
}todo.service.ts
import { Injectable } from '@angular/core';export interface TodoItem {title: string;done: boolean;
}@Injectable({ providedIn: 'root' })
export class TodoService {list: TodoItem[] = [];add(item: TodoItem) { this.list.push(item); }toggle(item: TodoItem) { item.done = !item.done; }remove(item: TodoItem) { this.list = this.list.filter(i => i !== item); }
}
app.config.ts
import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';export const appConfig: ApplicationConfig = {providers: [provideBrowserGlobalErrorListeners(),provideZoneChangeDetection({ eventCoalescing: true }),]
};
app.component.html
<h1>📝 Angular Todo (standalone)</h1><inputplaceholder="输入待办事项"[(ngModel)]="newTitle"(keyup.enter)="add()"
/>
<button (click)="add()">添加</button><ul><li *ngFor="let item of todo.list"><input type="checkbox" [checked]="item.done" (change)="toggle(item)" /><span [class.done]="item.done">{{ item.title }}</span><button (click)="remove(item)">🗑</button></li>
</ul>
app.component.css
.done { text-decoration: line-through; color: #888; }
li { margin: 4px 0; }| 概念 | 代码位置 | 说明 |
|---|---|---|
| 组件 (Component) | AppComponent | UI 单元 + 逻辑 |
| 模板 (Template) | app.component.html | HTML + Angular 指令 (*ngFor, [(ngModel)]) |
| 服务 (Service) | TodoService | 业务数据与方法，注入到组件 |
| 注入 (DI) | constructor(public todo: TodoService) | 将服务注入组件 |
| 双向绑定 | [(ngModel)]="newTitle" | 表单输入 ↔ 组件字段 |
| 事件绑定 | (click)="add()" | 用户操作触发方法 |
在第二个程序中，组件Component的一部分被拆分出去了，作为Service，这个的原因是复用，这样其它的组件也可以使用这个Service。也相当于界面和业务分离。
下面是一个小类比。
| Angular 元素 | 类比于 Java | 作用 |
|---|---|---|
Component | Controller / View | 处理 UI 展示 |
Service | Service / DAO | 处理业务逻辑 |
Interface | Java interface / DTO | 定义数据结构 |
4 框架流程
4.1 组件定义和模板编译
首先是定义各种组件。一个组件就是显示，可以是一个页面，也可以是页面的一部分。
@Component({selector: 'app-root',standalone: true,imports: [FormsModule, CommonModule], templateUrl: './app.component.html',styleUrls: ['./app.component.css'],
})这里的app-root就对应了html中的<app-root></app-root>
template和templateUrl就是模板。
对于template或者templateUrl里面的内容，框架会再进行编译，并且在前端重新生成，
4.2 运行时加载
在框架加载后，会根据main.js重新对app-root字段处理，这个就是重新加载之后的。
4.3 代码流程
在main.ts里面设置了启动的组件App
bootstrapApplication(App, appConfig).catch((err) => console.error(err));在App中定义了Service，通过@Component和HTML关联。这部分在上面讲过了。
export class App {newTitle = '';constructor(public todo: TodoService) {}add() {if (this.newTitle.trim()) {this.todo.add({ title: this.newTitle.trim(), done: false });this.newTitle = '';}}toggle(item: TodoItem) {this.todo.toggle(item);}remove(item: TodoItem) {this.todo.remove(item);}
}至于Service就是组件类，里面是业务的实现。
export interface TodoItem {title: string;done: boolean;
}@Injectable({ providedIn: 'root' })
export class TodoService {list: TodoItem[] = [];add(item: TodoItem) { this.list.push(item); }toggle(item: TodoItem) { item.done = !item.done; }remove(item: TodoItem) { this.list = this.list.filter(i => i !== item); }
}现在的标签也改成ng开头了，比如ngModel，ngFor等等。
更详细的后面再讨论吧。。。
![[QT]-宏使用](http://pic.xiahunao.cn/[QT]-宏使用)
![华为OD-2024年E卷-字母组合[200分] -- python](http://pic.xiahunao.cn/华为OD-2024年E卷-字母组合[200分] -- python)
![P3258 [JLOI2014] 松鼠的新家](http://pic.xiahunao.cn/P3258 [JLOI2014] 松鼠的新家)
