Angular目录结构分析以及app.module.ts详解

场景

Angular介绍、安装Angular Cli、创建Angular项目入门教程：

在上面搭建的Angular项目的目录结构如下

 

 

具体的目录结构的作用如下

实现

大体的目录结构分析

 

 

 

 

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目录下

​​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​​。当你向应用中添加更多组件时，它们也必须在这里声明。

 

工作区配置文件

 

​​.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​​ 配置。

 

app.module.ts

定义了名为 AppModule 的根模块，它会告诉 Angular 如何组装应用。这里最初只声明一个 AppComponent。当你向应用中添加更多组件时，它们也必须在这里声明。

可以看到其位置

 

 

 

这个文件是Angular 根模块，告诉Angular如何组装应用。

下面打开这个文件，详解其结构

 

 

再打开app.component.ts看一下组件的组成