[聚合文章] Angular 开发学习 03 – Angular 项目结构

上一章我们使用 Angular CLI 成功创建并运行了一个最简单的 Angular 示例程序。现在，我们仔细了解下 CLI 为我们生产的项目结构。

我们从最外层的文件开始看起。

首先是 .angular-cli.json。这是 Angular CLI 的配置文件。在这里，我们可以分别设置项目中的多个 App。Angular CLI 将可以运行的应用称为一个 App。由于 Angular 适用于单页应用，所以，我们可以将每一个 HTML 页面看成一个 App。一个 Angular CLI 项目可以同时编译生成多个 App。这是在 .angular-cli.json 中的 apps 进行配置。在学习初期，我们每个项目只有一个 App，在未来的实际开发中，可能会在一个项目中生成多个 App，例如，我们可能将管理端和用户前端分作两个 App，那么就可以在这里进行设置。.angular-cli.json 实际可以为 CLI 的使用设置很多不同参数，例如设置页面全局的 CSS、Script；设置每个 App 的前缀等。

.editorconfig 是编辑器设置文件。editorconfig 是一个统一代码风格工具。在实际开发过程中，不同开发者往往使用不同的编辑器，不同的编辑器对代码风格往往是不一致的，比如有的使用 4 个空格的缩进，有的习惯 2 个空格。editorconfig 就是为了统一这种差异。它是一个风格设置文件。任何支持 editorconfig 设置的编辑器都可以读取这里的配置，然后应用到自己的编辑器设置中去。

karma.conf.js 是 Karma 的配置文件。Karma 是 JS 的单元测试运行器，用来管理和调度测试任务。Karma 管理的是单元测试，认为整个系统是白盒，可以用来测试服务、控制器、函数实现等。

protractor.conf.js 是 Protractor 的配置文件。Protractor 是 Google 专门为 Angular 设计的端到端（End-to-End）测试框架。端到端测试是从用户的角度出发，认为整个系统是个黑盒，只会有 UI 暴露给用户，主要是模仿人工操作进行测试。Karma 会调度 Protractor 进行自动化测试。项目中的 e2e 文件夹中就是使用 Protractor 编写的测试脚本文件。

tsconfig.json 是 TypeScript 的编译配置文件。由于 Angular 默认使用 TypeScript 进行开发，这个文件实际就是 TypeScript 编译器的设置参数。

tsling.json 是一个 TypeScript 的验证工具，可以用来发现 TypeScript 源代码的问题。这里的“问题”并不是诸如语法错误等，而是某些“能做但不合理”的约定。例如，TypeScript 每行末尾可以省略分号，但我们可以设置 tslint 不允许在每行末尾省略分号。这样在检查时，如果违反这一条，所以严格来说并没有错误，但 tslint 依然会认为这是一个“不恰当”的写法。

我们项目所有源代码，应该放在 src 目录下。

main.ts 是我们项目的入口文件。当我们启动一个项目时，就是从这里开始加载的。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.log(err));

polyfills.ts 是用来兼容老的浏览器的工具。Polyfilling 最初是由 RemySharp 提出的一个术语，用来描述复制缺少的 API 和 API 功能的行为。Web 开发最头痛的一点就是浏览器兼容性。有时，明明新版本的开发库有了更简便的开发方法，但为了兼容老旧浏览器，你不得不使用“更兼容的”写法。Polyfills 就是将这些新的技术移植到老的浏览器的一种方法。你可以使用它编写单独应用的代码，同时不必担心浏览器原生是不是支持。当然，并不是所有新的技术都能兼容到老的浏览器，这还是有一个取舍的问题。

style.css 是全局的 CSS 文件。还记得刚刚我们说，.angular-cli.json 文件可以设置全局 CSS。事实上，它就是把这个 style.css 添加到页面中。你可以在 .angular-cli.json 中看到这么一段。

test.ts 供 Karma 使用，以便获取文件夹中每一个 spec 文件。当我们使用 Angular CLI 时，默认会为每一个工具自动生成单元测试脚本文件，即 .spec.ts 文件。test.ts 文件就是为了 Karma 能够自动加载这些 spec 文件。

environments 文件夹保存全局设置文件。默认会有两个 environment.ts 文件，一个用于开发环境，一个用于生产环境。同样，我们可以在 .angular-cli.json 找到设置的地方。我们可以将应用的通用设置，比如远程地址，记录在这里。在以后的开发中，就不必每次都要重写这个地址。

assets 文件夹中保存项目要用到的所有静态资源文件，比如图片、字体等。

app 文件夹中保存项目所有源代码文件。以后，Angular CLI 为我们生成的所有文件都会在这个文件夹中。

当我们了解了 Angular CLI 为我们生成的整个项目结构，下一步即将进入开始正式的学习阶段。