What should I write in Angular index and app.component.html?

Question

I am currently learning Angular and wondering what exactly should be coded in index.html and in app.component.html -instead of being coded in components-.

My current Angular project is my personal website, which I would like to migrate to Angular in order to train. You can find it at http://www.chloe-seiler.com/

-Nevermind the responsivity, am working on it.-

Basically there are a header, a nav and a body. Body differs only when navigating, header and nav remain throughout the website.

Should I code the header and new in index.html? Or in app.component.html? Or should I make them components, in which case : do my index.html and my app.component.html remain empty?

Thanks in advance for your help!

Answer 1

index.html : As far as a basic application such as personal website is being developed, index.html can be used to include css, js, icon, fonts and set title, put in user defined scripts.

app.component.html : This shall hold the component view for app level component. Now a good practice is to use routing in your app for every component. You can then put in just

<router-outlet></router-outlet> 

tag to display your routed components. Here is a simple example of routing. If you are not using multiple components, you can just user app.component.html to display app level component.

Answer 2

app/app.component.ts - this is where we define our root component
index.html - this is the page the component will be rendered in

so index.html it's just a starting page, you may add the linking to global css to it and a global page title ....

app/app.component.ts with her templating file (app/app.component.ts) it's called each time the route change... so the header and footer shoulf be in it:

<app-header></app-header> // here's goes the header
<router-outlet></router-outlet> // here's goes the content of each route
<app-footer></app-footer> // here's goes the footer