Angular Schule → Angular-schulungen Für Ihr Team

Published Sep 15, 20
3 min read

Angularjs Tutorial - Html Tutorial



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

🥇 16 Angular Schulung (En) + Online Virtual Classroom Eduvision

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.

Eduvision Intensiv-schulung (3 Tage)

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.

Die 16 ultimativ besten WordPress Themes 2020 ? [Inkl. Deutsch]search-one.de Angular Camp Das 360°-Intensivtraining mit Manfred Steyerangular-camp.de


Ionic Framework Tutorial - hybride Appsangular.de Ionic Framework Tutorial - hybride Appsangular.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.

Navigation

Home