Angular 毕设项目架构入门

背景

Angular 是 Google 维护的企业级前端框架。很多同学第一次接触 Angular 时会被它的"全家桶"吓到——模块、服务、依赖注入、装饰器、RxJS……概念太多。但实际上毕设项目用到的只是冰山一角，掌握核心模式即可高效开发。

---

核心概念

1. Angular 的三驾马车

概念	作用	类比
Component（组件）	页面 UI 单元	Vue 的 .vue 文件
Service（服务）	业务逻辑、数据获取	Vue 的 composable
Module（模块）	组织组件和服务	项目分区

2. 装饰器（Decorator）

Angular 大量使用 TypeScript 装饰器标记类：

@Component({ selector: 'app-student', templateUrl: './student.component.html' })
export class StudentComponent { }

@Injectable({ providedIn: 'root' })
export class ApiService { }

3. 依赖注入（DI）

这是 Angular 最核心的设计模式。不需要手动 new 对象，Angular 自动注入：

// 不需要：const api = new ApiService();
// 只需在构造函数声明：
constructor(private apiService: ApiService) { }

---

分步操作

第一步：创建项目

ng new biye-project --routing --style scss
cd biye-project
ng serve --open

第二步：规划模块结构

毕设推荐按功能划分模块：

src/app/
├── pages/
│   ├── home/          # ng g m pages/home --routing
│   ├── student/       # ng g m pages/student --routing
│   └── dashboard/     # ng g m pages/dashboard --routing
├── shared/            # 共享组件
│   └── components/    # ng g c shared/components/header
├── services/          # ng g s services/api
└── models/            # 接口/类型定义

第三步：路由配置

// app-routing.module.ts
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'students', loadChildren: () => import('./pages/student/student.module').then(m => m.StudentModule) },
  { path: '**', redirectTo: '' },
];

第四步：HTTP 服务

// services/api.service.ts
@Injectable({ providedIn: 'root' })
export class ApiService {
  constructor(private http: HttpClient) { }

  getStudents(): Observable<Student[]> {
    return this.http.get<Student[]>('/api/students');
  }

  addStudent(data: Student): Observable<Student> {
    return this.http.post<Student>('/api/students', data);
  }
}

第五步：组件中使用

export class StudentListComponent implements OnInit {
  students$ = this.api.getStudents();  // 直接订阅 Observable

  constructor(private api: ApiService) { }
}

<!-- 用 async 管道自动订阅 -->
<div *ngFor="let s of students$ | async">{{ s.name }}</div>

---

毕设常见场景

管理后台

• Angular Material + 表格排序分页
• Reactive Forms 表单验证

数据大盘

• ECharts + Angular 封装
• WebSocket 实时更新

前端独立部署

• ng build --prod 输出 dist/
• 部署到 Nginx / Vercel

---

思考题

1. Angular 的依赖注入与手动 new 相比有什么优势？
2. async 管道与手动 .subscribe() 的区别？为什么推荐 async 管道？
3. 懒加载模块（loadChildren）对毕设项目有什么实际好处？

---

小结

Angular 虽然学习曲线较陡，但掌握 Component + Service + Routing 三板斧就可以完成大多数毕设需求。它的强约束反而让团队协作更规范，代码结构更统一。