场景

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

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017

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

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

注：

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

实现

大体的目录结构分析

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看一下组件的组成

Angular目录结构分析以及app.module.ts详解相关推荐

SAP Spartacus 定义在app.module.ts里的providers依赖注入元数据何时得到处理
我基于 SAP Spartacus library创建了一个自定义的Storefront实现.在其app.module.ts里,我采用自定义的MyCurrentProductService,去替换 S ...
ES Module原理详解
ES Module原理详解一.ES Modules如何工作流程简析二.模块加载 1.构造 2.实例化 3.求值总结参考 ES Module 系列: ES Module使用详解 ES Modu ...
【Google Play】App Bundle 使用详解 ( 应用模块化 )
Google Play 上架完整流程系列文章目录 [Google Play]创建 Google 开发者账号 ( 注册邮箱账号 | 创建开发者账号 ) [Google Play]创建并设置应用 ( 访 ...
【Google Play】App Bundle 使用详解 ( 简介 | 应用内更新 | 即时更新 | 灵活更新 )
Google Play 上架完整流程系列文章目录 [Google Play]创建 Google 开发者账号 ( 注册邮箱账号 | 创建开发者账号 ) [Google Play]创建并设置应用 ( 访 ...
【ES6】Module模块详解
[ES6]Module模块详解一.Module的由来二.严格模式三.export命令四.import命令查看更多ES6教学文章: 参考文献引言:由于两个JS文件之间相互使用必须通过一个ht ...
vsftp建立虚拟用户不同目录分配不同权限操作步骤详解
这篇文章主要介绍了vsftp建立虚拟用户不同目录分配不同权限操作步骤详解,大家参考设置自己的FTP服务器吧vsftpd服务器同时支持匿名用户.本地用户和虚拟用户三类用户账号,使用虚拟用户账号可以提供集 ...
php node 目录,node.js基于fs模块对系统文件及目录进行读写操作的方法详解
本文主要介绍了node.js基于fs模块对系统文件及目录进行读写操作的方法,结合实例形式分析了nodejs使用fs模块针对文件与目录的读写.创建.删除等相关操作技巧,需要的朋友可以参考下. 如果要用这 ...
Android Doze and App Standby模式详解
Android Doze and App Standby模式详解来源:腾云阁 https://www.qcloud.com/community Optimizing for Doze and Ap ...
pytorch教程之nn.Module类详解——使用Module类来自定义网络层
前言:前面介绍了如何自定义一个模型--通过继承nn.Module类来实现,在__init__构造函数中申明各个层的定义,在forward中实现层之间的连接关系,实际上就是前向传播的过程. 事实上,在p ...

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

场景

实现

Src目录下

Src下app目录下

工作区配置文件

app.module.ts

Angular目录结构分析以及app.module.ts详解相关推荐

最新文章

热门文章