#

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 {FormsModulefrom '@angular/forms'

 

import { AppComponent } from './app.component';

 

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    FormsModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

 

 

 

Mobile

.