Confusion about Angular/Ionic_v4 architecture, components modules and pages

Ionic Framework
1

Hey everyone thanks for your time reading and helping !

I’m learning Ionic / Angular and I read a lot of doc and tutorials but there is still things I can’t figure out :

In Angular there are components and modules.

In Ionic there are components and pages (just a component from what I read) and modules.

Components structure are :

  • mycomp.component.html -> the HTML template
  • mycomp.component.scss -> the styling file
  • mycomp.component.spec.ts -> unknown but told it’s not important (testing and stuff ?)
  • mycomp.component.ts -> main logic

Modules strucutre are :

  • mymodule.module.spec.ts -> same unknown file
  • mymodule.module.ts -> module logic

A strange thing is when I create a page from ionic CLI it should then create a component but when creating a page I end up with a mypage.module.ts file so are pages components or modules ?

Why is there this extra file if pages are supposed to be components ?

If I want to dev a simple tab app with three tabs agenda / contact / actu should the structure looks like this ? (sorry if it’s stupid):

image
image.png252×619 12.3 KB

Where home is a page displaying my tabs (it’s created at the start so I don’t realy know but I supposed it’s a page) and inside three components Actu Agenda and Contact on which I will route so they’re displayed at the right time. Is this correct ?

I’m maybe wrong maybe xxxx.module.ts files are different stuff from what is call module which are @NgModule declaration even in xxxxx.component.ts files, so component could also be modules ? I’m lost in all this terminology haha :sweat_smile:

It was simple at the begining but I got into trouble when I tried to implement the routing for my tabs app.

The only question that matter is “What should the structure of a tabbed app looks like ?”, should I use something like :

  • module
    • page -> displaying the tabs
      • component -> tab 1
      • component -> tab 2
      • component -> tab 3

or :

  • module
    • page -> displaying tabs
      • page -> tab 1
        • component -> tab 1 components
      • page -> tab 2
        • component -> tab 2 components
      • page -> tab 3
        • component -> tab 3 components

Or maybe something else, I think I’m just realy confused about those terms :confused:

2 Likes
2

Modules are not necessarily valuable for very small projects

And the cli creates module when generating page (v3 project) for lazy loading (@IonicPage decorator in the component)

So in short: if u want lazy loading and a very small peoject, then page equals module for sake of simplicity

If u dont want lazybloadibg in a very small project you find yourself removing these modules and IonicPage stuff

When apps become bigger, then story changes

Worth studying on angular.io

In the end u probably find yourself using modules for segregation of concern, testing, routes (bundling of features)

1 Like
3

Maybe you’ve already seen it, but if not check out this brief overview video I did: https://www.youtube.com/watch?v=15GfUQXditg

It covers the basics of what a lot of the files etc. are responsible for. Don’t confuse yourself with the “difference” between Ionic and Angular, Ionic application are Angular applications (assuming you are using Ionic with Angular, of course).

The spec file you mention is a unit testing file - this serves no purpose in regards to the functionality of your project, but you can use these files to run tests that verify your code is behaving the way you expect. This is a powerful and useful tool, but is a little more advanced and can be ignored in the beginning.

As for modules, modules are basically a way to bundle chunks of functionality together. The reason we generally have a module file for each page is for the sake of lazy loading - which allows us to load functionality on demand as required for a particular page (rather than all at once up front). So when we hit a particular route, the module file determines what functionality needs to be pulled in for our application to work. In the case for a single page, the module file would generally include the page component itself (obviously we are going to need to load that in) and other modules like the IonicModule (which will allow us to use Ionic stuff in the page)), the FormModule (which will allow you to use ngModel etc. in the page) and usually some other stuff as well.

4 Likes
4

Thanks @Tommertom and @joshmorony I was already on angular.io but I will definitively looks for your videos ty a lot !

1 Like