angular从入门到精通（三） — 项目文件结构 - 追梦猪提供高效的web前端解决方案

三、项目文件结构

安装完成我们会看到下面的文件结构：

angular从入门到精通（三） — 项目文件结构

每个工作空间中的所有项目共享同一个 CLI 配置环境。该工作空间的顶层包含着全工作空间级的配置文件、根应用的配置文件以及一些包含根应用的源文件和测试文件的子文件夹。

文件作用

工作空间配置文件	用途
.editorconfig	代码编辑器的配置。参见 EditorConfig 。
.gitignore	指定 Git 应忽略的不必追踪的文件。
README.md	根应用的简介文档.
angular.json	为工作区中的所有项目指定 CLI 的默认配置，包括 CLI 要用到的构建、启动开发服务器和测试工具的配置项，比如 TSLint，Karma 和 Protractor。欲知详情，请参阅 Angular 工作空间配置部分。
package.json	配置工作空间中所有项目可用的 npm包依赖。有关此文件的具体格式和内容，请参阅 npm 的文档。
package-lock.json	提供 npm 客户端安装到 node_modules 的所有软件包的版本信息。欲知详情，请参阅 npm 的文档。如果你使用的是 yarn 客户端，那么该文件就是 yarn.lock 。
src/	根项目的源文件。
node_modules/README.md	根应用的介绍性文档。
tsconfig.json	工作空间中各个项目的默认 TypeScript 配置。
tslint.json	工作空间中各个项目的默认 TSLint 配置。
tslint.json	工作空间中各个项目的默认 TSLint 配置。

应用源文件

顶级文件 src/ 为测试并运行你的应用提供支持。其子文件夹中包含应用源代码和应用的专属配置。

应用支持文件	目的
app/	包含定义应用逻辑和数据的组件文件。详见下文。
assets/	包含要在构建应用时应该按原样复制的图像和其它静态资源文件。
environments/	包含特定目标环境的构建配置选项。默认情况下，有一个无名的标准开发环境和一个生产（“prod”）环境。你还可以定义其它的目标环境配置。
favicon.ico	用作该应用在标签栏中的图标。
index.html	当有人访问你的站点时，提供服务的主要 HTML 页面。CLI 会在构建你的应用时自动添加所有的 JavaScript 和 CSS 文件，所以你通常不用手动添加任何 `<script>` 或 `<link>` 标签。
main.ts	应用的主要切入点。用 JIT 编译器编译应用，然后引导应用的根模块（AppModule）在浏览器中运行。你也可以在不改变任何代码的情况下改用 AOT 编译器，只要在 CLI 的 build 和 serve 命令中加上 —aot 标志就可以了。
polyfills.ts	为浏览器支持提供了腻子（polyfill）脚本。
styles.sass	列出为项目提供样式的 CSS 文件。该扩展还反映了你为该项目配置的样式预处理器。
test.ts	单元测试的主入口点，带有一些Angular特有的配置。你通常不需要编辑这个文件。

在 src/ 文件夹里面， app/ 文件夹中包含此项目的逻辑和数据。 Angular 组件、模板和样式也都在这里。

SRC/APP/ 文件	用途
app/app.component.ts	为应用的根组件定义逻辑，名为 AppComponent 。当你向应用中添加组件和服务时，与这个根组件相关联的视图就会成为视图树的根。
app/app.component.html	定义与根组件 AppComponent 关联的 HTML 模板。
app/app.component.css	为根组件 AppComponent 定义了基本的 CSS 样式表。
app/app.component.spec.ts	为根组件 AppComponent 定义了一个单元测试。
app/app.module.ts	定义了名为 AppModule 的根模块，它会告诉 Angular 如何组装应用。这里最初只声明一个 AppComponent。当你向应用中添加更多组件时，它们也必须在这里声明。

应用配置文件

根应用的配置文件位于工作空间的根目录下。对于多项目工作空间，项目专属的配置文件位于项目根目录 projects/project-name/。

项目专属的 TypeScript 配置文件继承自工作区范围内的 tsconfig.json ，而项目专属的 TSLint 配置文件则继承自全工作区级内的 tslint.json 。

应用专属的配置文件	用途
browserslist	配置各种前端工具之间共享的目标浏览器和 Node.js 版本。欲知详情，请参阅 GitHub 上的浏览器列表。
karma.conf.js	应用专属的 Karma 配置。
tsconfig.app.json	应用专属的 TypeScript 配置，包括 TypeScript 和 Angular 模板编译器的选项。参见 TypeScript 配置。
tsconfig.spec.json	应用测试的 TypeScript 配置。参见 TypeScript 配置。
tslint.json	应用专属的 TSLint 配置。

端到端测试文件

根级的 e2e/ 文件夹中包含一组针对根应用的端到端测试的源文件，以及测试专属的配置文件。

对于多项目的工作空间，应用专属的端到端测试文件都位于项目各自的根目录下，即 projects/project-name/e2e/。

e2e/
src/          (end-to-end tests for my-app)
   app.e2e-spec.ts
   app.po.ts
protractor.conf.js  (test-tool config)
tsconfig.json    （TypeScript config inherits from workspace)

多重项目

多项目工作空间适用于对所有 Angular 项目使用单一存储库（单仓库模型）和全局配置的企业。多项目工作空间也能为库开发提供支持。

建立多项目工作空间

如果你打算在工作区中包含多个项目，可以在创建工作空间时不要自动创建初始应用，并为工作空间指定一个唯一的名字。下列命令用于创建一个包含全工作空间级配置文件的工作空间，但没有根应用。

ng new my-app —createApplication="false"

然后，你可以使用工作空间内唯一的名字来生成应用和库。

cd my-app
ng generate application my-first-app

多重项目的文件结构

工作空间中第一个显式生成的应用会像工作空间中的其它项目一样放在 projects/ 文件夹中。新生成的库也会添加到 projects/ 下。当你以这种方式创建项目时，工作空间的文件结构与工作空间配置文件 angular.json 中的结构完全一致。

my-app/
  …             (workspace-wide config files)
  projects/       (generated applications and libraries)
    my-first-app/ —(an explicitly generated application)
      …         —(application-specific config)
      e2e/        ——(corresponding e2e tests)
       src/     ——(e2e tests source)
        …      ——(e2e-specific config)
      src/        —(source and support files for application)
    my-lib/       —(a generated library)
      …         —(library-specific config)
     src/        —source and support files for library)

库项目文件

当你使用 CLI 命令（例如 ng generate library my-lib）生成一个库时，所生成的文件会放在工作区的 projects/ 文件夹中。关于如何创建自己的库的更多信息，请参阅创建库一章。
与应用及其相关的 e2e 项目不同，库有它自己的 package.json 配置文件。
在 projects/ 目录下，my-lib 文件夹中包含你的库代码。

库的源文件	用途
src/lib	包含库项目的逻辑和数据。像应用项目一样，库项目也可以包含组件、服务、模块、指令和管道。
src/test.ts	单元测试的主要入口点是一些库专属的配置。你通常不用编辑这个文件。
src/public-api.ts	指定从库中导出的所有文件。
karma.conf.js	库专属的 Karma 配置。
ng-package.json	构建库时，ng-packagr 用到的配置文件。
package.json	配置这个库所需的 npm 包依赖。
tsconfig.lib.json	库专属的 TypeScript 配置，包括 TypeScript 和 Angular 模板编译器选项。参见 TypeScript 配置。
tsconfig.spec.json	测试库时用到的 TypeScript 配置。参见 TypeScript 配置。
tslint.json	库专属的 TSLint 配置。

更多配置详见官网https://angular.cn/guide/npm-packages