Web-app Tutorial: Eine Anwendung Mit Angular Bauen

Published Sep 20, 20
3 min read

Erstellen Der Benutzeroberfläche Der Angular-app Mit Eduvision



Die Liste an Elementen kann dabei natürlich auch aus einer Variable kommen. Ebenso, wie in AngularJS, kann auch in der zweiten Version des Frameworks auf den aktuellen Index der Schleife zugegriffen werden. Dazu erweitern wir unsere Quellcode ein wenig. Aktuelle Zahl ist: number (currentIndex) Nach der Angabe der Liste kann der aktuelle Index auf eine eigene Variable geschrieben werden, um auf sie zugreifen zu können.

Sie erlauben das Transformieren von Daten in Expressions. Pipe bedeutet im Deutschen Rohr bzw. Leitung. Viele kennen die Pipe als Operator aus der Unix-Shell, um Ausgabewerte zur weiteren Verarbeitung, Filterung oder Transformationen weiterzuleiten. Dabei können mehrere so genannter Pipes hintereinander ausgeführt werden. Wobei die Ausgabe einer Pipe die Eingabe der nächsten darstellt.

Wie in AngularJS, gibt es auch in der Version 2 schon ein paar vordefinierte Pipes, z.B. CurrencyPipe zur Währungsformatierung und DatePipe zur Datumsformatierung. Als Beispiel wird eine Zahl im Template mit Hilfe der CurrencyPipe formatiert. 10. angular .99 currency Pipes erhalten als Eingabe den Wert vor dem -Symbol und können eine Liste von weiteren Parametern entgegennehmen.

Angular: 3 Tage Intensiv-workshop (Inkl. Zertifikat)

Das Beispiel formatiert die Zahl nun als Euro und zeigt statt des Währungskürzels das €-Symbol. 10.99 currency:'EUR':true Die Erstellung einer eigenen Pipe ist denkbar einfach. Ähnlich wie andere Bestandteile einer Angular Anwendung existiert dazu ein eigener Decorator @Pipe. Die eigene Pipe implementiert dann ein Interface mit dem Namen PipeTransform. Wer aus der objektorientierten Programmierung kommt, weiß dass ein Interface eine definierte Schnittstelle ist.

Im Falle einer Pipe ist das die transform-Methode. Diese Pipe mit dem Namen addTwo addiert zur Eingabe die Zahl 2. import Pipe, PipeTransform from '@angular/core'; @Pipe(name: 'addTwo') export class AddTwoPipe implements PipeTransform transform(number:number) : any return number + 2; Code zur Defintion eigener Pipes. Um unsere Pipe benutzen zu können, müssen wir diese wieder unserem Modul hinzufügen.

import AddTwoPipe from './shared/add-two.pipe'; @NgModule( declarations: [ AppComponent, RedFontDirective, AddTwoPipe ], // ... ) export class AppModule Code zur Nutzung von Pipes. Einer Pipe können jeweils mit : getrennt weitere Parameter übergeben werden. Diese müssen dann in der transform-Funktion angegeben werden. Eine einfache Möglichkeit wiederverwendbare Programmteile auszulagern oder Daten zwischen Komponenten auszutauschen sind Services.

Angularjs Tutorial - Html Tutorial

Dabei werden zwei Arten unterschieden. Globale Services - eine Instanz für alle Komponenten Lokale Service - neue Instanz für jede Komponente Somit können wir, ähnlich wie in AngularJS, Logik in plain JavaScript schreiben und an Komponenten weitergeben - angular lernen. Hiermit können wir unsere Implementierungen der Business-Logik später auch in anderen Frameworks wiederverwenden oder aber auch unsere Services als AngularJS sehr einfach in die Angular Welt bringen.

Ionic Framework Tutorial - hybride Appsangular.de Angular & TypeScript Intensiv-Schulung (Vor-Ort / Remote)angular.de


Top kostenlose Online-Kurse und Tutorials zum Thema „Webentwicklung“ - Im  [September 2020] aktualisiert   Udemyudemy.com 5 Best Practices für erfolgreiche Angular-Anwendungen Host Europehosteurope.de


Somit können wir auch später in der ES5 Version sicherstelle, dass wir den HTTP-Service anhand des Typs korrekt einbinden können. import Injectable from '@angular/core'; @Injectable() export class PizzaService getPizza() return [ "id": 1, "name": "Pizza Vegetaria", "price": 5.99 , "id": 2, "name": "Pizza Salami", "price": 10.99 , "id": 3, "name": "Pizza Thunfisch", "price": 7.99 , "id": 4, "name": "Aktueller Flyer", "price": 0 ] Code zur Defintion eines Services Als nächstes kann der Service in einer Komponente importiert und genutzt werden.

Jetzt kann der Service in die Klasse über die Dependency-Injection geladen werden. import Component from '@angular/core'; import PizzaService from './shared/index'; @Component( selector: 'pizza-root', providers: [PizzaService], template: ` Anzahl an Pizzen: pizzas.length ` ) export class AppComponent public pizzas = []; constructor(private pizzaService: PizzaService) this.pizzas = this.pizzaService.getPizza(); Code für das Importieren und Injecten eines Services Durch die Angabe des Services als Provider der Component, wird beim Erstellen der Komponente eine neue Instanz des Services erzeugt.

More from Framework, Angular, Training

Navigation

Home

Latest Posts

Angular-tutorial Für Einsteiger

Published Sep 22, 20
3 min read