Web-app Tutorial: Eine Anwendung Mit Angular Bauen

Published Oct 03, 20
3 min read

Web-app Tutorial: Eine Anwendung Mit Angular Bauen



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 lernen.99 currency Pipes erhalten als Eingabe den Wert vor dem -Symbol und können eine Liste von weiteren Parametern entgegennehmen.

Angular Schule → Angular-schulungen Für Ihr Team

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.

Erstellen Der Benutzeroberfläche Der Angular-app Mit Eduvision

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 tutorial . 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.

Git Schulung – 3 Dinge, die peinlich sind als Howto Tutorialblog.nevercodealone.de Einstieg in Angular: Das sind die wichtigsten Toolst3n.de


5 Best Practices für erfolgreiche Angular-Anwendungen   Host Europehosteurope.de Wie kann man ein Webdesigner werden – kostenlose Webdesigner Ausbildung und Kurse!motocms.com


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.

Navigation

Home

Latest Posts

Angular-tutorial Für Einsteiger

Published Oct 09, 20
3 min read