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

待我称王封你为后i 2023-10-07 13:28 11阅读 0赞

## 场景 ##

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

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/105570017][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_105570017]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

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

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi][https_blog.csdn.net_badao_liumang_qizhi]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

大体的目录结构分析

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

### Src目录下 ###

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

### Src下app目录下 ###

<table> 
 <tbody> 
  <tr> 
   <td><code>app/app.component.ts</code></td> 
   <td> <p>为应用的根组件定义逻辑，名为&nbsp;<code>AppComponent</code>&nbsp;。当你向应用中添加组件和服务时，与这个根组件相关联的视图就会成为<a href="https://angular.cn/guide/glossary#view-hierarchy" rel="nofollow">视图树</a>的根。</p> </td> 
  </tr> 
  <tr> 
   <td><code>app/app.component.html</code></td> 
   <td> <p>定义与根组件&nbsp;<code>AppComponent</code>&nbsp;关联的 HTML 模板。</p> </td> 
  </tr> 
  <tr> 
   <td><code>app/app.component.css</code></td> 
   <td> <p>为根组件&nbsp;<code>AppComponent</code>&nbsp;定义了基本的 CSS 样式表。</p> </td> 
  </tr> 
  <tr> 
   <td><code>app/app.component.spec.ts</code></td> 
   <td> <p>为根组件&nbsp;<code>AppComponent</code>&nbsp;定义了一个单元测试。</p> </td> 
  </tr> 
  <tr> 
   <td><code>app/app.module.ts</code></td> 
   <td> <p>定义了名为&nbsp;<code>AppModule</code>&nbsp;的根模块，它会告诉 Angular 如何组装应用。这里最初只声明一个&nbsp;<code>AppComponent</code>。当你向应用中添加更多组件时，它们也必须在这里声明。</p> </td> 
  </tr> 
 </tbody> 
</table>

### 工作区配置文件 ###

<table> 
 <tbody> 
  <tr> 
   <td><code>.editorconfig</code></td> 
   <td> <p>代码编辑器的配置。参见&nbsp;<a href="https://editorconfig.org/" rel="nofollow">EditorConfig</a>&nbsp;。</p> </td> 
  </tr> 
  <tr> 
   <td><code>.gitignore</code></td> 
   <td> <p>指定&nbsp;<a href="https://git-scm.com/" rel="nofollow">Git</a>&nbsp;应忽略的不必追踪的文件。</p> </td> 
  </tr> 
  <tr> 
   <td><code>README.md</code></td> 
   <td> <p>根应用的简介文档.</p> </td> 
  </tr> 
  <tr> 
   <td><code>angular.json</code></td> 
   <td> <p>为工作区中的所有项目指定 CLI 的默认配置，包括 CLI 要用到的构建、启动开发服务器和测试工具的配置项，比如&nbsp;<a href="https://palantir.github.io/tslint/" rel="nofollow">TSLint</a>，<a href="https://karma-runner.github.io/" rel="nofollow">Karma</a>&nbsp;和&nbsp;<a href="http://www.protractortest.org/" rel="nofollow">Protractor</a>。欲知详情，请参阅&nbsp;<a href="https://angular.cn/guide/workspace-config" rel="nofollow">Angular 工作空间配置</a>&nbsp;部分。</p> </td> 
  </tr> 
  <tr> 
   <td><code>package.json</code></td> 
   <td> <p>配置工作空间中所有项目可用的&nbsp;<a href="https://angular.cn/guide/npm-packages" rel="nofollow">npm包依赖</a>&nbsp;。有关此文件的具体格式和内容，请参阅&nbsp;<a href="https://docs.npmjs.com/files/package.json" rel="nofollow">npm 的文档</a>&nbsp;。</p> </td> 
  </tr> 
  <tr> 
   <td><code>package-lock.json</code></td> 
   <td> <p>提供 npm 客户端安装到&nbsp;<code>node_modules</code>&nbsp;的所有软件包的版本信息。欲知详情，请参阅&nbsp;<a href="https://docs.npmjs.com/files/package-lock.json" rel="nofollow">npm 的文档</a>。如果你使用的是 yarn 客户端，那么该文件<a href="https://yarnpkg.com/lang/en/docs/yarn-lock/" rel="nofollow">就是 yarn.lock</a>&nbsp;。</p> </td> 
  </tr> 
  <tr> 
   <td><code>src/</code></td> 
   <td> <p>根项目的源文件。</p> </td> 
  </tr> 
  <tr> 
   <td> <p><code>node_modules/</code></p> <p><code>README.md</code></p> </td> 
   <td> <p>根应用的介绍性文档。</p> </td> 
  </tr> 
  <tr> 
   <td><code>tsconfig.json</code></td> 
   <td> <p>工作空间中各个项目的默认&nbsp;<a href="https://www.typescriptlang.org/" rel="nofollow">TypeScript</a>&nbsp;配置。</p> </td> 
  </tr> 
  <tr> 
   <td><code>tslint.json</code></td> 
   <td> <p>工作空间中各个项目的默认&nbsp;<a href="https://palantir.github.io/tslint/" rel="nofollow">TSLint</a>&nbsp;配置。</p> </td> 
  </tr> 
 </tbody> 
</table>

### app.module.ts ###

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

可以看到其位置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 4][]

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_105570017]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200422214119627.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200422214123747.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200422214210549.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200422214216422.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200422214220843.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70