最近有個小錯誤，因為最近還是在看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] 松鼠的新家)
