Menu
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!
553
Components are the main building block for Angular applications. Each component consists of: An HTML template that declares what renders on the page. A TypeScript class that defines behavior. A CSS selector that defines how the component is used in a template.
html file. Angular is a framework which allows us to create "Single Page Applications", and here the index. html is the single page which was provided by the server. Index.
The class AppComponent has a variable called title, which is displayed in the browser. It has just the html code and the variable title in curly brackets. It gets replaced with the value, which is present in the app. component.
A bootstrapped component is an entry component that Angular loads into the DOM during the bootstrap process (application launch). Other entry components are loaded dynamically by other means, such as with the router. Angular loads a root AppComponent dynamically because it's listed by type in @NgModule.
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.
191
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
