Angular 学习之路 02 – 项目结构

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

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

ng new demo

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

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

  1. Would you like to add Angular routing? – 你想要添加 Angular 路由模块吗?为简单起见,这里我们选择“否”,输入N即可。
  2. Which stylesheet format would you like to use? (Use arrow keys) – 使用方向键选择使用哪一个 CSS 预处理器,可选择的是 CSS、SCSS、Sass、Less 以及 Stylus。现在我们直接按下回车,选择默认的 CSS 即可。

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

 class=

项目创建成功,会在当前目录生成一个项目文件夹。这里即是 demo 目录。我们可以进入项目目录,查看 CLI 为我们生成的项目文件。

 class=

下面我们介绍项目中目前对我们比较重要的几个文件。

首先,所有 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 文件。其中,nameversion分别是项目的名字和版本号,这里即项目名为 demo,版本为 0.0.0。scripts是自定义的命令,这里的命令可以使用npm run来执行。例如第一个ng,就可以使用npm run ng执行。有关scripts部分的相关介绍,可以参考这篇文章。之后的private表示该项目是一个私有项目,不允许被推送到 NPM 中心。dependencies部分是该项目的依赖;devDependencies部分是该项目的开发依赖。可以这样理解:前者是项目运行时所需要的包,后者是开发时所需要的包(例如测试时使用的包等)。有关二者的详细区别,可以参考网上很多解释文章。

dependenciesdevDependencies无疑是 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 为我们生成的项目已经是一个最小化的可运行版本。下面我们可以直接运行这个项目,在项目文件夹中使用下面的命令:

ng serve

当运行出现如下提示时,表示运行成功:

如果运行结果最后不是 Compiled successfully,需要检测是否哪里出了问题。结果里面已经提示我们,使用浏览器打开地址 http://localhost:4200,应该就能访问到 Angular CLI 生成的项目:

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

Leave a Reply