Angular目录结构详解

整体目录结构

使用angular-cli搭建的项目目录

一级目录(介绍主要的，我们会接触到的)

• node_modules 第三方依赖包存放目录。
• src 应用源代码目录 ，我们开发就是在这个文件夹中。
• angular.json Angular命令行工具的配置文件。可以在style，script数组中导入node_modules中的文件，从而不用在index.hmlt文件中引入
  都会记录在package.json文件中。
• package-lock.json 在 npm install时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号。如果已经存在 package-lock.json 文件，则它只会根据 package-lock.json 文件指定的结构来下载模块，并不会理会 package.json 文件。
• package.json 无论使用 npm 还是 yarn 安装的包，都会记录在 package.json 文件中。
• package.json 文件中的包被分成了两组：

dependencies 是运行应用的基础。
devDependencies 只有在开发应用时才会用到。

src目录

src目录

• app目录包含应用的组件和模块，我们要写的代码都在这个目录
• assets 目录资源目录，存储静态资源的 比如图片
• environments 目录环境配置。Angular是支持多环境开发的，我们可以在不同的环境下（开发环境，测试环境，生产环境）共用一套代码，主要用来配置环境的
• index.html 整个应用的根html，程序启动就是访问这个页面
• main.ts 整个项目的入口点，Angular通过这个文件来启动项目
• polyfills.ts 主要是用来导入一些必要库，为了让Angular能正常运行在老版本下
• styles.css 主要是放一些全局的样式
• tsconfig.app.json TypeScript 编译器的配置,添加第三方依赖的时候会修改这个文件
• test.ts 自动化测试用的

app目录

app模块和组件

app目录是我们要编写的代码目录。我们写的代码都是放在这个目录。
一个Angular程序至少需要一个模块和一个组件。在我们新建项目的时候命令行已经默认生成出来了。

app.component.ts：这个文件表示组件，
组件是Angular应用的基本构建模块，可以理解为一段带有业务逻辑和数据的Html

这里插个题外话模块和组件之间的关系：
模块包含组件，NgModule 为其中的组件提供了一个编译上下文环境。根模块总会有一个根组件，并在引导期间创建它。 但是，任何模块都能包含任意数量的其它组件，这些组件可以通过路由器加载，也可以通过模板创建。那些属于这个 NgModule 的组件会共享同一个编译上下文环境。

模块和组件的关系

目录结构简单梳理完毕！

谢谢各位大佬
如果你觉得本文对你有帮助，麻烦动动手指顶一下，算是对本文的一个认可，如果文中有什么错误的地方，还望指正，转载请注明转自邹二狗的博客，谢谢