Angular header/footer, Component or Module

Question

I have been learning angular for a while now and I understand the point of modules and components (briefly) but now I am starting my own project using the framework I am somewhat confused. When should I choose either a component or a module. Can you help?

For example, for the site's basic wire-frame (ie headers, footers, side bars etc.) what should I use? Should something like:

• App:
  • Layout module:
  • Header Component
  • Footer Component

Or:

• App:
  • Header Module
  • Footer Module

Or just have them all as components, like:

• App
  • Header Component
  • Footer Component

I am not looking for an outright answer, just a steer or some guidance please?

Thanks

Answer 1

so for those parts you'd create Components. These components have templates that contain the HTML for the component. So for example, if in your header you want to display a title. Then the template would have an H1 tag inside to show the title.

Modules, on the other hand, are like namespaces in other languages. They are a way of grouping components together. So your components, (header and footer), would sit in/be a reference in the main app.module.ts.

Where modules are really useful are in larger applications, for example, if you have an app that has a News section and a Reports section. Then you would create a news-page component, and add this to a news.module.ts and you'd also create a reports-page.component and add that to the report.module.ts. Creating two separate modules, which are adding in the app.module.ts

Having so much in modules, will allow features like tree shaking, where the app only loads in the modules it needs. So if the user was looking at the News section, the Reports module would not load all the report components. This reduces the size of the app, and makes loading the app quicker.

So create your components for header and footer, they will be automatically added to the app.module.ts. Then if your app grows you can look at creating other modules.

I hope this answer helps.

Stephen