Angular 应用项目启动与配置教程

1. 项目的目录结构及介绍

在克隆完项目后，你将看到以下目录结构：

angular-app/
├── e2e/                    # 端到端测试文件
├── node_modules/           # 项目依赖的Node.js模块
├── src/                    # 源代码目录
│   ├── app/                # 应用程序代码
│   │   ├── components/     # 组件目录
│   │   ├── models/         # 数据模型目录
│   │   ├── services/       # 服务目录
│   │   ├── shared/         # 共享资源目录
│   │   ├── environments/   # 环境配置目录
│   │   └── app.module.ts   # 应用程序根模块
│   ├── assets/             # 静态资源目录
│   ├── i18n/               # 国际化资源目录
│   ├── index.html          # 应用程序的入口HTML文件
│   └── main.ts             # 应用程序的入口 TypeScript 文件
├── .editorconfig           # 编辑器配置文件
├── .gitignore              # Git忽略文件
├── .angular-cli.json       # Angular CLI配置文件
├── .package.json           # 项目依赖和元数据
├── karma.conf.js           # Karma测试配置文件
├── package-lock.json       # 项目依赖锁定文件
├── package.json            # 项目依赖和元数据
└── tsconfig.json           # TypeScript编译配置文件

• e2e/：存放端到端测试相关的代码。
• node_modules/：存放所有已安装的Node.js依赖包。
• src/：存放所有的源代码。
  • app/：包含应用的核心代码。
  • assets/：包含应用的静态资源，如图像、样式表等。
  • i18n/：包含应用的国际化资源。
  • index.html：应用的入口HTML文件。
  • main.ts：应用的入口TypeScript文件。
• .editorconfig：定义编辑器的配置，以保持代码风格的一致性。
• .gitignore：定义Git应该忽略的文件和目录。
• .angular-cli.json：Angular CLI的配置文件。
• karma.conf.js：Karma测试配置文件。
• package.json：包含项目的依赖和元数据。
• package-lock.json：锁定项目依赖的版本，确保构建的可重复性。
• tsconfig.json：TypeScript编译配置文件。

2. 项目的启动文件介绍

项目的启动文件是src/main.ts，这是Angular应用的入口点。以下是main.ts文件的基本内容：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

该文件首先导入了必要的Angular核心库和模块，然后检查应用是否处于生产环境，如果是，则启用生产模式。最后，它使用platformBrowserDynamic来启动AppModule。

3. 项目的配置文件介绍

项目的配置文件是.angular-cli.json，这个文件用于配置Angular CLI的构建和开发服务器选项。以下是.angular-cli.json文件的基本内容：

{
  "version": 1,
  "project": {
    "name": "angular-app"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  }
}

这个文件定义了项目的根目录、输出目录、源文件、环境配置文件以及其他构建和开发服务器选项。例如，styles字段指定了项目的全局样式文件，而environmentSource和environments字段指定了不同环境下的配置文件路径。