TypeScript / Angular Beispiel Snippets

angularServices.ts

// mein.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class MeinService {
  public serviceVariable:string = 'Hallo aus Service'
}



// app.component.ts
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [MeinService] //schritt 1 für Service-Einbindung
})
export class AppComponent {

  // schritt 2 für Service-Einbindung: auflisten als Konstruktor-Parameter
  constructor(private meinService: MeinService) {
    console.log(this.meinService.serviceVariable);
  }
}

derzeitigeZeit.ts

constructor() {
    const jetzt: Date = new Date();
    console.log(jetzt.toISOString()); // 2017-04-25T15:12:32.965Z
    const sekunden: number = jetzt.getTime() / 1000.0;
    console.log(sekunden); // 1493133152.965
}

dialogeUndAlerts.ts

class Klasse {

  // der User kann zur Interaktion gezwungen werden
  constructor() {
    const wort: string = window.prompt('Schreibe ein Wort', 'Standardeingabe');
    const rev: boolean = window.confirm('Soll das Wort umgedreht werden?');
    if (rev) {
        const umgedreht: string = wort.split('').reverse().join('');
        window.alert('Umgedreht: ' + umgedreht);
    } else {
        window.alert('Original: ' + wort);
    } 
  }

}

funktionVsMethode.ts

class Klassenname {
  int value = 0;
  
  constructor() {
  }
  
  func methode(x : int) {
    this.value += x;
    console.log('Alle Methoden sind Funktionen.');
  }
}


func funktion() {
 console.log('Nicht alle Funktionen sind Methoden.');
}


//aufrufen:
this.funktion();
let x = new Klassenname();
x.methode(1); //x.value == 1
x.methode(2); //x.value == 3

gpsKoordinaten.ts

class Klasse {
  // Browser machen das GPS und Co des Geräts verfügbar über 'navigator.geolocation'. Hier rufen wir nur die GPS Koordinaten ab:
  constructor() {
    function showPosition(position) {
      console.log('Breitengrad: ' + position.coords.latitude + '\nLängengrad: ' + position.coords.longitude);
    }
    navigator.geolocation.getCurrentPosition(showPosition);
  }
  // Es ist auch möglich, eine Funktion immer auszuführen, wenn sich die Koordinaten ändern (bei Interesse: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation )

}

localStorage.ts

export class AppComponent {
  constructor() {
      localStorage.setItem('MeinSchlüssel", "Hallo Welt'); //speichert zweite Zeichenkette persistent auf der Festplatte unter dem ersten Wert als Schlüsssel
      let wort : string = localStorage.getItem('MeinSchlüssel'); //gibt den Inhalt zurück, der unter dem angegebenen Schlüssel definiert wurde
      console.log(wort); // > Hallo Welt
      //Die erste Zeile (localStorage.setItem(...)) kann auskommentiert werden und das Programm neu kompiliert werden. Der Wert 'Hallo Welt' bleibt bestehen im LocalStorage bis er explizit gelöscht oder überschrieben wurde.
  }
}

mehrereComponents.ts

//app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  meinUntertitel = 'Untertitel in AppComponent gesetzt!';
  eingabeFuerInnereKomponente = 'Dieser Wert stammt aus AppComponent';

  constructor() {}
}


//app.component.html
<h1>Ich bin die äußere Komponente</h1>
<h2>{{meinUntertitel}}</h2>
<inneres-tag [meineExterneEingabe]="eingabeFuerInnereKomponente"></inneres-tag>


//innere.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'inneres-tag',
  templateUrl: './innere.component.html',
  styleUrls: ['./innere.component.css']
})
export class InnereComponent {
  @Input('meineExterneEingabe') meineExterneEingabeLang: string;

  constructor() {}
}


//innere.component.html
<p> Ich bin die innere Komponente! </p>
<p> Innere Eingabe: {{meineExterneEingabeLang}}</p>



//Bei Interesse, mehr dazu unter: https://angular.io/docs/ts/latest/cookbook/component-communication.html

schleifen.ts

//Schleifen funktionieren ähnlich zu anderen C-ähnlichen Sprachen:
for (let i = 0; i < 10; i++) {
  console.log(i); // 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
}

Timer.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public title : string = 'this app works!';
  private nummer : number = 0;

  aktualisiere() {
    this.nummer += 1; //erhöhe Wert
    this.title = 'Tick #' + this.nummer; //schreibe Wert in title
    setTimeout(() => this.aktualisiere(), 1000);  //wiederhole Methode nach 1000 Millisekunden
  } 

  constructor() {
    this.aktualisiere();
  }
}

TypeScriptKlasse.ts

import {AndereKlasse} from ‘./andereKlasse’;

export class Klassenname {
  //Attribute der Klasse (private oder public):
	private numberVar: number;
	public stringVar: string;
	public objVar: AndereKlasse;
	
  //Funktionen der Klasse:
	ichBinEineFunktion(): void {
		let x = this.boolVar 
		if (x) {
			console.log(‘Ich lande in der Konsole’);
		}
    this.schreibeHeutigesDatum();
	}

  schreibeHeutigesDatum(): void {
    let datum : Date = new Date(); //Date-Objekt mit Datum und Uhrzeit der Erstellung
    let datumString : String = datum.toUTCString(); //String-formatierte Version des Date-Objektes
    console.log(datumString); //landet in der JavaScript-Konsole des Browsers (Drücke F12!)
  }

  //Konstruktor (wird bei Erstellung der Klasse aufgerufen und danach nicht mehr)
	constructor(public boolVar : boolean) { //boolVar wird zu einem Attribut der Klasse!
		this.numberVar = 42;
		this.stringVar = ‘Ich bin ein Text’;
    this.ichBinEineFunktion();
  }
}

urlGetRequests.ts

//man kann auf externe URLs im Internet zugreifen und so zum Beispiel Wetterberichte und ähnliches abfragen (Beispiel: Metadaten eines Buches anhand der ISBN)
//dies wäre hier zu viel des Guten, da wir keinen Zugriff auf solche externe URLs brauchen
//bei Interesse: https://www.w3schools.com/xml/xml_http.asp

//dies ist die Grundlage für AJAX und würde auch verwendet werden um mit unserem Server zu kommunizieren (wir benutzen in diesem Workshop aber keinen Server)

varLetConst.ts

class Klasse {
  x = 1 // Attribute in Klassen ohne einen Prefix

  constructor() {
    var a = 1 // Standard Javascript bis 2015, nicht empfohlen!
    let b = 2 // Standard für Variablen (veränderbare Werte)
    const c = 3 // Standard für Konstanten (unveränderbare Werte)
    b = 4 // let-variablen können verändert werden
    c = 5 // <== FEHLER! const-variablen können nicht verändert werden
    this.x = 6 // geht
  }

}