Entwicklung mit Angular – eine Einführung in das beliebte JS-Framework

Was sind die Stärken und Schwächen des Frontend-Frameworks und für welche Art von Webanwendungen wird es verwendet?

Web Entwicklung • UPDATED ON Juni 11, 2021

John Adam

Author

Stand 2021 wird das auf JavaScript basierte Angular-Framework neben React.js für mehr Frontend-Webentwicklungsprojekte ausgewählt als jede andere Technologie. Laut dem 2020 State of JavaScript Report verwendeten 56 % der JS Frontend-Entwickler Angular aktiv, verglichen mit 80 % für React und 46 % für Vue.js, der drittbeliebtesten Option.

Warum ist die Entwicklung mit Angular eine so beliebte Wahl für dynamische Webanwendungen? Was sind die Vor- und Nachteile des Frameworks? Und welche Beispiele gibt es für Anwendungen, bei denen Angular eine gute Wahl sein könnte? Wofür ist es möglicherweise weniger gut geeignet?

Angular als Teil des JS-Ökosystems für die Frontend-Webentwicklung

Bevor wir näher auf Angular als Wahl für die Frontend-Technologie eingehen, wollen wir kurz einige Grundlagen erklären:

Statische Websites

Der Inhalt der Website ist statisch oder ändert sich nicht. Statische Seiten werden mit HTML und CSS erstellt.

Dynamische Websites

Dynamische oder interaktive Websites ändern den Inhalt, der dem Benutzer bereitgestellt wird, ohne dass dieser durch erneutes Laden im Browser aktualisiert werden muss. In einem Facebook- oder LinkedIn-Feed werden beispielsweise Kommentare eines anderen Benutzers in Echtzeit geladen.

JavaScript

Echtzeit-Updates für Websites oder webbasierte Apps erfordern ein clientseitiges Rendern. Javascript ist eine leichte, interpretierte Programmiersprache und die Programmiersprache der Wahl für Webanwendungen, die auf ein clientseitiges Rendering angewiesen sind.

DOM

Document Object Model. Die Darstellung einer Webseite auf Objektebene. Man kann JS-Code schreiben, um Webseitenobjekte im DOM zu bearbeiten.

Frontend (der Website)

Der Teil einer Webseite, mit dem der Benutzer direkt interagiert. Es kann auch als die „Client-Seite“ bezeichnet werden. Das Frontend enthält Elemente, die Benutzer direkt wahrnehmen: Textschriftarten, Farben und Stile, Bilder, Grafiken und Tabellen, Schaltflächen, Navigationsmenü usw.

Die Sprachen, die zur Entwicklung des Frontends einer Website verwendet werden, sind HTML, CSS und JavaScript. Die Struktur, das Design, das Verhalten und der Inhalt von allem, was in Browsern beim Öffnen von Websites, Webanwendungen oder mobilen Apps angezeigt wird, werden von Frontend-Entwicklern implementiert.

Ein gutes Frontend muss eine hohe Leistung aufweisen (schnelles Laden) und „responsive“ sein. Eine responsive Seite wird auf Geräten aller Größen, vom Computermonitor bis zum Smartphone, korrekt angezeigt. Alle wichtigen Teile des Frontends der Website sollten so gerendert werden, dass sie der Bildschirmgröße entsprechen.

SPA

Single Page Client Applications

JavaScript Framework

Ein JavaScript-Framework ist ein in JavaScript geschriebenes Anwendungsframework, mit dem Programmierer die verfügbaren Bibliotheksfunktionen in Templates (Vorlagen) bearbeiten können. Mit JS-Frameworks können UI-Elemente wie Listen, Tabellen usw. erstellt, geändert und gelöscht werden. Frameworks können für das Frontend oder Backend nutzbar sein.

Frontend JS-Frameworks

Einige der beliebtesten Frontend JS-Frameworks sind:

Angular

Ein Open Source Webanwendungsframework. Angular ist ein komponentenbasiertes Framework, das deklarative HTML-Vorlagen verwendet. Der Compiler des Frameworks übersetzt die Vorlagen in optimierte JavaScript-Anweisungen.

React

React ist eng gesehen kein Framework, sondern eine Bibliothek zum Rendern von UI-Komponenten. React wird in Kombination mit anderen Bibliotheken verwendet, um Anwendungen zu erstellen. React und ReactDOM ermöglichen es, Webanwendungen usw. zu erstellen. Da React und ReactDOM so häufig zusammen verwendet werden, wird React umgangssprachlich als JavaScript-Framework bezeichnet.

Vue

Vue erweitert HTML, wie Angular, mit eigenem Code. Abgesehen davon basiert es hauptsächlich auf modernem Standard-JavaScript.

Über Angular

Angular ist ein Open Source Frontend-Framework für JavaScript, das hauptsächlich zum Entwickeln von Single-Page-Webanwendungen (SPAs) und dynamischen Webanwendungen verwendet wird.

Google veröffentlichte Angular.js, wie frühere Versionen des Frameworks genannt wurden, 2009 als Open Source Framework. Es wurde seitdem von einer Kombination aus Entwicklergemeinschaften und der Unterstützung von Google gepflegt und weiterentwickelt. Versionen nach Angular 2 werden nur als Angular bezeichnet.

Angular ist ein Framework, das HTML und TypeScript verwendet, um Single-Page Clientanwendungen zu erstellen. Es erweitert HTML-Attribute mit Direktiven. Angular implementiert die Architekturmuster Model-View-Controller (MVC) und Model-View-View Model (MVVM), die eine solide Grundlage für die Anwendungsleistung bilden.

Das MVVM trennt Daten, das Modell und den Controller. Die Trennung von Daten von Design und visueller Darstellung erleichtert die Verwaltung komplexer Webanwendungen. Durch die Datenbindung wird sichergestellt, dass Änderungen auf der Website auch Änderungen am DOM auslösen. Bei Änderungen des Designs werden diese Änderungen dank der bidirektionalen Datenbindung auf der Site wiedergegeben.

Angular wird von allen modernen Webbrowsern wie Safari, Chrome, Mozilla, Opera und Internet Explorer usw. unterstützt. Es ist auch mit mobilen Browsern kompatibel. Die Entwicklung mit Angular basiert vollständig auf JavaScript und ist komplett clientseitig. Es ist kompatibel mit Desktop- und mobilen Browsern. Es ist kein Plugin oder eine native Browsererweiterung.

Grundlagen der Entwicklung mit Angular

Kurz gesagt besteht Angular aus:

Datenmodell

Ein Datenmodell ist eine Sammlung von Daten, die von der Anwendung verwendet werden.

Ansicht

Die Ansicht repräsentiert diese Daten. Eine Ansicht kann auch als eine Gruppe von Anzeigeelementen bezeichnet werden, die zusammen erstellt oder geändert werden können. Ansichten können Hierarchien haben. Sie werden mit einer HTML-Vorlage und einer Komponentenklasse dargestellt. Eine Ansicht kann auf das Datenmodell zugreifen und bietet verschiedene Möglichkeiten, Modelldaten mithilfe von Ansichten anzuzeigen. Angular rendert eine Ansicht unter der Kontrolle einer oder mehrerer Direktiven.

Controller

Der Controller präsentiert einige Daten aus dem Modell. Angular-Controller steuern die Daten von Angular-Anwendungen. Sie sind reguläre JavaScript-Objekte.

Datenbindung

Datenbindung ist ein Prozess, mit dem Anwendungen Datenwerte oder Änderungen an Daten anzeigen und auf Benutzeraktionen wie einen Mausklick, Tastenanschläge oder eine Berührung reagieren können. Dieser Mechanismus bindet die Benutzeroberfläche der Anwendungen an die Datenmodelle.

Bei der Datenbindung verarbeitet Angular die Details von Änderungen an Daten auf der Seite, überwacht Events, aktualisiert Anwendungsdaten usw. Der Programmierer muss nur die Beziehung zwischen einem HTML-Widget und einem Datenmodell deklarieren und das Framework die Details verarbeiten lassen.

Das Erlernen von Datenbindungskonzepten ist essentiell, um Angular vollständig zu verstehen.

Komponenten

Angular-Anwendungen verwenden Komponenten, um Elemente im Browser oder in der Anwendung anzuzeigen. Eine Komponente besteht aus folgenden Teilen:

1. Die TypeScript-Klasse wird als Komponentenklasse bezeichnet.
2. Die HTML-Datei, die die Vorlage für die Komponente darstellt.
3. Eine CSS-Datei (optional) für Stil und Format.

Vorteile der Entwicklung mit Angular

Einige der Vorteile der Verwendung von Angular in Webentwicklungsprojekten sind:

• Bidirektionale Datenbindung
• DOM-Manipulation
• Verbesserte Serverleistung
• Schnelleres Prototyping von Anwendungen
• Responsive Web
• Sehr gut testbare Produkte
• Verwendung von Direktiven
• Einfache HTML-Vorlagen
• Schnelle Entwicklung

Nachteile der Entwicklung mit Angular

• JavaScript-Unterstützung obligatorisch
• Erfordert Kenntnisse über MVC- und MVVM-Muster
• Komplexität von Funktionen wie Gültigkeitsbereiche (Scope), Direktiven

Anwendungen basierend auf Angular

Angular kann verwendet werden, um Anwendungen zu erstellen, die verschiedene Domänen und Kategorien umfassen, z. B.

• Kommunikation
• Entwickler-Tools
• Bildungswesen
• Nahrungsmittel und Getränke
• Gesundheit und Fitness
• Sport
• Transport und Verkehr
• Reisen

Einige beliebte Apps, die auf Angular basieren:

• YouTube für die PS3
• Netflix
• Upwork
• PayPal
• DoubleClick
• Gmail
• com
• istock

Für einige Anwendungen ist Angular wahrscheinlich keine gute Wahl

Wie jede Webentwicklungstechnologie eignet sich auch Angular gegebenenfalls nicht für jede Art von Frontend. Einige Beispiele wären:

Websites mit statischem Inhalt

Die Entwicklung mit Angular ist im Allgemeinen für einfache Anwendungen wie Unternehmenswebsites, die statische Inhalte liefern sollen, nicht sinnvoll. Durch die Verwendung von Angular zum Entwickeln solcher Websites werden nur zusätzlicher Code und Funktionen hinzugefügt, die ungenutzt bleiben, und die Kosten für die Erstellung und Wartung werden unnötig erhöht.

Projekte mit begrenzten Ressourcen

Angular-Anwendungen sollten von erfahrenen Angular-Entwicklern erstellt und verwaltet werden. Da Angular-Entwickler teurer sind als Entwickler in PHP und anderen Sprachen, mit denen großartige statische Websites erstellt werden können, ist das Framework wahrscheinlich keine gute Wahl für kleinere Projekte mit entsprechenden Budgetbeschränkungen.

Spiele und stark analytische Anwendungen

Angular ist für die Entwicklung komplexerer interaktiver Benutzeroberflächen, wie sie in Spieleanwendungen zu finden sind, nicht effektiv. Angular testet jedes DOM-Objekt, bevor es seine Position ändert. Außerdem erfordern Spiele eine Menge mathematischer Analysen, die Angular nicht verarbeiten kann

Erste Schritte mit Angular

Da Angular ein JavaScript-Framework ist, kann es einer HTML-Seite mittels <script>-tag hinzugefügt werden. Angular erweitert HTML-Attribute mit Direktiven und bindet Daten mit Ausdrücken an HTML.

Der schnellste Weg loszulegen, besteht darin, über das <script>-tag in der HTML auf eine Google CDN URL zu verweisen. Auf diese Weise müssen Sie nichts herunterladen oder eine lokale Kopie verwalten.

Verwenden Sie die folgende Vorlage, um Ihren Code auf ein Angular-Skript auf dem Google CDN-Server zu verweisen.

<!doctype html>
<html ng-app>
  <head>
    <title>My First Angular App!!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  </head>
  <body>
  </body>
</html>

Angular-Direktiven

Angular erweitert HTML mithilfe von Direktiven. Direktiven sind Markierungen in einem DOM-Element, mit denen das benutzerdefinierte Verhalten für dieses Element angegeben wird. Angular-Direktiven beginnen mit dem Präfix „ng“. Einige der in Angular integrierten Direktiven sind: „ng-app“, „ng-init“, „ng-model“, „ng-bind“, „ng-repeat“ usw.

Einige der häufig verwendeten Direktiven sind unten aufgeführt.

ng-app

Diese Direktive definiert eine Angular-Anwendung. Es definiert das Stammelement der Anwendung.

ng-model

Diese Direktive bindet den Wert von HTML-Steuerelementen wie Text, Auswahl oder Textbereich an Anwendungsdaten. Es bindet den eingegebenen Wert an einen Anwendungsvariablennamen.

ng-bind

Diese Direktive bindet Anwendungsdaten an die HTML-Ansicht. Die ng-bind Direktive wird von Angular verwendet, um den Inhalt eines HTML-Elements durch den Wert der angegebenen Variablen oder des angegebenen Ausdrucks zu ersetzen. Wenn sich der Wert der Variablen ändert, verändert sich auch der Inhalt des angegebenen HTML-Elements.

Angular-Dateien lokal herunterladen und hosten

Diese Option ist für diejenigen gedacht, die offline mit Angular arbeiten oder die Dateien auf ihren eigenen Servern hosten möchten.

Angular-Komponenten

Wenn Sie mit Angular beginnen, müssen Sie sich mit Modulen, Controllern, Ausdrücken, Direktiven, Scopes, Filtern, DOM, Formularen, Ajax, Validierung, Diensten, Animation, Abhängigkeitsinjektion, Ansichten, w3.css usw. vertraut machen.

Wir haben einige Themen wie Direktiven und Ansichten kurz behandelt. Eine ausführliche Erläuterung aller Komponenten würde den Rahmen dieses Artikels sprengen.

Beispiel für einen Angular-Code

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

</body>
</html>

Kompilierungs- und Verknüpfungsprozess in der Angular-Entwicklung

Der HTML-Compiler von Angular ermöglicht die Verwendung von Direktiven, um jedem HTML-Element neue Attribute zuzuweisen. Die Kompilierung von Angular erfolgt automatisch im Webbrowser. Es gibt keine Vorkompilierung oder serverseitigen Prozesse.

Angular verwendet den Dienst <$compiler>, um eine HTML-Seite zu kompilieren. Der Kompilierungsprozess wird ausgelöst, sobald die HTML-Seite (statisches DOM) vollständig geladen ist.

Er erfolgt in zwei Phasen:

Kompilieren: Prüft das gesamte DOM und sammelt die Direktiven

Verknüpfung: Verbindet die Direktiven mit einem Scope und erzeugt eine Live-Ansicht

IDEs, die in der Angular-Entwicklung verwendet werden

Einige der von Angular verwendeten Integrated Development Environments (IDEs) umfassen:

• Aptana
• Eclipse
• Sublime Text
• Visual Studio
• WebStorm

Ressourcen

Die Angular-Dokumentation enthält das Entwicklerhandbuch mit Konzepten und die API-Referenz für Syntax und Verwendung.

Fazit

In diesem Blog wurden die Grundlagen der Angular-Entwicklung behandelt. Angular wird zum Erstellen interaktiver Websites verwendet, die einfach getestet und gewartet werden können. Es ist leicht zu verwenden, vereinfacht den Entwicklungsprozess und unterstützt die neuesten Standards von JavaScript (ES6).