Angular 学习之路 02 – 项目结构

现在我们已经安装好 Angular CLI，下面来创建一个示例工程，了解 Angular CLI 的基本使用。

Angular CLI 可以帮我们生成很多模板。生成项目的命令是：

ng new demo

与前面遇到的命令一样，开头的 ng 说明这是一个 Angular CLI 命令；之后的 new 说明是要新建项目；项目名就是最后的 demo。

按下回车之后，Angular CLI 会询问我们几个问题：

N

最后按下回车之后，Angular CLI 会帮我们生成完整的项目框架——包括项目的源代码文件模板、最佳实践推荐的项目结构以及各种配置文件等。之后，Angular CLI 会自动运行 yarn install ，安装项目所需要的各种依赖。这个安装过程会比较漫长，需要耐心等待一段时间。当提示出现“Successfully initialized git.”时，表示项目已经创建完成。如果有错误，需要检查安装过程或者网络连接等。

项目创建成功，会在当前目录生成一个项目文件夹。这里即是 demo 目录。我们可以进入项目目录，查看 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": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/cli": "~7.3.8",
    "@angular/compiler-cli": "~7.2.0",
    "@angular/language-service": "~7.2.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2"
  }
}

有关 package.json 的详细介绍已经超出了本文的内容。这里仅简单介绍一下。package.json 是一种带有固定格式的 JSON 文件。其中， name 和 version 分别是项目的名字和版本号，这里即项目名为 demo，版本为 0.0.0。 scripts 是自定义的命令，这里的命令可以使用 npm run 来执行。例如第一个 ng ，就可以使用 npm run ng 执行。有关 scripts 部分的相关介绍，可以参考 这篇文章 。之后的 private 表示该项目是一个私有项目，不允许被推送到 NPM 中心。 dependencies 部分是该项目的依赖； devDependencies 部分是该项目的开发依赖。可以这样理解：前者是项目运行时所需要的包，后者是开发时所需要的包（例如测试时使用的包等）。有关二者的详细区别，可以参考网上很多解释文章。

dependencies 和 devDependencies 无疑是 package.json 的重中之重。二者代表了一个项目的所有依赖。它们以键值对的形式，给出了依赖的名字和版本号。依赖的名字很好理解，但版本号就不那么直观。因为这些版本号的前面还有一些奇怪的字符。

要理解这些字符所代表的含义，首先需要知道语义化版本号这一概念。

语义化版本号，即 SemVer，格式固定为 X.Y.Z。X、Y、Z 都是非负整数，禁止在数字前补零，每个数值都是递增的。X、Y、Z 分别规定如下：

• X：主版本号，当我们做了不兼容或者颠覆性的更新，修改此版本号；
• Y：次版本号，当我们做了向下兼容的功能性修改，修改此版本号；
• Z：修订版本号，当我们做了向下兼容的问题修正，修改此版本号。

语义化版本号要求开发者在发布内容时，严格按照上述规定执行。这么做的好处是，依赖库的版本可以比较容易的确定是否兼容。例如，如果 X 有了变化，代表依赖库可能是不兼容的，需要修改我们自己的代码；如果 Y 有了变化，代表依赖库有了新功能，但我们的代码一般不需要修改；如果 Z 有了变化，代表依赖库只是修改了 bug，不影响我们的代码。

既然依赖库的版本可以比较容易的确定是否兼容，那么，语义化版本号可以使用一个范围来确定所依赖的版本。一个范围可以由一个或多个比较器组成；一个比较器则由版本号和比较符构成；多个比较器可以用 || 连接，表示或的关系。语义化版本号定义了 5 个最原始的比较符：

• <，小于
• <=，小于等于
• >，大于
• >=，大于等于
• =，等于，当不指定上面四种比较符时，即应用此比较符

例如，>= 1.2.1 < 1.3.0 可以接受 1.2.1、1.2.2、1.2.9、1.2.999 等，但不接受 1.3.0、1.4.0、2.0.0 等；1.2.1 || >= 1.3.0 < 3.0.0 可以接受 1.2.1、1.3.0、1.4.99、2.0.0、2.9.99 等，但不接受 1.2.2、3.0.0、4.0.0 等。

除去这些最基本的比较符，还有一些高级比较符，比如这里的 ~ 以及 ^ 。

~ 代表的是，如果指定了次版本号，则允许改变修订版本号；如果没有指定次版本号，则只能修改次版本号。例如，~1.2.1 等价于 >= 1.2.1 < 1.3.0；~1.2 等价于 ~1.2.0，即 >= 1.2.0 < 1.3.0；~1 等价于 ~1.0.0，即 >= 1.0.0 < 2.0.0。

^ 代表的是，不允许修改最左非零数字。例如，^1.2.1 等价于 >= 1.2.1 < 2.0.0；~0.2.1 等价于 >= 0.2.1 < 0.3.0。

因此，package.json 中的 "@angular/animations": "~7.2.0" 含义就是，对于依赖 @angular/animations，版本号范围是 >= 7.2.0 < 7.3.0。

有关语义化版本号的更详细内容，可以参考其 官方文档 。如果要了解更多关于 NPM 版本号的范围指定，可以阅读 这篇文章 。

package.json 是每个 node.js 项目都有的，而 angular.json 则是 Angular 项目特有的，定义了 Angular 项目的配置信息。我们可以使用文本编辑器打开这个文件，看看里面有哪些内容。这个文件一般不需要修改，但是在某些情形下还是需要的。

与 package.json 类似，angular.json 是一个普通的 JSON 文件。其中， $schema 是 JSON 的 schema 文件地址。这个 schema 与 XML schema 意义是一样的，定义了 JSON 文件的格式。 version 即文件版本。 newProjectRoot 是使用 ng generate 命令时生成项目的根目录。我们会在以后介绍这个命令。 projects 即有关各个项目的配置。可见，Angular 的项目文件夹中是可以包含多个子项目的。最后的 defaultProject 即为默认项目。

其余的几个配置文件，tsconfig.json 是 TypeScript 的编译配置文件，用于 TypeScript 的编译；tslint.json 是 TSLint 的配置文件，用于规范 ts 文件的代码格式；.editorconfig 是跨编辑器的设置文件。

src 目录是最重要的目录，包含了我们的项目的所有源代码文件。其中，app 目录为 TypeScript 源代码文件；assets 目录为各个资源文件，如图片、JSON 等；environments 目录为环境配置文件。index.html 为项目页面文件；main.ts 为项目入口文件；styles.css 为全局样式表文件。这三个是最重要的文件，其余文件比如 karma.conf.js 是 Karma 测试框架配置文件等。

app 目录默认会有五个文件，其中，app.module.ts 是 Angular 的模块 AppModule；以 app.component 开头的四个文件组成一个 Angular 组件 AppComponent。简单来说，AppComponent 属于 AppModule。我们会在后面的章节详细介绍模块和组件。

现在我们简单介绍了 Angular CLI 生成的所有项目文件，详细讲解了 package.json 的版本语法规定。后面我们将开始详细介绍 Angular 的相关内容。这里建议，先不要关注 Angualr CLI 生成的这些文件的具体语法，只需知道其作用，等到后面开发时使用到的时候再去详细了解。