Angular 8 学习（二目录解析）

曾经终败给现在 2024-04-17 14:26 24阅读 0赞

# 上一章我们已经搭建好了angular的环境，并且创建了一个项目， #

现在，就来解析一下他的目录结构

打开之后的项目是这样的;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70][]

在这里说一下最主要的几个目录：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70 1][]

src里面放的是以后开发所编写的代码

package.json  里面存放的是npm的配置文件

将src展开：

![20190827132216156.png][]

app：组件，模块，根

assets：静态资源

index.html  主页面

styles.scss   全局的样式

将app目录展开，最重要的地方来了

![20190827132448883.png][]

components 这个是自己创建的组件，后面会讲怎么创建，

目前主要关注的就是：

![20190827132649698.png][]

这三个，作用分别和他们的名称差不多，html页面，scss是一个css样式，ts文件 这个文件会告诉你angular如何进行组装应用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70 2][]

标注出来的是我将自己写的组件引入的部分，这个后面讲，总的来说，现在只要知道src 目录 就可以

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/598533b79085430690b8c87252dfc55a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/c4b297ef2e8b4ff0906dcdc6bf38d02e.png
[20190827132216156.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/1803dfc376dc4c1290ae22c9dd1cedf8.png
[20190827132448883.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/08a0fdfc62034e3c82f0d746c76c2682.png
[20190827132649698.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/d7b463b62ed440679feb516f06a6c0d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/0f0146626c424ca1a3db76e0b794a84a.png