English Version
Die Zeit ist reif für Angular.io 2, kein Weg zurück!
Bitte vergesse alles was Du bisher über Web Entwicklung gelernt hast, alles ist neu und wird anders implementiert als Du es erwarten würdest.
„Jede hinreichend fortschrittliche Technologie ist von Magie nicht zu unterscheiden.“
Arthur C. Clarke
In diesem realen Praxis Projekt Tutorial wirst Du erfahren wie Du eine Angular 2 Web Anwendung baust mit allen Dingen die eine Web Anwendung in der Praxis benötigt. Du wirst erfahren wie Formulare, Eltern Kind Formulare, Menüs, und abhängige Formulare gebaut werden. Wir werden eine Liste von Datensätzen anzeigen und die über eine Detailform anlegen ändern oder löschen können. Der Datenzugriff erfolgt über eine mySQL Datenbank die Serverseitig mit Web Services über PHP mit PDO Objekten angesprochen wird. In dem Detailformular werden wir die Eingabefelder auf Gültigkeit hin überprüfen, die Überprüfung ist zentral gehalten. Zusätzlich erstellen wir eine Abhängigkeit von einer Überprüfung. Siehe Video. Die Überprüfung der Eingabefelder erfolgt mit Tooltip Meldungen, diese haben den Vorteil, dass unser Eingabeformular sehr ruhig ist, es wackelt nicht hin und her wie dies bei auf springenden Fehlermeldungen der Fall ist.
Du bekommst eine Projekt Vorlage für „Dein nächstes großes Projekt“.
Starte jetzt hier und befördere Dein Angular 2 Wissen auf die nächste Ebene ohne Stunden und Tage zu verbringen alles selbst herauszufinden. Auch wenn Du bereits von AngularJS Erfahrung sammeln konntest, wird Dich Angular 2 vor neuen Herausforderungen stellen. Glaub mir, mache nicht den Fehler und investiere unnötig Zeit, hier hast Du bereits alles was Du brauchst. Katapultiere Dich in die Position eine Anwendung zu bauen anstatt herauszufinden wie es funktioniert. Hier ist alles drin was Du brauchst. Alles in allem selbsterklärend nicht zu komplex aber alles drin. Viele bauen Anwendungen aber ohne Zugriff auf wirkliche Daten, hier bekommst Du auch den Datenbankzugriff, was willst Du mehr. Wir arbeiten bereits an dem nächsten Projekt um für Dich die Umsetzung noch einfacher zu machen, wir halten Dich auf dem Laufenden.
Hier in kürze:
Listformular zur Auswahl
Detail Formular anlegen, ändern, löschen
Detailformular mit Eingabefeldüberprüfung mit komfortablen Tooltip
Datenzugriff mit PHP über Web Services
Fangen wir gleich an:
Was brauchen wir
1.0 Prerequisites
Hier kommst Du zu den nötigen Vorbereitungen prerequisites die wir brauchen damit wir mit unserem Projekt starten können.
So zurück wir fangen jetzt an.
Wir werden eine Web Anwendung bauen in der Du Adressen auflisten kannst Details editieren kannst. In der Detailansicht kannst Du Änderungen vornehmen oder auch die Adresse löschen.
1.1 Die Address Liste
Als aller erstes werden wir einige Ordner anlegen um eine bessere Übersicht zu erhalten. Hierzu legen wir folgende Ordner im app Ordner an,
- components
- objects
- services
1.2 Das Address Objekt
Wir erzeugen unser erstes Objekt in Angular in app/Objects/Address.ts.
Im Allgemeinen geben wir den Objekt Namen einen Großbuchstaben als erstes Zeichen im Namen damit wir Objekte in Angular besser erkennen können, alle anderen Dateien werden in Angular klein geschrieben. Bitte denkt daran, wenn die Anwendung in die Produktion auf einen Unix Derivat bereitgestellt wird, ist es wichtig dir richtige groß- und kleinschreibweise zu berücksichtigen, da hier zwischen groß und Kleinschreibung unterschieden wird. Es wäre unglücklich sich erst zu diesem Zeitpunkt darüber Gedanken zu machen. In dem folgenden Beispiel wird dieses Address.ts Objekt groß geschrieben.
Jetzt sind wir erst mal in der Lage Daten in dem Address Objekt zu halten wenn wir die Daten über den Web Service einladen, dies werden wir später implementieren. Dies dient auch für Dich damit Du einen Eindruck über den Umfang der Felder bekommst.
1.3 Das AddressList Formular
Wir starten mit allen verfügbaren Adressen um einen schnellen Start in Angular.io 2 zu bekommen. Nun legen wir eine Datei an app/components/addresslist.component.ts. im Kopf tragen wir einige Import Anweisungen ein. Diese untereile ich in Allgemeine und Projektspezifische Import Anweisungen.
Zusätzlich benötigen wir noch unsere Projekt Import Anweisungen. Die address.component Komponente ist verantwortlich für die Detail Ansicht.
Um in Verbindung mit der Präsentation zu stehen benötigen wir die klassische html Datei. Der Selector definiert den jeweiligen Kontext der angezeigt werden soll. Der Parameter templateUrl verweist auf die html Datei, wird nur template als Parameter Namen eingetragen, dann kann direkt in der Datei der html code eingebaut werden, wir werden dies später noch sehen, dies eignet sich allerdings nur wenn der Umfang des Programm Code nicht überhandnimmt.
Unsere addresslist.component.ts Datei hat einen Konstruktor. Um zu sehen wann dieser Konstruktor ausgeführt wird, haben wir zwei Konsole Informationen hinzugefügt, diese werden angezeigt, wenn im Browser F12 gedrückt wurde und die Log Ausgabe ausgewählt wurde.
Fangen wir gleich an:
Was brauchen wir
1.0 Prerequisites
Hier kommst Du zu den nötigen Vorbereitungen prerequisites die wir brauchen damit wir mit unserem Projekt starten können.
So zurück wir fangen jetzt an.
Wir werden eine Web Anwendung bauen in der Du Adressen auflisten kannst Details editieren kannst. In der Detailansicht kannst Du Änderungen vornehmen oder auch die Adresse löschen.
1.1 Die Address Liste
Als aller erstes werden wir einige Ordner anlegen um eine bessere Übersicht zu erhalten. Hierzu legen wir folgende Ordner im app Ordner an,
- components
- objects
- services
1.2 Das Address Objekt
Wir erzeugen unser erstes Objekt in Angular in app/Objects/Address.ts.
Im Allgemeinen geben wir den Objekt Namen einen Großbuchstaben als erstes Zeichen im Namen damit wir Objekte in Angular besser erkennen können, alle anderen Dateien werden in Angular klein geschrieben. Bitte denkt daran, wenn die Anwendung in die Produktion auf einen Unix Derivat bereitgestellt wird, ist es wichtig dir richtige groß- und kleinschreibweise zu berücksichtigen, da hier zwischen groß und Kleinschreibung unterschieden wird. Es wäre unglücklich sich erst zu diesem Zeitpunkt darüber Gedanken zu machen. In dem folgenden Beispiel wird dieses Address.ts Objekt groß geschrieben.
Jetzt sind wir erst mal in der Lage Daten in dem Address Objekt zu halten wenn wir die Daten über den Web Service einladen, dies werden wir später implementieren. Dies dient auch für Dich damit Du einen Eindruck über den Umfang der Felder bekommst.
1.3 Das AddressList Formular
Wir starten mit allen verfügbaren Adressen um einen schnellen Start in Angular.io 2 zu bekommen. Nun legen wir eine Datei an app/components/addresslist.component.ts. im Kopf tragen wir einige Import Anweisungen ein. Diese untereile ich in Allgemeine und Projektspezifische Import Anweisungen.
Zusätzlich benötigen wir noch unsere Projekt Import Anweisungen. Die address.component Komponente ist verantwortlich für die Detail Ansicht.
Um in Verbindung mit der Präsentation zu stehen benötigen wir die klassische html Datei. Der Selector definiert den jeweiligen Kontext der angezeigt werden soll. Der Parameter templateUrl verweist auf die html Datei, wird nur template als Parameter Namen eingetragen, dann kann direkt in der Datei der html code eingebaut werden, wir werden dies später noch sehen, dies eignet sich allerdings nur wenn der Umfang des Programm Code nicht überhandnimmt.
Unsere addresslist.component.ts Datei hat einen Konstruktor. Um zu sehen wann dieser Konstruktor ausgeführt wird, haben wir zwei Konsole Informationen hinzugefügt, diese werden angezeigt, wenn im Browser F12 gedrückt wurde und die Log Ausgabe ausgewählt wurde.
1.4 Die AddressList.html Datei
Wir wollen einige Adressen in unserer Liste anzeigen, hierzu benötigen wir unsere Präsentation app/components/addresslist.component.html.
Zu dem Programm Code hinter der maskierten Ebene kommen wir später.
1.5 Das Address Detail Formular
Jetzt wollen wir ein wenig leben in unsere Anwendung bringen und implementieren unser Detailformular.
1.6 The Address Component
So let start create new file address.component.ts in the app/components folder. This file is the code behind file for our detail form. We need first some imports, Component is responsible for the component itself, and Http will be need later on, when we talk to the web service to retrieve data. For validation we need the complete pack of imports Form group, form builder, Validators and Form control. To keep track over the field modification we use the code based object. When something is changed in the form on the html side, the code behind get an event and check the validation of current field. In case that the field is invalid we keep track in the code behind, because the field is available by binding in the code behind and can be checked. If a field is not in the right condition we can add a validation message for the current situation. Is it required and the field is blank and touched we show the required information. When the length is not in the expected format the specific length validator will do his job.
Im nächsten Bild sehen wir wie die Validierung in der Realität aussieht. Wir benutzen hierzu Tooltip Texte.
1.7 Das Address Detail Formular in Action
1.8 Angular 2 Validation Tooltip live example
In diesem Live Beispiel sieht man deutlich die Änderung der Validierungsnachricht als Tooltip Meldung in Angular.io 2. Der Text wird dynamisch in Abhängigkeit des aktuellen Status des Eingabefeldes hinzugefügt. Zusätzlich ist es in realen Projekten immer wieder so, dass Felder in Abhängigkeit validiert werden müssen und sich die Validierungsregel in Abhängigkeit eines anderen Feldes während der Laufzeit ändert. Hier haben den Firmennamen Eingebaut, wird in der Anrede Firma ausgewählt, dann wird der Firmenname zum Pflichtfeld, ist keine Firma ausgewählt, dann wird die Pflichtfeld Eigenschaft wieder ausgeschaltete. Hier können wir im Client bereits eine Validierung durchführen, ohne die Prüfung auf der Server Seite durchzuführen, hiermit ersparen wir uns einen unnötigen Round Trip
1.8 Die app.modules.ts Datei
Für die Projekt Referenzen benötigen wir zusätzliche Import Anweisungen:
Nun kommen wir zurück zu unserem ersten Address Object, hier müssen wir den Service hinzufügen. Zur Implementierung des Services kommen wir später.
Objekt Dateien werden in app.modules.ts nicht eingetragen.
Wieder müssen wir den richtigen Kontext definieren der zur Anzeige gebracht werden soll, hierzu dient wieder der Selector mit Namen Address wie auch sein korrespondierendes Objekt. Unter templateUrl finden wir wieder die html Datei.
Nun kommen wir zurück zu unserem ersten Address Object, hier müssen wir den Service hinzufügen. Zur Implementierung des Services kommen wir später.
Wieder müssen wir den richtigen Kontext definieren der zur Anzeige gebracht werden soll, hierzu dient wieder der Selector mit Namen Address wie auch sein korrespondierendes Objekt. Unter templateUrl finden wir wieder die html Datei.
Um einen Datenaustausch mit dem Detail Formular zu bekommen benötigen wir Eingabe und Ausgabe Parameter wie in einer Call Enter Liste von Eigenschaften. Um Daten zu erhalten benötigen wir wieder unseren Address Service, für die Validierung die unser Validierung Objekt.
Wie Du auf der rechten Seite sehen kannst, sind die Zeilennummern unterbrochen, einige fehlen. Um die Sache hier nicht zu komplex zu gestalten, haben wir hier diese Zeilen entfern, im Detail kommen wir später noch hierzu. Wie bereits angesprochen haben wir die @Input und @Output Parameter um mi der Komponente zu kommunizieren. Dies dient hierzu der Komponente Daten zu übergeben die von ihr verändert werden soll, wurden Änderungen durchgeführt, soll die rufenden Komponente die Daten wieder zurück erhalten um diese dann entsprechend zu verarbeiten.
Wird das Detail Formular erzeugt wird, dann erstellt der Form Builder alle Felder die angezeigt werden sollen, dieser Programmausschnitt zeigt exemplarisch wie die Implementierung für den Form Builder erfolgen muss. In diesem Ausschnitt ist die ID disabled, Pflichtfeld wäre hier nicht nötig.
Zuerst müssen wir eine FromGroup bauen, diese ist auch im Konstruktor enthalten. Der Formbuilder hält alle Eingabefelder in seinem Bauch, um dies zu veranschaulichen ist der entsprechende html Programm Code hier aufgeführt. Für die Valisdierung erhält der Formbuilder de Validierungsobjekte
Um die Daten anzeigen zu können müssen wir die html Datei anlegen, hierzu erzeugen wir die Datei app/components/address.components.html.
Der Code Ausschnitt zeigt wie jedes Feld zu implementieren ist.
1.9 Die address.service.ts Datei
Jetzt ist die Address.Service Datei dran, hierzu legen wir die app/services/address.service.ts Datei an. Um die Detailimplementierung kümmern wir uns später, wichtig ist daran zu denken, dass alle neuen Dateien in die app.modules.ts eingetragen werden.
1.10 Die address.service.ts file als import in app.module.ts
Jetzt ist der Service der Anwendung bekannt gemacht worden. Bitte die Objektdatei Address.ts nicht in app.module.ts eintragen, diese wird da nicht benötigt.
1.11 Die Datenbank Anweisung
Für einen schnellen Start ist alles vorbereitet, der SQL um die Datenbank zu erstellen, Tabelle anlegen und mit Daten füllen. Somit bleibt unser Formular auch nicht leer.
1.12 Die Daten
Um mit der Serverseite zu kommunizieren zu können brauchen wir einen Web Service und PHP Programme die jeweils die gewünschten Aktionen durchführen. Hierzu empfehle ich die Installation des Apache mit XAMPP, da ist alles drin was man hierzu braucht. Eine schöne Bedienoberfläche mit einem einheitlichen Zugriff.
1.12 Es kommen keine Daten
Yeeeah, alles ist implementiert und es kommen doch keine Daten. Unser localhost läuft aber liefert keine Daten. Startest Du die Seite direkt über index.html dann sind die Daten plötzlich da, woran liegt dies, npm und Deine PHP Dateien laufen auf unterschiedlichen Verzeichnissen oder Servern. Dazu kannst Du den Verzeichnispfad in Apache konfigurieren. In unserem Beispiel haben wir alles in ein eigenes Verzeichnis gepackt 30SecondsDevelop. Schaue bitte in der httpd.conf DocumentRoot „D:/xampp/htdocs/30SecondsDevelop“. Läuft dein Backend auf einem anderen Server, dann ist das Settings Objekt die richtige Antwort für diese Aufgabe.
1.13 Keine Daten – das Settings Object ist Dein Freund
1.14 PHP Web Service
Für die PHP Dateien haben wir wieder einen eigenen Ordner angelegt, /php/address/ .Erstelle bitte folgende Dateien: address_create.php, address_delete.php, address_read.php, address_readlist.php address_update.php. Mit diesem Paket an Dateien sind wir in der Lage alle Aufgaben abzudecken. Diese Dateien sind Deine Vorlage für Dein nächstes „Your New Big Project“
1.15 Benutzerinformation mittels Toast
Jedes Formular bekommt ein eigene Toaster Meldung, für die Addressliste ist ein „erfolgreich geladen“ Toast oder im Fehlerfall eine Fehlermeldung verfügbar. Auch zeigen wir einen Toast wenn die Detailseite die Daten aktualisiert oder gelöscht hat.
Der komplette Quellcode – als Vorlage für Dein nächstes „Your New Big Project“
Du kannst den kompletten Quellcode bekommen für dieses Real World Projekt. Wir haben diese Tutorial erstellt um eine Programmiervorlage zu schaffen um Dir den Einstieg in Angular.io 2 in schnellen Schritten zu ermöglichen, Du wirst die Umsetzung in Angular wie in einem Fahrstuhl erleben der Dich in die Praxis mit Angular 2 herein katapultiert, in Dein Angular 2 Projekt.
Hier noch einmal der Inhalt
- Kompletter laufähiger Programmcode
- mySQL Datenbanksripte
- PHP Datei zum Erzeugen einer Adresse
- PHP Datei zum Lesen der Adresse
- PHP Datei zum Aktualisieren der Adresse
- PHP Datei zum Lesen einer Adressliste
- PHP Datei zum Löschen der Adresse
- AddressList Formular
- AddressDetail Formular
- Komplettes styleguide
- Web Service package
- Dynamic Tooltip validation package
- Zentralisierte Validation Nachrichten
- Reaktive Form
- Formbuilder
