CODEWITHSUNDEEP
angularfrontend
errorau
errorau

Reputation: 2334

Module based project structure angular

I'm a newbie angular developer. I've searched many many project structure as a result then I create a module base structure but i'm not sure this approach

My created a project structure as below;

-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

more detail and source code here

Is that a good solution for lose complex app.modules?

Upvotes: 2

Views: 1605

Answers (3)

StepUp
StepUp

Reputation: 38094

As Angular style guide says:

Folders-by-feature structure

Style 04-07

Do create folders named for the feature area they represent.

Why? A developer can locate the code and identify what each file represents at a glance. The structure is as flat as it can be and there are no repetitive or redundant names.

Why? The LIFT guidelines are all covered.

Why? Helps reduce the app from becoming cluttered through organizing the content and keeping them aligned with the LIFT guidelines.

Why? When there are a lot of files, for example 10+, locating them is easier with a consistent folder structure and more difficult in a flat structure.

Do create an NgModule for each feature area.

Why? NgModules make it easy to lazy load routable features.

Why? NgModules make it easier to isolate, test, and reuse features.

For more information, refer to this folder and file structure example

An example of file structure:

enter image description here

Upvotes: 2

Caro
Caro

Reputation: 650

A better approach:

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

Upvotes: 2

dolpsdw
dolpsdw

Reputation: 78

Modules are components that enable LazyLoading.

So i Will recommend you create one Module per "widget" that could be fitted into a lazy loaded strategy.

Also read about Smart components and presentation components for best practices on reusable presentational components.

Upvotes: 1

Related Questions