自学教程你会以 Angular 工作区作为上下文来开发应用。工作区包含一个或多个项目的文件集。一个项目就是一组包含独立应用或可共享库的文件。
Angular CLI 的 ng new 命令可以创建一个工作区。
ng new angular-runoops-test当你运行这个命令时，CLI 会在一个新的工作区中安装必需的 Angular npm 包和其它依赖项，其根应用名叫 angular-runoops-test。 该工作区的根文件夹中包含一些工作区配置文件，和一个带有自动生成的描述性文本的自述文件，你可以自定义它。
工作区配置文件说明
每个工作区中的所有项目共享同一个 CLI 配置环境。该工作区的顶层包含着全工作区级的配置文件、根应用的配置文件以及一些包含根应用的源文件和测试文件的子文件夹。
| 工作区配置文件 | 用途 |
|---|---|
.editorconfig | 代码编辑器的配置。 |
.gitignore | 指定 Git 应忽略的不必追踪的文件。 |
README.md | 根应用的简介文档。 |
angular.json | 为工作区中的所有项目指定 CLI 的默认配置，包括 CLI 要用到的构建、启动开发服务器和测试工具的配置项，比如 Karma 和 Protractor。 |
package.json | 配置工作区中所有项目可用的 npm 包依赖。 |
package-lock.json | 提供 npm 客户端安装到 node_modules 的所有软件包的版本信息。 |
src/ | 根项目的源文件。 |
node_modules/ | 为整个工作区提供 npm 包。这些工作区级的 node_modules 依赖对其中的所有项目可见。 |
tsconfig.json | 工作区中所有项目的基本 TypeScript 配置。所有其它配置文件都继承自这个基本配置. |
应用项目文件
CLI 命令 ng new angular-runoops-test 会默认创建名为 “angular-runoops-test” 的工作区文件夹，并在 src/ 文件夹下为工作区顶层的根应用生成一个新的应用骨架。新生成的应用包含一个根模块的源文件，包括一个根组件及其模板。
除了在命令行中使用 CLI 之外，你还可以直接在应用的源文件夹和配置文件中操作这些文件。
对于单应用的工作区，工作区的 src/ 子文件夹包含根应用的源文件（应用逻辑、数据和静态资源）。对于多项目的工作区，projects/ 文件夹中的其它项目各自包含一个具有相同结构的 project-name/src/ 子目录。
应用源文件
顶层文件 src/ 为测试并运行你的应用提供支持。其子文件夹中包含应用源代码和应用的专属配置。
| 应用支持文件 | 用途 |
|---|---|
app/ | 包含定义应用逻辑和数据的组件文件。详见下文。 |
assets/ | 包含要在构建应用时应该按原样复制的图像和其它静态资源文件。 |
favicon.ico | 用作该应用在标签栏中的图标。 |
index.html | 当有人访问你的站点时，提供服务的主要 HTML 页面。CLI 会在构建你的应用时自动添加所有的 JavaScript 和 CSS 文件，所以你通常不用手动添加任何 <script> 或 <link> 标签。 |
main.ts | 应用的主要入口点。用 JIT 编译器编译应用，然后引导应用的根模块（AppModule）在浏览器中运行。你也可以在不改变任何代码的情况下改用 AOT 编译器，只要在 CLI 的 build 和 serve 命令中加上 --aot 标志就可以了。 |
styles.sass | 列出为项目提供样式的 CSS 文件。该扩展还反映了你为该项目配置的样式预处理器。 |
新的 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/。
tsconfig.json：
| 应用专属的配置文件 | 用途 |
|---|---|
tsconfig.app.json | 应用专属的 TypeScript 配置，包括 TypeScript 和 Angular 模板编译器的选项 |
tsconfig.spec.json | 应用测试的 TypeScript 配置 |
多重项目
多项目工作区适用于对所有 Angular 项目使用单一存储库（单仓库模型）和全局配置的企业。多项目工作区也能为库开发提供支持。
建立多项目工作区
如果你打算在工作区中包含多个项目，可以在创建工作区时不要自动创建初始应用，并为工作区指定一个唯一的名字。下列命令用于创建一个包含全工作区级配置文件的工作区，但没有根应用。
ng new my-workspace --no-create-application然后，你可以使用工作区内唯一的名字来生成应用和库。
cd my-workspace
ng generate application my-first-app多重项目的文件结构
工作区中第一个显式生成的应用会像工作区中的其它项目一样放在 projects 文件夹中。新生成的库也会添加到 projects 下。当你以这种方式创建项目时，工作区的文件结构与工作区配置文件 angular.json 中的结构完全一致。
分享笔记