angular——目录结构设计

R330小型挖掘机
555 阅读1分钟

1.关于src目录结构：

image.png

app下存放我们所有核心代码
assets存放静态资源，图片，全局样式，国际化数据
environment存放全局环境变量

关于app文件夹的目录结构

image.png

app文件夹存放的是根组件

image.png

component中存放被多个路由视图模块复用的全局公共组件
config中存放项目中会用到的配置相关字段

image.png

page中存放受路由直接控制的组件，按照不同业务划分给不同业务模块管理，随后将这些业务模块导出，并交给pageModule管理

image.png

plugin中是我们引入的第三方资源，通过在各自的module中按需加载引入，所有资源模块导出并交给pluginmodule管理，

image.png

service中是我们的业务逻辑service文件和路由守卫文件，这里按照业务模块划分到不同文件夹下

image.png

shared存放我们需要在所有业务组件模块中使用的自定义功能，包括动画，管道，指令，表单校验器等等，并统一全部在sharedModule中导出

image.png

store中存放ngrx等第三方状态管理工具的相关代码，并按照业务逻辑划分文件夹，因为在ng中状态管理工具可以用service替代，所以store不是必选项

image.png

appmodule文件管理整个项目的所有模块，所有模块都将被在这里引入和使用

image.png

approutingModule是我们所有路由的总出口，负责管理所有路由和子路由模块，懒加载的业务模块的路由模块在这里被引入

image.png

avatar
文章
阅读
粉丝