I would like to share how I manage Ionic Angular project generally.
By using ionic generate command, we can get what Angular features are available in an Ionic Angular project:
> page
component
service
module
class
directive
guard
class
directive
guard
pipe
interface
enum
I usually divide and group them according to their type (component, service, guard etc.) rather than use case. It can make the project structure cleaner and simplify the syntax of importing exported declarations or modules.
Here is an example of the structure I usually apply
src
├── app
├── components
└── search
├── search.component.html
├── search.component.scss
└── search.component.ts
├── directives
├── disable-click.directive.ts
└── highlight.directive.ts
├── enums
├── colors.ts
└── genders.ts
├── guards
└── auth.guard.ts
├── modals
└── student-info
├── student-info.module.ts
├── student-info.page.html
├── student-info.page.scss
└── student-info.page.ts
├── models
└── student.ts
├── pages
└── home
├── home-routing.module.ts
├── home.module.ts
├── home.page.html
├── home.page.scss
└── home.page.ts
└── login
├── login-routing.module.ts
├── login.module.ts
├── login.page.html
├── login.page.scss
└── login.page.ts
├── pipes
└── date.pipe.ts
├── services
├── auth.service.ts
└── env.service.ts
├── utils
├── animations.ts
└── validators.ts
├── assets
├── environments
├── theme
├── global.scss
├── index.html
├── main.ts
├── polyfills.ts
├── test.ts
└── zone-flags.ts
Key Points
components: This folder consists of all non-page components that is without module.
directives: This folder consists of all Angular directives.
enums: This folder consists of all enums.
guards: This folder consists of all Angular guards.
modals: This folder consists of all page components that is not used for routing but for Ionic modal.
models: This folder consists of all classes that is used to represent MVC's model or so-called DTO (Data Transfer Object).
pages: This folder consists of all page components that should be used for routing.
pipes: This folder consists of all Angular pipes.
services: This folder consists of all Angular injectable services.
utils: This folder consists of all helper classes or functions.
Example
I did not create an example project to demonstrate this structure, but you can take my Ionic app - Simple QR as a real-world reference.
Hope this can help you. Happy coding!
Top comments (0)