BEST PRACTICE TO STRUCTURE ANGULAR MODULES

Angular_logo
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?