Skip to main content

Angular 初始化指南

本指南将帮助你了解如何快速启动一个 Angular 项目，包含环境配置、项目结构介绍及常见实践，适合初学者或需要标准化开发流程的开发者。

🛠️ 环境准备​

Angular 需要 Node.js 环境支持，并通过 Angular CLI 工具进行项目创建。

1. 安装 Node.js​

从 Node.js 官网 下载并安装 LTS 版本。

node -v
npm -v
info

建议安装 Node.js 18 以上版本，以获得更好的兼容性。

2. 安装 Angular CLI​

npm install -g @angular/cli

安装完成后可以通过以下命令确认版本：

ng version

🚀 创建 Angular 项目​

ng new my-angular-app
cd my-angular-app
ng serve
tip

ng serve 会启动本地开发服务器，默认地址为 http://localhost:4200。

📁 项目结构说明​

my-angular-app/
├── src/
│   ├── app/                  # 应用模块和组件
│   │   ├── app.module.ts     # 根模块
│   │   └── app.component.ts  # 根组件逻辑
│   ├── assets/               # 静态资源
│   ├── environments/         # 环境配置
│   └── index.html            # 应用入口 HTML
├── angular.json              # Angular 项目配置
├── package.json              # 项目依赖
└── tsconfig.json             # TypeScript 配置
点击展开：关键文件说明
  • app.module.ts：定义模块和依赖项，是应用的启动入口。
  • app.component.ts：主组件，控制页面布局和逻辑。
  • angular.json：Angular 项目的核心配置文件。
  • tsconfig.json：TypeScript 编译选项。

✍️ 组件示例代码​

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.css']
})
export class HelloComponent {
  name = 'Angular';

  greet(): string {
    return 'Hello ' + this.name;
  }
}

📦 常用命令速查表​

ng serve              # 启动本地开发服务器
ng generate component my-comp  # 创建新组件
ng build              # 构建生产环境代码
ng test               # 单元测试
ng lint               # 代码规范检查
caution

使用 ng build 构建生产代码时默认会启用 AOT 编译和优化，请确保没有未引用组件或模块。

📐 项目开发规范建议​

  • ✅ 所有组件放在 app/ 子文件夹内按功能分组
  • ✅ 文件命名使用 kebab-case（如 user-profile.component.ts）
  • ✅ 使用模块划分（如 feature.module.ts）
  • ✅ 使用 interface 定义数据结构，增强可读性和类型检查
  • ✅ 使用 rxjs 和服务（Service）解耦组件逻辑
点击展开示例接口定义
export interface User {
  id: number;
  name: string;
  email: string;
}

✅ 总结​

你已掌握 Angular 项目的基本流程：

  • 安装 Node 和 Angular CLI
  • 创建并运行 Angular 项目
  • 理解项目结构与核心文件
  • 编写组件并使用模块划分
  • 遵循最佳开发规范进行扩展

📚 推荐阅读​