Question

我是新手，有角度的开发人员。结果，我搜索了许多项目结构，然后创建了一个模块基础结构，但是我不确定这种方法

我创建了如下的项目结构；

-src
-app
    -components
        -header
        -left-side
        -custom-select
        ... and more component here 
        **components.module.ts**
    -pages
        -home
        -login
        -not-found
        ... and more page here 
        index.ts
        **pages.module.ts**
     -services
        APIService.ts
        LoadingService.ts
        LocalStorageService.ts
        PagesService.ts
        SweetAlertService.ts
        ... and more page here 
        index.ts
        **services.module.ts**
    -models
    -interfaces 
    -data
    ... others 
    app-routing.module.ts
    app.component.html
    app.component.ts
    app.module.ts
-assets
-environments
... others
index.html

更多详细信息和来源code here

这是丢掉复杂app.modules的好方法吗？

Answer 1

As Angular style guide says:

按功能划分的文件夹

样式04-07

执行创建名为的文件夹   它们代表的特征区域。

为什么？开发人员可以找到代码并确定每个文件的内容   一目了然。结构尽可能平坦，并且   没有重复或多余的名称。

为什么？涵盖了LIFT准则。

为什么？帮助减少应用程序的组织混乱   内容并使其与LIFT指南保持一致。

为什么？当文件很多（例如10个以上）时，找到它们是   具有一致的文件夹结构更容易，而在平面中则更困难   结构。

执行为每个功能区域创建一个NgModule。

为什么？？NgModules使得延迟加载可路由功能变得容易。

为什么？？NgModules使隔离，测试和重用功能更加容易。

有关更多信息，请refer to this folder and file structure example

文件结构示例：

Answer 2

模块是启用LazyLoading的组件。

所以我建议您为每个“小部件”创建一个模块，以适合延迟加载策略。

还请阅读有关智能组件和演示组件的信息，以获取有关可重用演示组件的最佳实践。

Answer 3

更好的方法：

App
    - coreModule : all singleton services
    - featureModule1
        -component1
        -component2
        -services
    -featureModule2
    -sharedModule: all reusables components between modules

基于模块的项目结构角度

3 个答案: