Angular - Best practice to structure modules

Question

I'm new to angular, so please bear with me. I was reading an article/documentation the other day that highlighted the best way to structure modules in your app, and can only remember it loosely.

App.controllers
App.services
....

angular.module('App', [App.controllers, App.services ...);

This code sample is very likely to be incorrect, but the point was to group controllers, services etc together in one namespace.

Could anyone expand upon this approach?

Answer 1

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
index     #material icons
styles    #angular material prebuilt theme

Answer 2

Enterprise project organization

The way I organize my angular project is:

/app
  /img         # application-level images
  /css         # application-level css styles
  /js          # application-level javascripts
  /modules             # application modules
          /gallery               # independent module with its own infrastructure
                 /controllers    # gallery module's controllers
                 /css            # gallery module's css styles
                 /directives     # gallery module's directives
                 /img            # gallery module's images
                 /filters        # gallery module's filters
                 /services       # gallery module's services
                 /views          # gallery module's views (htmls)
                 / ...           # other gallery module component folders
                 galleryMod.js   # the module itself

          /user                  # independent module with its own infrastructure
                 /controllers    # user module's controllers
                 / ...           # other user module component folders
                 userMod.js      # the module itself

          / ...                  # other modules

  / ...                # other application-level folders
  index.html

Alternative enterprise project organization (simplified)

/app
  /img         # application-level images
  /css         # application-level css styles
  /js          # application-level javascripts
  /modules             # application modules
          /gallery               # independent module with its own infrastructure
                 /js             # gallery module's javascripts (includes 
                                 # services.js, directives.js, filters.js, ...)
                 /css            # gallery module's css styles
                 /img            # gallery module's images
                 /views          # gallery module's views (htmls, "partials")
                 / ...           # other gallery module component folders
                 galleryMod.js   # the module itself

          /user                  # independent module with its own infrastructure
                 /controllers    # user module's controllers
                 / ...           # other user module component folders
                 userMod.js      # the module itself

          / ...                  # other modules

  / ...                # other application-level folders
  index.html

Middle project organization (without modules)

/app
  /img            # application's images
  /css            # application's css styles
  /controllers    # application's controllers
  /directives     # application's directives
  /filters        # application's filters
  /services       # application's services
  /views          # application's views (htmls)
  / ...           # other component folders
  index.html

Simple project organization (just like a seed)

/app
  /img            # application's images
  /css            # application's css styles
  /js             # application's javascripts (includes 
                  # services.js, directives.js, filters.js, ...)
  /views          # application's views (htmls), e.g. partials
  / ...           # other component folders
  index.html

Use the way your project needs to be organized and don't choose the way that will unnecessarily complicate your project.