推广网站平台免费收录查询
最近有个小错误，因为最近还是在看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 典型的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()" | 用户操作触发方法 |