Angular: Root Platzhalter für Componenten
Index.html
In der Index.html steht der Platzhalter
<app-root></app-root>
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>MyApp02</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>
|
App.compontent.ts ->Component->Selector
In der .ts Datei der componente steht der Name der Componente, welche eingesetzt wird
@Component({
selector: 'app-root',
Das bedeutet, dass diese Komponente in den Platzhalter der .html Datei eingefügt wird
import { Component } from '@angular/core';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] })
export class AppComponent {
title = 'Raimund 1222'; }
|
app.module.ts ->bootstrap
Bootstap wird in der datei module.ts auf die Komponente zugewiesen
Die Zeile export class AppModule wird dann in die main.ts übergeben
platformBrowserDynamic().bootstrapModule(AppModule)
Die app.module.ts (.ts typescript Datei)
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import {FormsModule} from '@angular/forms'
import { AppComponent } from './app.component';
@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
|