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

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

下面的截图是整个项目的文件结构。

Angular CLI 生成的项目是一个普通的 npm 项目,因此,一定会有一个 package.json 文件。这个文件类似 Maven 的 pom.xml,用于记录项目的依赖关系、自定义命令以及其它一些有关项目的信息。

{
  "name": "demo",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "core-js": "^2.5.4",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.3",
    "@angular-devkit/build-angular": "~0.6.6",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.7",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }
}

有关 package.json 文件的结构已经超出了本文的范畴,这里只简单介绍一下。首先,nameversion等描述的是项目的名字和版本。scripts是一些自定义脚本,可以使用yarn start或者npm run start来执行。private表示该项目是私有的,不能被发布到 NPM registry 上面。dependencies是运行时的项目依赖;devDependencies是开发时的项目依赖。

package.json 是任何 NPM 项目都必须的项目文件,而 angular.json 文件则是 Angular CLI 项目最重要的文件之一。这是 Angular CLI 6 所特有的文件,之前的版本并没有这个文件。angular.json 定义了 Angular 的项目结构,包括子项目、文件生成的设置、全局样式表等。我们会在后面的章节中用到这里的设置。

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

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

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

src 文件夹中是项目的所有文件。我们可以认为,src 外部的文件是整个项目需要的,而 src 内部文件是我们的项目的源代码等。在这里有三个子文件夹:app 是项目源代码文件;assets 是项目资源文件,例如图片、样式等;environments 是环境文件,可以存放环境相关的变量,例如开发环境中使用的变量以及生产环境中使用的变量。我们可以将应用的通用设置,比如远程地址,记录在这里。在以后的开发中,直接使用这个地址即可。

browserslist 供 autoprefixer 生成 CSS 前缀。

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

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

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

"styles": [
    "src/styles.css"
]

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

tsconfig.app.json 和 tsconfig.spec.json 分别用于应用和测试的 TypeScript 的参数设置。src 目录下的 tslint.json 则是本项目的 tslint 设置文件。注意,这几个配置文件都有extends语句,说明这些文件其实是继承了根目录下对应的文件,覆盖了其中的参数。

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));

我们可以阅读下 main.ts。注意这里直接使用了 environments 文件夹下的环境配置文件。当environment.production时,使用生产模式(enableProdMode())。最后,通过platformBrowserDynamic()启动了AppModule。这样,我们的 Angular 应用就运行起来了。

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

Leave a Reply