Angular教程 - 企业级前端框架

Angular是由Google维护的一款完整的前端开发框架。它基于TypeScript，内置了路由、表单、HTTP、依赖注入等完整功能，适合构建大型企业级应用。本教程将从核心概念到实战开发，助你全面掌握Angular。

一、Angular简介

Angular（Angular 2+）于2016年发布，是AngularJS的重写版本。与Vue和React不同，Angular是一个"大而全"的框架，提供了开发大型应用所需的所有工具。它使用TypeScript作为首选语言，强类型和面向对象特性让代码更健壮。

二、你将学到什么

• 核心概念：模块NgModule、组件Component、模板
• 数据绑定：插值、属性绑定、事件绑定、双向绑定
• 指令：结构指令(*ngIf/*ngFor)、属性指令
• 服务与DI：Service服务、依赖注入、Provider
• 路由：路由配置、路由参数、路由守卫、懒加载
• 表单：模板驱动表单、响应式表单、表单验证

三、代码示例

Angular组件与服务示例：

// user.component.ts - 组件
import { Component, OnInit } from "@angular/core";
import { UserService } from "./user.service";
import { User } from "./user.model";

@Component({
  selector: "app-user-list",
  template: `
    <h2>用户列表</h2>
    <input [(ngModel)]="searchText" placeholder="搜索用户" />
    <ul>
      <li *ngFor="let user of filteredUsers"
          (click)="selectUser(user)"
          [class.selected]="user === selectedUser">
        {{ user.name }} ({{ user.email }})
      </li>
    </ul>
    <div *ngIf="selectedUser">
      <h3>{{ selectedUser.name }}</h3>
      <p>邮箱: {{ selectedUser.email }}</p>
    </div>
  `,
  styles: [".selected { background: #e0f7fa; }"]
})
export class UserListComponent implements OnInit {
  users: User[] = [];
  selectedUser: User | null = null;
  searchText = "";

  constructor(private userService: UserService) {}

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

  get filteredUsers(): User[] {
    return this.users.filter(u =>
      u.name.toLowerCase().includes(this.searchText.toLowerCase())
    );
  }

  selectUser(user: User) {
    this.selectedUser = user;
  }
}

// user.service.ts - 服务（依赖注入）
import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";
import { User } from "./user.model";

@Injectable({
  providedIn: "root"
})
export class UserService {
  private apiUrl = "/api/users";

  constructor(private http: HttpClient) {}

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>(this.apiUrl);
  }
}

四、适合人群

• 有TypeScript基础的开发者
• 想要从事企业级前端开发的工程师
• 需要构建大型、复杂前端应用的团队
• 有Java/C#后端背景，转前端开发者（Angular的DI理念类似Spring）

五、学习建议

Angular学习曲线较陡，建议先掌握TypeScript再学Angular。重点理解模块、组件、依赖注入和服务的概念。RxJS是Angular处理异步的核心，需要专门学习。Angular CLI是开发利器，熟悉各种命令能提升效率。官方文档和Angular University是很好的学习资源。

课程信息：
共 5 个章节