Angular: Dateien und Datenbindung
In Angular benötigt man 3 Dateien.
1) Die .html Datei als Ausgabe
2) Die .ts TypeScript Datei als Code-Behind zum Programmcode ausführen
3) Die .module Datei zum Definieren, welche großen Code Module oder Bibliotheken von Angular hier verwendet werden
Im Prinzip ist Angular recht einfach:
Man legt Daten in der Code-Behind Datei .ts fest und bindet diese in der Ausgabe .html Datei mit zwei geschweiften Klammern {{Ausgabe}} an
1) .html Datei
In der HTML Datei:
Die Eingabe über [(ngModul)]=“variable“
<input type="text" [(ngModel)]="title"> |
Und die Anzeige oder Ausgabe mit der {{Bindung}}
{{ title }} |
Datei app.compontent.html
Test Angular Variablen
<br> <br> Input in Field <br> <input type="text" [(ngModel)]="title"> <br><br> Output in HTML <br> {{ title }} |
2) .ts TypeScript Datei
In der .ts Typescript Datei:
Hier findet man die Variablen und Daten
import { Component } from '@angular/core';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] })
export class AppComponent {
title = 'Raimund 1222'; }
|
3) Module Datei
In der dazugehörigen .module Datei werden alle Teile benannt, welche verwendet werden.
Hier findet man
NgModule zum handeln der Daten,
FormsModule ->zum verwenden eines Eingabefeldes mit Angular
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 { }
|