框架集成：14 HTML与Angular - 详细教程与实战指南

# 安装Angular CLI
npm install -g @angular/cli

# 创建新项目（带路由和SCSS样式）
ng new my-app --routing --style=scss

# 启动开发服务器
cd my-app
ng serve

# 生成组件
ng generate component user-list
ng g c user-list  # 简写

# 生成服务
ng generate service user
ng g s user  # 简写

# 生成模块
ng generate module admin --routing
ng g m admin --routing

// user-card.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-user-card',    // HTML标签名
  templateUrl: './user-card.component.html',  // 模板文件
  styleUrls: ['./user-card.component.scss'],   // 样式文件
  // 或内联模板：
  // template: '<div>{{ user.name }}</div>',
  // styles: ['div { padding: 10px; }']
})
export class UserCardComponent {
  @Input() user!: User;           // 输入属性
  @Output() selected = new EventEmitter<User>();  // 输出事件

  onSelect() {
    this.selected.emit(this.user);
  }
}

<!-- user-card.component.html -->
<div class="card" [class.selected]="isSelected">
  <img [src]="user.avatar" [alt]="user.name" />
  <h3>{{ user.name }}</h3>
  <p>{{ user.email }}</p>

  <!-- 条件渲染 -->
  <span *ngIf="user.isAdmin" class="badge">管理员</span>

  <!-- 列表渲染 -->
  <ul>
    <li *ngFor="let skill of user.skills">{{ skill }}</li>
  </ul>

  <!-- 事件绑定 -->
  <button (click)="onSelect()">选择</button>

  <!-- 双向绑定 -->
  <input [(ngModel)]="user.name" />
</div>

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { UserCardComponent } from './user-card.component';
import { UserService } from './user.service';

@NgModule({
  declarations: [          // 声明组件、指令、管道
    AppComponent,
    UserCardComponent
  ],
  imports: [               // 导入其他模块
    BrowserModule,
    FormsModule
  ],
  providers: [             // 提供服务（依赖注入）
    UserService
  ],
  bootstrap: [AppComponent]  // 启动组件
})
export class AppModule { }

// Angular 14+ 独立组件
@Component({
  selector: 'app-user-card',
  standalone: true,
  imports: [CommonModule, FormsModule],  // 直接在组件中导入所需模块
  template: '...'
})
export class UserCardComponent { }

// 1. 定义服务
@Injectable({ providedIn: 'root' })  // 全局单例
export class UserService {
  private users: User[] = [];

  getUsers(): Observable<User[]> {
    return of(this.users);
  }

  addUser(user: User): void {
    this.users.push(user);
  }
}

// 2. 在组件中通过构造函数注入
@Component({
  selector: 'app-user-list',
  template: `
    <div *ngFor="let user of users">
      {{ user.name }}
    </div>
  `
})
export class UserListComponent implements OnInit {
  users: User[] = [];

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.userService.getUsers().subscribe(users => {
      this.users = users;
    });
  }
}

// 3. Angular 14+ 使用inject函数注入
export class UserListComponent {
  private userService = inject(UserService);
  users = this.userService.getUsers();
}

// 不推荐：在组件中直接调用HTTP
export class BadComponent {
  fetchUsers() {
    fetch('/api/users').then(res => res.json()).then(data => this.users = data);
  }
}

// 推荐：通过Service和HttpClient
@Injectable({ providedIn: 'root' })
export class UserService {
  constructor(private http: HttpClient) {}
  getUsers(): Observable<User[]> {
    return this.http.get<User[]>('/api/users');
  }
}

export class GoodComponent {
  users$ = this.userService.getUsers();
  constructor(private userService: UserService) {}
}

// 不推荐：复杂的模板逻辑
// <div *ngIf="users.filter(u => u.active).length > 0">

// 推荐：在组件中处理逻辑
activeUsersCount = computed(() => this.users().filter(u => u.active).length);
// <div *ngIf="activeUsersCount() > 0">