Layout-tiedisto Angularissa

Verkkosivuston layout sijoittuu tiedostoon src/index.html. Se näyttää suunnilleen tältä:

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>title</title>
	<base href="/">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
	<app-root></app-root>
</body>
</html>

Tässä tiedostossa kaiken pitäisi olla sinulle ymmärrettävää, jos olet opiskellut HTML:ää, lukuun ottamatta tagia app-root:

<body>
	<app-root></app-root>
</body>

Tämä tagi ei ole osa HTML:ää. Tämän tagin lisää Angular itse. Siihen kohtaan, minne tämä tagi on kirjoitettu, lisätään pääkomponentin HTML-koodi. Puhumme tästä yksityiskohtaisemmin seuraavassa oppitunnissa.

Vaihda sivuston layoutissa sivun otsikko.

Kirjoita body-tagiin jotain tekstiä. Tarkista, että se ilmestyy selaimeen.

Lisää ylätunniste, alatunniste, sivupalkit ja sisältö. Aseta app-root-tagi sijoitettavaksi sivuston sisältöön.