Teil 5: Durchstarten – eine App mit dem JavaScript Framework Angular

Web-App Tutorial: Eine Anwendung mit Angular bauen
Keine Kommentare

Wiederverwendung wird auch in der Webprogrammierung ganz groß geschrieben. Eine nahezu unüberblickbare Auswahl von Bibliotheken und Frameworks bemühen sich um die Aufmerksamkeit des Entwicklers. In ein solches Framework muss man sich sorgfältig einarbeiten, um es dann effektiv anwenden zu können. Nach einer allgemeinen Einführung wollen wir es mit Angular versuchen. Hat man die Funktionsweise und das Prinzip verstanden, dann gelingt ggf. auch der spätere Wechsel.

Auf dem Weg zum Lernen neuer Technologien und Konzepte für moderne clientseitige Webapplikationen sind wir schon ein gutes Stück vorangeschritten. Ein Blick in unsere Agenda zeigt, was heute auf der Tagesordnung steht.

Moderne Webprogrammierung: Eine systematische Einführung

  • Teil 1: Motivation – om Fat-Client zur modernen Web-App, Architektur, HTML5
  • Teil 2: Seiten gestalten – CSS3/Sass
  • Teil 3: Funktionalität realisieren mit JavaScript
  • Teil 4: TypeScript – die typsichere Variante von JavaScript
  • Teil 5: Durchstarten – Eine App mit dem JavaScript Framework Angular
  • Teil 6: UI-Gestaltung, z. B. mit Ionic
  • Teil 7: Mobile mit Cordova, Desktop mit Electron

Fassen wir kurz für unsere Leser, die erst jetzt zu unserem Kurs stoßen, zusammen, was bisher geschah. Zunächst haben wir uns die technologische Basis für moderne Webapplikationen angesehen. Die Architektur beruht auf einer clientseitigen Ausgestaltung der Architektur. Die technologische Basis bildet HTML5 für die Gestaltung der Seitenstruktur (Teil 1); damit ist die Aufgabe von HTML5 auch schon erledigt. Um ausdruckstarke Seiten zu erstellen, bietet HTML5 eine Reihe von neuen, spezifischen Tags. Das Design, d. h. das Layout und die Gestaltung einer Seite, werden dagegen in CSS3 vorgenommen (Teil 2). Üblicherweise werden HTML5 und CSS3 nicht in einer Datei vermischt, sondern sauber voneinander getrennt. Die anzuwendende CSS3-Datei wird im betreffenden HTML5-Dokument referenziert und damit bekannt gemacht. Mit HTML5 und CSS3, den absoluten Basistechnologien für das Web, können Sie Webapplikationen erstellen, strukturieren und nach Ihren Vorstellungen gestalten. Auch wenn Sie serverseitige Applikationen bauen, zum Beispiel auf Basis von PHP, brauchen Sie beide Technologien. Um Dynamik auf Clientseite hinzuzufügen, d. h. im Browser, müssen Sie JavaScript einsetzen (Teil 3). JavaScript ist die Skriptsprache, die heutzutage durch alle modernen Webbrowser verarbeitet werden kann. Sie ist dabei plattform- und geräteunabhängig, d. h. nahezu alle Browser (Firefox, Safari, Edge …) auf allen aktuellen Betriebssystemen (Windows, Linux, macOS, Android, iOS …) und allen Geräteklassen (Desktop, Mobil, Tablet …) können JavaScript ohne weitere Zusätze direkt verarbeiten. Mit Hilfe von JavaScript kann man für Aktion und Reaktion sorgen, also etwa für die Verarbeitung von Nutzeraktionen – Daten können dynamisch ausgewertet, Grafiken auf eine Zeichenfläche im Browser ausgegeben werden. Mit der Hilfe spezieller APIs kann man bspw. die Ortungsdienste nutzen, den Batteriestatus bei mobilen Geräten abfragen u. v. m.

JavaScript selbst wird von den Browsern in unterschiedlichen Sprachstandards unterstützt. Neue Features werden dabei noch nicht von allen Browsern angeboten, sodass man bei der Programmierung ein eher defensives Vorgehen wählen sollte, um eine möglichst breite Kompatibilität zu erreichen. Ebenso merkt man JavaScript seinen ursprünglichen Charakter einer Skriptsprache bis heute deutlich an. Moderne und häufig eingesetzte Sprachfeatures wie die Objektorientierung sind nicht immer leicht umsetzbar. Diese „Missempfindungen“, meist in Kombination mit einer vermissten Typisierung der Sprache, haben oft Wechsler aus einer anderen modernen Hochsprache wie Java oder C#. Die Lösung dafür kann der Einsatz von TypeScript (Teil 4), einem Superset von JavaScript sein. TypeScript bietet eine vernünftige Syntax für die objektorientierte Programmierung, den Einsatz von Datentypen und weitere Sprachmerkmale moderner Programmiersprachen. TypeScript wird während des Entwicklungsvorgangs mit Hilfe eines Transpilers (eine Sonderform eines Compilers) in JavaScript übersetzt. Dabei kann der JavaScript-Standard angegeben werden, wodurch man für eine maximale Kompatibilität mit allen zum Einsatz kommenden Browsern sorgen kann. Im Endeffekt bekommt der Browser auch nur JavaScript zur Ausführung angeboten, sodass keine Plug-ins oder Erweiterungen notwendig sind. Es bleibt also auf Seiten des Clients (Browsers) weiterhin bei dem Triple aus HTML5, CSS3 und JavaScript. Aus Sicht des Entwicklers kommt noch positiv hinzu, dass jeder gültige JavaScript-Code auch innerhalb von TypeScript verarbeitet wird, d. h., JavaScript-Bibliotheken und APIs von Drittanbietern kann man stets ohne Einschränkungen verwenden.

Im Grunde hätte man jetzt alles an Bord, um Webapplikationen jeder Größe und Komplexität zu erstellen. Der Nachteil bestände jedoch darin, dass man mit jedem neuen Projekt das Rad im sprichwörtlichen Sinn neu erfinden müsste. Moderne Softwareentwicklung lebt intensiv von Wiederverwendung. Gerade Webapplikationen auf Basis von JavaScript machen davon sehr regen Gebrauch. Für fast alle auftretenden Anforderungen und Programmierprobleme stehen Bibliotheken und Frameworks zur Verfügung. Sie werden über zentrale Paketmanager – wie npm – angeboten und können mit einem einzigen Befehl in bestehende Projekte zur Verwendung eingebunden werden. Der Einsatz von Bibliotheken und Frameworks ist das Thema dieses Teils der Artikelserie. Neben den theoretischen Grundlagen werden wir uns die konkrete Verwendung anhand des Frameworks Angular ansehen. Daran wollen wir die grundsätzliche Funktionsweise studieren und eine erste Beispielapplikation implementieren.

Bibliotheken und Frameworks als Basis für die Wiederverwendung

Moderne Softwareentwicklung ist dadurch gekennzeichnet, dass man Code für bekannte Probleme und Anforderungen möglichst nicht neu schreibt, sondern wiederverwendet. Open Source hat gerade im Umfeld der Webprogrammierung dazu geführt, dass man vor der Erarbeitung einer eigenen Lösung nach einer generischen Bibliothek oder für umfassendere Fragen nach einem Framework Ausschau hält. Der Aufwand kann damit in vielen Fällen erheblich reduziert werden, denn man kann auf erprobte Lösungen zurückgreifen, die Fehlerrate wird sinken und die eigenen Ressourcen können in die spezifische Problemstellung investiert werden.

Was ist nun der Unterschied zwischen einer Bibliothek und einem Framework? In der Praxis wird zwischen beiden Grundelementen der Softwareerstellung und -wiederverwendung nicht immer exakt getrennt.

Bibliotheken

Ein Entwickler spricht von einer Bibliothek, ein anderer von einem Framework. Grundsätzlich kann man sagen: Eine Bibliothek ist eine Ansammlung von Funktionen, Services usw. – meist in Form von generischen Klassen, die durch andere Programme genutzt werden können. Für die Verwendung einer Bibliothek muss man diese in das eigene Projekt einbinden bzw. die zu nutzenden Elemente importieren. Wichtig: Die Bibliothek kann weitgehend ohne Einschränkungen durch das nutzende Programm verwendet werden. Sie macht i. d. R. keine Vorgaben bzw. Einschränkungen bezüglich des Aufbaus des Programms bzw. der Systemarchitektur. Da man meist nur wenige Funktionen/Services einer Bibliothek verwendet, wird die Größe des Quellcodes mehr zunehmen, als wenn man die Funktion eigenständig neu implementiert hätte. Dennoch werden die Vorteile der Nutzung einer Bibliothek die Nachteile in den meisten Fällen übersteigen. Bibliotheken können heruntergeladen und zum Beispiel manuell in die bestehende Projektstruktur eingebunden werden. Für die Aktualisierung ist man in diesem Fall vollständig selbst verantwortlich. Der Programmierer nutzt eine Bibliothek stets wie eine Blackbox, d. h., er muss sich an die vorgegebenen Konventionen zur Kommunikation mit der Schnittstelle halten. Wie die Bibliothek intern arbeitet, ist zweitrangig und man muss sich nicht unbedingt damit beschäftigen.

Im Umfeld der Webprogrammierung werden Bibliotheken über Paketmanager wie npm eingebunden. Dazu werden diese über zentrale Repositories bereitgestellt und auch ein Update kann unproblematisch darüber erledigt werden. Viele Services werden heute als nutzbare Dienste über die Cloud in Form von RESTful APIs angeboten und können dann durch das Internet genutzt werden.

Frameworks

Ein Framework geht über die Funktion einer Bibliothek hinaus. Es bietet ein

generisches Lösungskonzept für eine bestimmte Art von Applikationen. Die eigene Applikation wird dazu in den Rahmen des Frameworks integriert. Meist gibt das Framework eine bestimmte Struktur und Architektur vor, an die man sich halten muss, wenn man das Framework verwenden möchte. Im Gegensatz zu einer Bibliothek wird der eigene Code über Callback-Methoden vom Framework aufgerufen. Allerdings werden auch beim Einsatz eines Frameworks Bibliotheken genutzt. Sowohl der Quellcode der eigenen Applikation als auch das Framework selbst nutzen Webbibliotheken. Der Unterschied zwischen einem Framework und einer Bibliothek ist in Abbildung 1 illustriert.

Es gibt eine riesige Menge von Bibliotheken und Frameworks für die Nutzung von JavaScript beim Erstellen von modernen Webapplikationen. Tabelle 1 enthält eine Auswahl bekannter Frameworks und eine Kurzbeschreibung.

Bibliothek/Framework Kurzbeschreibung
Angular Framework zum Erstellen von Webapplikationen. Es ist ein clientseitiges JavaScript-Webframework zur Erstellung von Single-Page-Webanwendungen nach dem Model-View-ViewModel-Muster. Die Softwareentwicklung und das Testen von Komponenten können damit vereinfacht werden. Programmiert wird in TypeScript.
jQuery jQuery ist eine freie JavaScript-Bibliothek, die Funktionen zur DOM-Navigation und -Manipulation zur Verfügung stellt. Die Bibliothek bietet folgende Funktionen: die Elementselektion im Document Object Model, die Document-Object-Model-Manipulation, ein erweitertes Event-System, diverse Hilfsfunktionen, Animationen, Effekte und Ajax-Funktionalitäten. Durch Plug-ins kann sie erweitert werden, etwa durch jQuery UI für die einheitliche Gestaltung von Benutzeroberflächen oder jQuery Mobile für Apps auf mobilen Geräten.
Vue.js Vue ist ein Framework für die Erstellung von Benutzeroberflächen. Im Gegensatz zu anderen Frameworks ist es schrittweise adaptierbar. Die Core-Bibliothek konzentriert sich zum Beispiel nur auf die Ansichtsebene und kann leicht in andere Bibliotheken oder vorhandene Projekte integriert werden. Andererseits ist man mit Vue.js auch in der Lage, anspruchsvolle Single-Page-Anwendungen zu realisieren.
React.js React ist eine Bibliothek, die ein Grundgerüst für das User Interface zur Verfügung stellt. Sie ist komponentenbasiert, wobei die Komponenten selbst hierarchisch aufgebaut werden. React bildet die Basis für Single-Page-Webanwendungen, kann jedoch auch mittels Node.js serverseitig eingesetzt werden.
Aurelia.js Bei Aurelia handelt es sich um ein Framework, bei dessen Entwicklung großer Wert darauf gelegt wurde, Komplexität zu reduzieren. Aurelia verwendet das MV*-Applikations-Entwurfsmuster.

Tabelle 1: Ausgewählte JavaScript-Bibliotheken und Frameworks

Sehr häufig lesen und hören Sie von Angular. Angular ist inzwischen ein ausgereiftes Framework für eine Vielzahl von Webapplikationen. Es ist das Thema der kommenden Textabschnitte.

Angular

Was brauchen wir? Sofern noch nicht auf Ihrem Entwicklungsrechner vorhanden, installieren Sie Node.js und npm und einen Editor bzw. eine integrierte Entwicklungsumgebung, zum Beispiel Visual Studio Code. Die aktuell installierten Versionen erfragen Sie über die Kommandozeile mit folgenden Befehlen:

node -v
npm –v

Danach installieren wir bereits das Web-Framework Angular. Auch dazu bedarf es nur des Kommandos npm install -g @angular/cli.

Wir können an dieser Stelle bereits die erste Angular-App erzeugen. Erstellen Sie dazu ein passendes Projektverzeichnis, begeben Sie sich dann auf Ebene der Kommandozeile und erstellen Sie das Gerüst der App wie folgt mit dem Befehl ng new MyApp. Beantworten Sie die Frage, ob Sie ein Routing erstellen wollen zustimmend und wählen Sie CSS als Stylingsprache. Einige Augenblicke später sollten alle Dateien und Abhängigkeiten zum Projekt erzeugt sein. Starten Sie Ihren Editor – in unserem Fall Visual Studio Code – und öffnen Sie das Projekt. Vielleicht sind Sie etwas überrascht, wie viele Dateien und Ordner angelegt wurden (Abb. 2). Wie Sie jedoch sehen werden, wird sich die Arbeit hauptsächlich auf den App-Ordner konzentrieren.

Abb. 2: Die Ordnerstruktur einer Angular-App

Abb. 2: Die Ordnerstruktur einer Angular-App

Wir sind natürlich mehr als gespannt und möchten das Ergebnis sofort begutachten. Aus der Kommandozeile starten Sie die App mittels ng serve –open und öffnen auch gleichzeitig den Standardbrowser des Systems. Dazu wird die App kompiliert und der lokale Server gestartet. Über http://localhost:4200/ greifen Sie auf die App aus Ihrem Browser zu. Das Ergebnis sehen Sie in Abbildung 3.

Abb. 3: Die gestartete Angular-App

Abb. 3: Die gestartete Angular-App

Es ist Zeit für einige Erläuterungen zur Projektstruktur einer Angular-App. Angular verwendet einen komponentenbasierten Aufbau, das heißt, die gesamte Applikation wird als Komponente aufgefasst. Auf oberster Ebene gibt es die sogenannte Top Level Component. Diese besteht aus weiteren Komponenten usw. So entsteht eine Hierarchie, auch als Komponentenbaum bezeichnet wird. Im Wesentlichen besteht die Anwendung aus den beiden Dateien app.module.ts und app.component.ts im app-Ordner. Zusätzlich dient die Datei main.ts als Startpunkt der Applikation. Die Anwendungslogik wird in der Datei app.component.ts definiert (Listing 1).

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  titel='My App';
}

Es handelt sich hierbei um TypeScript und an dieser Stelle liegt die erste Angular-Komponente vor. Diese besteht aus zwei Teilen:

  • Aus dem Komponentencode, der durch eine TypeScript-Klasse repräsentiert wird.
  • Aus dem Decorator (@Component), der die Konfiguration und die Anmeldung der Komponente beim Angular Framework übernimmt.

Mittels import { Component } from ‚@angular/core‘; importieren wir die Klasse Component zur eigenen Verwendung, dann kommen wir auch schon zum Decorator @Component, der hier wie folgt definiert ist:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

Mit Hilfe eines Decorators werden Klassen um weitere Informationen, d. h. um Metadaten erweitert. Über die Eigenschaft selector zeigen Sie an, an welcher Stelle die Komponente verwendet werden soll. Über die template-Eigenschaft konfigurieren Sie schließlich, dass bei der Instanziierung der Komponente das hinterlegte Template gerendert werden soll. Ebenso verweisen Sie auf die zugehörige CSS-Datei für das Styling der Komponente. Die eigentliche Komponente wird nun in Form einer ECMAScript-2015-Klasse, d. h. mit TypeScript definiert. Im Moment gibt es nur eine einzige Eigenschaft: titel. Damit haben Sie eine erste Komponente vollständig definiert bzw. von Angular erstellen lassen.

JavaScript Days 2019

JavaScript Testing in der Praxis (Teil 1 + 2)

mit Dominik Ehrenberg (Crosscan) und Sebastian Springer (MaibornWolff)

Fortgeschrittene schwarze Magie in TypeScript

mit Peter Kröner (‚Webtechnologie-Erklärbär‘)

Kommen wir zur Datei app.module.ts, dem Applikationsmodul. Den Quellcode sehen Sie in Listing 2.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Nach den Import-Anweisungen folgt der Decorator @NgModule. Hier findet eine deklarative Konfiguration eines Angular-Moduls statt. Mit Hilfe von Modulen werden in der Angular-Plattform zusammengehörige Komponenten und Services gekapselt. Dabei besteht jede Angular-Anwendung aus mindestens einem Modul, nämlich konkret dem Applikationsmodul. Folgende Angaben sind verpflichtend:

  • Die Einstiegskomponente in die Applikation: bootstrap: [AppComponent]
  • Die Angabe, welches Zielsystem angesprochen werden soll: imports: [BrowserModule]. In diesem Fall möchten wir die Applikation in einem Webbrowser laufen lassen. Wir verwenden vorerst nur diesen Applikationstyp. Wir haben schon darauf hingewiesen, dass mit Angular auch Applikationen für andere Systeme, wie etwa mobile Geräte, möglich sind. In diesem Fall müssten wir andere Module an dieser Stelle importieren. Wir stellen diese Möglichkeiten hier jedoch ausdrücklich zurück.
  • Abschnitt declarations: Alle hier aufgeführten Komponenten sind im gesamten Applikationsmodul sichtbar und können von jeder anderen Komponente verwendet werden. Wir haben im Moment nur eine Komponente namens AppComponent.

Wenn Ihnen diese Konfigurationen zunächst etwas verwirrend, vielleicht sogar übertrieben vorkommen, dann liegt es daran, dass Sie im Moment nur eine Komponente haben. Sobald die Webapplikationen umfassender werden, wird sich die Stärke einer zentralen Konfiguration schnell bestätigen.

Schreiten wir weiter durch die Dateien des Angular-Projekts und kommen wir zur Datei main.ts (Listing 3).

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

Hier wird der Start der Applikation definiert. Der Browser möchte zum Schluss eine HTML5-Datei verarbeiten. Diese trägt auch hier den Namen index.html (Listing 4).

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Innerhalb des <body>-Tags wird der sogenannte Bootstrap-Vorgang ausgelöst. Konkret:

<app-root></app-root>

Die selector-Konfiguration der AppComponent-Komponente sorgt ihrerseits dafür, dass an dieser Stelle die Komponente gerendert wird. Der <body>-Tag wird nach erfolgreichem Laden der Komponente ersetzt. Achten Sie darauf, dass innerhalb der index.html-Datei kein <script>-Tag für die Einbindung von JavaScript notwendig ist. Auch die Script-Anweisung wird gewissermaßen erst während des Builds der Anwendung dynamisch in die HTML-Datei eingefügt.

Das war sicherlich eine sehr umfassende Version eines „Hello World“-Beispiels. Nun wollen wir mit einer echten kleinen Applikation starten.

To-do-Liste

Die Überschrift verrät es bereits: es geht um das simple Beispiel einer To-do-Liste. Wir können an diesem einfachen Beispiel einige wichtige Vorgehensweisen erklären. Schließen Sie die bisherige Testapplikation in Visual Studio Code, begeben Sie sich dann auf die Kommandozeile und legen Sie ein neues Angular-Projekt an. Wir nennen es MyToDo. Das Projekt erstellen wir also mit dem Befehl ng new MyToDo. Danach starten wir die Applikation via ng serve. Öffnen Sie nun das Projekt (bzw. die Ordnerstruktur) in Visual Studio Code. Los gehts mit den Änderungen.

Wir brauchen zunächst eine minimale View. Diese definieren wir in der HTML-Datei der Komponente. Es genügen uns ein Eingabefeld und ein Button, also:

<input type="text" placeholder="Eintrag hinzufügen"/>
<button >Hinzufügen</button>

Hinweis: Bitte binden Sie beide Tags nicht, wie in HTML üblich, in ein <Form>-Tag ein. Ansonsten wird die Seite fälschlicherweise nach dem Betätigen des Buttons neu geladen. Das ist bei einer Single-Page-Applikation nicht gewünscht. Sie werden jetzt sehen, wie Sie die Daten aus der View (html) an den Controller (ts) bekommen. Dazu ermöglicht Angular es Ihnen, für jedes Element im DOM-Baum eine lokale Variable zu deklarieren. Die Deklaration einer Variablen erfolgt dabei über ein vorangestelltes #-Zeichen. Diese Variable steht Ihnen danach innerhalb des gesamten Templates (HTML-Datei) zur Verfügung. Definieren wir eine Variable für den input-Tag:

<input #item type="text" placeholder="Eintrag hinzufügen"/>

Die Variable haben wir mit item bezeichnet, also hier #item. Nun müssen wir auf einen Klick auf den Button reagieren, was mit Event Binding passiert. Die allgemeine Syntax lautet:

(eventName)="NameDesEvents"

Und konkret für den Button sieht das dann wie folgt aus:

<button (click)="addToDo(item.value)">Hinzufügen</button>

Wir definieren also ein Event addToDo und als Parameter übergeben wir den Wert der lokalen Variable item mittels item.value. An dieser Stelle sind wir in der View zunächst fertig und wechseln in den Controller der Komponente, d. h. in die zugehörige TypeScript-Datei. Die Klasse AppComponent erweitern wir wie folgt:

export class AppComponent {  

  toDoArray:Array<string>=[];

  addToDo(item:string){
    this.toDoArray.push(item);
  }
}

Wir definieren ein Array für die Aufnahme der Listeneinträge und das Event addToDo. Dieses nimmt den Wert über den Parameter item entgegen und fügt diesen der Liste hinzu. Im Übrigen muss der Name des Parameters im Controller und in der View nicht übereinstimmen. Sie können statt item im Controller zum Beispiel auch value verwenden. Zusammengefasst: Der Wert, der in dem Inputfeld des Formulars eingegeben wurde, ist nun durch den Weg über die lokale Variable in der Klasse AppComponent gelandet und kann dort verarbeitet werden.

Daten müssen jedoch auch wieder vom Controller in die View übertragen werden. Dazu wechseln wir wieder in die View (HTML-Datei) und erstellen eine Liste mittels <ul>-Tag. Die einzelnen Elemente der Liste werden über <li>-Tags generiert. Da man sehr häufig Listen von Daten darstellen muss, gibt es in Angular die sogenannte *ngFor-Direktive. Mit deren Hilfe kann man über die einzelnen Elemente einer Liste iterieren und zwar direkt in der View. Wie sieht das genau aus? Relativ einfach, jedoch für den Neueinsteiger in Angular durchaus eindrucksvoll:

<div class="data">
    <ul>
      <li *ngFor="let item of toDoArray">{{item}}</li>
    </ul>
  </div>

Wir iterieren über jedes Element der Liste toDoArray und geben den Wert der Liste über item aus. Dies erfolgt mit Hilfe der Angular-Direktive *ngFor. Im Browser können Sie nun einen Eintrag in das Formularfeld schreiben und mit Bestätigung auf den Button wird dieser in das Array geschrieben und als Liste wieder ausgegeben. Dass es funktioniert, beweist ein Blick auf Abbildung 4.

Abb. 4: „ToDo“-Liste mit Angular

Abb. 4: „ToDo“-Liste mit Angular

Natürlich sieht das Design alles andere als ansprechend aus. Darum haben wir uns jetzt auch in keiner Weise gekümmert. Es ging lediglich darum, wie wir Daten aus der View an den Controller übertragen, diese dort verarbeiten und sie wieder ausgeben. Ebenso fehlt noch jegliche weitere Funktionalität, zum Beispiel das Löschen von Items.

Angular bietet hier also eine Reihe von Features und damit einen umfassenden Rahmen für anspruchsvolle Webqapplikationen. Dazu gehören u. a.:

  • Ein Rahmen zur Strukturierung von Webapplikationen
  • Die Umsetzung des MVC-Patterns zur Trennung der Schichten
  • Daten- und Event-Bindung
  • Erweiterungen in Form von Angular-Direktiven wie *ngFor

Im Übrigen reagiert Angular sofort mit einer Neuübersetzung der Quellen und einem Reload im Browser, wenn Sie Änderungen am Quellcode vornehmen. Das beschleunigt die Entwicklung erheblich. Wir konnten hier nicht viele Features von Angular beschreiben, dennoch zeigt bereits das sehr einfache Beispiel, wie viel Unterstützung man durch ein Framework bei der Entwicklung einer Webapplikation bekommen kann.

Fazit und Ausblick

Das Thema dieses Teils der Artikelserie war es, sich mit der Arbeit von Bibliotheken und Frameworks vertraut zu machen. Wir haben erfahren, dass diese ein Mittel der Wiederverwendung sind. Durch den Einsatz eines Frameworks wird einem als Entwickler die Struktur einer Applikation vorgegeben. Bei sehr einfachen Anwendungsfällen mag das etwas aufgesetzt wirken, sobald man jedoch eine gewisse Größe und Komplexität erreicht hat, wird man die Features eines solchen Frameworks zu schätzen wissen. Am Beispiel von Angular haben wir den Einstieg vorgenommen. Hat man einmal die Idee, den Ansatz und die Projektstruktur verstanden, wird man nach und nach besser damit zurechtkommen. Die vielen Features, die ein Framework mit sich bringt, kann man nur sehr schwer eigenhändig programmieren. Daher lohnen sich i. d. R. der Aufwand für die Einarbeitung und der Overhead, der mit der Nutzung verbunden ist.

Im kommenden Teil der Artikelserie wird es um Ionic gehen. Ionic ist ein Open-Source-Web-Framework zur Erstellung von Hybrid-Apps und Progressive Web Apps (PWAs) auf Basis von HTML5, CSS, Sass und JavaScript bzw. TypeScript. Dabei basiert es zudem auf Angular und Apache Cordova und stellt eine Programmbibliothek aus verschiedenen Komponenten zur Verfügung, mit denen interaktive Apps programmiert werden können. Wir bauen also erneut auf dem vorhanden Technologiestack auf und sehen uns ein anderes Teilgebiet der modernen Webprogrammierung an. Bis dahin: Feilen Sie an Ihrer ersten Angular-App. Hinweis: Den Quellcode zum Projekt finden Sie auf https://larinet.com.

Entwickler Magazin

Entwickler Magazin abonnierenDieser Artikel ist im Entwickler Magazin erschienen.

Natürlich können Sie das Entwickler Magazin über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. In unserem Shop ist das Entwickler Magazin ferner im Abonnement oder als Einzelheft erhältlich.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -