BEST PRACTICE TO STRUCTURE ANGULAR MODULES

BEST PRACTICE TO STRUCTURE ANGULAR MODULES

This folder structure allows me to scale Angular and find every file quickly by understanding and grouping their overall functionality.

/app
    /features    
           /product   #one folder per entity
               /get-products component
               /create-product component
               /update-product component
               /delete-product component
               /state #ngrx state
                  /actions
                  /effects
                  /reducers
                  /selector
                  index
    /models 
           auth
           user
           product
           # additional.model.ts 

    /services
           backend service
           api service
           auth service
           firebase service
           auth-guard service
           # additional.service.ts
    /store
          /actions
          /effects
          /reducers
          app-store
          index
    /utilities
          router.animation
          customAngularMaterial module
          uuid
          validator
          pipe
          directive
          # additional utilities
    /views
          /admin component
          /auth  component
          /header component
          /footer component
          /navbar  component
          /profiles  component
          /home  component
          /contactus  component
          #additional views
    app-routing.module
    app.component
    app.module
  /assets
      /css      #custom styles.css
      /icons    #svg files
      /favicon.ico
      /images
      #additional assets
main

IN CONCLUSION

One of the benefits I like to work with Angular is grouping features to scale the app.

SUPPORT

If you need me for a consultation or to create an Angular App, contact me via admin@domiserver.com

0 Comments

Submit a Comment

AFILIATE A DOMISERVER


 
 
 

¿No sabes por donde empezar?