I am an Angular 1 developer that is starting to learn about Angular 2. There are a lot of different types of folder structure methods depending on the training material. I am going to list each one below and I would love to get people's opinions on which I should use and why. Also, if there is a method that is not listed but you feel that it works better, please feel free to list it as well.
By looking at all of these, method #3 is pretty much how I was doing my Angular 1 apps.
Method 1: angular2-quickstart
Source: https://angular.io/guide/quickstart
Folder Structure:
Method 2: ng-book2
Source: https://www.ng-book.com/2/ (have to pay to see the files)
Folder Structure:
Method 3: mgechev/angular2-seed
Source: https://github.com/mgechev/angular2-seed
Folder Structure:
This question is related to
angular
The answer is
I’ve been using ng cli lately, and it was really tough to find a good way to structure my code.
The most efficient one I've seen so far comes from mrholek repository (https://github.com/mrholek/CoreUI-Angular).
This folder structure allows you to keep your root project clean and structure your components, it avoids redundant (sometimes useless) naming convention of the official Style Guide.
Also it’s, this structure is useful to group import when it’s needed and avoid having 30 lines of import for a single file.
src
|
|___ app
|
| |___ components/shared
| | |___ header
| |
| |___ containers/layout
| | |___ layout1
| |
| |___ directives
| | |___ sidebar
| |
| |___ services
| | |___ *user.service.ts*
| |
| |___ guards
| | |___ *auth.guard.ts*
| |
| |___ views
| | |___ about
| |
| |___ *app.component.ts*
| |
| |___ *app.module.ts*
| |
| |___ *app.routing.ts*
|
|___ assets
|
|___ environments
|
|___ img
|
|___ scss
|
|___ *index.html*
|
|___ *main.ts*
So after doing more investigating I ended up going with a slightly revised version of Method 3 (mgechev/angular2-seed).
I basically moved components to be a main level directory and then each feature will be inside of it.
I suggest the following structure, which might violate some existing conventions.
I was striving to reduce name redundancy in the path, and trying to keep naming short in general.
So there is no/app/components/home/home.component.ts|html|css.
Instead it looks like this:
|-- app
|-- users
|-- list.ts|html|css
|-- form.ts|html|css
|-- cars
|-- list.ts|html|css
|-- form.ts|html|css
|-- configurator.ts|html|css
|-- app.component.ts|html|css
|-- app.module.ts
|-- user.service.ts
|-- car.service.ts
|-- index.html
|-- main.ts
|-- style.css
Here's mine
app
|
|-- shared (for html shared between modules)
| |
| |-- layouts
| | |
| | |-- default
| | | |-- default.component.ts|html|scss|spec.ts
| | | |-- default.module.ts
| | |
| | |-- fullwidth
| | |-- fullwidth.component.ts|html|scss|spec.ts
| | |-- fullwidth.module.ts
| |
| |-- components
| | |-- footer
| | | |-- footer.component.ts|html|scss|spec.ts
| | |-- header
| | | |-- header.component.ts|html|scss|spec.ts
| | |-- sidebar
| | | |-- sidebar.component.ts|html|scss|spec.ts
| |
| |-- widgets
| | |-- card
| | |-- chart
| | |-- table
| |
| |-- shared.module.ts
|
|-- core (for code shared between modules)
| |
| |-- services
| |-- guards
| |-- helpers
| |-- models
| |-- pipes
| |-- core.module.ts
|
|-- modules (each module contains its own set)
| |
| |-- dashboard
| |-- users
| |-- books
| |-- components -> folders
| |-- models
| |-- guards
| |-- books.service.ts
| |-- books.module.ts
|
|-- material
| |-- material.module.ts
Maybe something like this structure:
|-- app
|-- modules
|-- home
|-- [+] components
|-- pages
|-- home
|-- home.component.ts|html|scss|spec
|-- home-routing.module.ts
|-- home.module.ts
|-- core
|-- authentication
|-- authentication.service.ts|spec.ts
|-- footer
|-- footer.component.ts|html|scss|spec.ts
|-- guards
|-- auth.guard.ts
|-- no-auth-guard.ts
|-- admin-guard.ts
|-- http
|-- user
|-- user.service.ts|spec.ts
|-- api.service.ts|spec.ts
|-- interceptors
|-- api-prefix.interceptor.ts
|-- error-handler.interceptor.ts
|-- http.token.interceptor.ts
|-- mocks
|-- user.mock.ts
|-- services
|-- srv1.service.ts|spec.ts
|-- srv2.service.ts|spec.ts
|-- header
|-- header.component.ts|html|scss|spec.ts
|-- core.module.ts
|-- ensureModuleLoadedOnceGuard.ts
|-- logger.service.ts
|-- shared
|-- components
|-- loader
|-- loader.component.ts|html|scss|spec.ts
|-- buttons
|-- favorite-button
|-- favorite-button.component.ts|html|scss|spec.ts
|-- collapse-button
|-- collapse-button.component.ts|html|scss|spec.ts
|-- directives
|-- auth.directive.ts|spec.ts
|-- pipes
|-- capitalize.pipe.ts
|-- safe.pipe.ts
|-- configs
|-- app-settings.config.ts
|-- dt-norwegian.config.ts
|-- scss
|-- [+] partials
|-- _base.scss
|-- styles.scss
|-- assets
If project is small and will remain small, I would recommend to structure by type (Method 2: ng-book2)
app
|- components
| |- hero
| |- hero-list
| |- villain
| |- ...
|- services
| |- hero.service.ts
| |- ...
|- utils
|- shared
If project will grow you should structure your folders by domain (Method 3: mgechev/angular2-seed)
app
|- heroes
| |- hero
| |- hero-list
| |- hero.service.ts
|- villains
| |- villain
| |- ...
|- utils
|- shared
Better to Follow official docs.
https://angular.io/guide/styleguide#application-structure-and-ngmodules
I am going to use this one. Very similar to third one shown by @Marin.
app
|
|___ images
|
|___ fonts
|
|___ css
|
|___ *main.ts*
|
|___ *main.component.ts*
|
|___ *index.html*
|
|___ components
| |
| |___ shared
| |
| |___ home
| |
| |___ about
| |
| |___ product
|
|___ services
|
|___ structures
I think structuring the project by functionalities is a practical method. It makes the project scalable and maintainable easily. And it makes each part of the project working in a total autonomy. Let me know what you think about this structure below: ANGULAR TYPESCRIPT PROJECT STRUCTURE – ANGULAR 2
source : http://www.angulartypescript.com/angular-typescript-project-structure/
Source: Stackoverflow.com