What is the ideal project structure Ionic?

Ionic Framework ionic-v3
1

Hello everybody,

To start, sorry for my English.

I am a beginner in ionic and I wanted to know how to properly structure my application (in src folder).
I use in my application a tabcontroller with 3 tabs, and with the Ionic creator, I have the following structure :

src
app
app.component.ts
…
pages
folder1
page1.component.ts
page1.template.html
page1.template.css
folder2
page2.component.ts
page2.template.html
page2.template.css

I stopped using Ionic Creator, and I would like to have a good structure in case the application grows.

I know that in Angular 4, we separate the different modules as well as the services …
But is it the same for Ionic 3 app ?

If I do like for Angular 4, could I still use Navigation with NavController?

Thanks in advance.

1 Like
2

I use a variant of this. (My variation includes for example an Effects folder for ngrx effects. You might want/need to do something like that, depending on what libraries you use. But the material in the link is excellent.)

https://angular.io/guide/styleguide#folders-by-feature-structure

3

Thank you very much for your answer.
I Will follow this way to structure my app.

4

Old thread, but just an input.

What is recommended by Angular Style Guide is actually different from ionic. For my project, since it’s managed by different people, I prefer to use the default folder structure specified by ionic.

For example, ionic generate provider http will create a HttpProvider in /providers/http/.

1 Like
5

I use: https://github.com/Robinyo/ionic-angular-schematics

Goals

    ├── <PROJECT_ROOT>
        └── /src
            └── /app                                  -  App Module
                ├── app.component.ts
                ├── app.html
                ├── app.module.ts
                ├── app.scss
                ├── main.ts
                └── /core                             - Core Feature Module (e.g., Singleton Services/Providers)
                    ├── core.module.ts
                    ├── module-import-guard.ts  
                    └── /logger
                        ├── console-logger.service.ts
                        ├── logger.service.ts                               
                └── /pages                            - Page (Component) Modules
                    └── /home
                        ├── home.page.html
                        ├── home.page.module.ts 
                        ├── home.page.scss   
                        ├── home.page.spec.ts
                        ├── home.page.ts                                                                                                               
                └── /shared                           - Shared Feature Module (shared Components, Directives and Pipes)
                    ├── shared.module.ts                
            └── /assets
            └── /environments                         - Environment specific configuration   
                ├── environment.dev.ts
                ├── environment.ts                        
            └── /theme
                ├── facebook-messenger-theme.scss            
                ├── gradient-mixins.scss
                ├── gradient.scss
                ├── green-and-blue-theme.scss                    
                ├── variables.scss
            ├── index.html
            ├── manifest.json
            ├── service-worker.js
        └── /config                                   - Webpack Configuration
            ├── webpack.config.json
        └── /e2e                                      - E2E Test Configuration
            ├── app.e2e-spec.ts
            ├── app.po.ts
            ├── tsconfig.e2e.json
        └── /resources                                - Default Resources (e.g., Icon and Splash)
        └── /www                                      - Ionics 'dist' directory
            └── /assets
            └── /build   
            ├── index.html
            ├── manifest.json
            ├── service-worker.js
        ├── .editorconfig
        ├── .gitignore
        ├── config.xml
        ├── ionic.config.json
        ├── karma.conf.json           
        ├── package.json
        ├── protractor.conf.json
        ├── README.md     
        ├── tsconfig.json
        ├── tsconfig.ng-cli.json        
        ├── tslint.json

Note: See this post re Shared Feature Module (Shared Common Modules) v Encapsulated Modules.

1 Like
6

Hi, I know this is an old thread but this is the closest information I can find for my questions. I like this structure layout and if I get it, the “Providers” folder content would be in the “Core” folder. Going deeper in, how would you structure the individual providers? Let’s say I have a “ServersListProvider” that takes care of storing/maintaining the list of servers and another “ServerProvider” that takes care of interacting with the specific server via http/tcp/xstate/whatever. Would you keep them separate or would you put this all together as “ServersProvider” ?

7

I would make that call based on who injects them. If the same clients tend to inject both (or, from your description, perhaps ServersListProvider is pretty much internal and only injected by ServersProvider), I would house them together. If they have different clientele, I would separate them.

1 Like
8

Tx, I guess I’ll go with separate providers.

The ServersListView would need ServersListProvider to retrieve the stored list but would also need ServerProvider to retrieve the current reachable state of the server and show it in the list.

On the other hand, a ServerView would only need ServerProvider to communicate with a specific server to get some content.