Angular 开发学习 03 – Angular 项目结构

上一章我们使用 Angular CLI 成功创建并运行了一个最简单的 Angular 示例程序。现在,我们仔细了解下 CLI 为我们生产的项目结构。 我们从最外层的文件开始看起。 首先是 .angular-cli.json。这是 Angular CLI 的配置文件。在这里,我们可以分别设置项目中的多个 App。Angular CLI 将可以运行的应用称为一个 A...

上一章我们使用 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 为我们生成的整个项目结构,下一步即将进入开始正式的学习阶段。