Einstieg in Angular leicht gemacht!
Man selbst hat ja schon oft von Angular gehört und gelesen. Ob in Entwickler-Foren, in Artikeln einschlägiger News-Portale oder in Stellenanzeigen, Angular scheint allgegenwärtig. Es lohnt sich also einzutauchen und sich damit zu beschäftigen. Doch von Anfang an lauern Missverständnisse. Um dem Dschungel an Fragen, welche sich bei einem ersten Einstieg in Angular ergeben könnten, Herr zu werden, ist es sinnvoll zuallererst einen Blick darauf zu werfen, was Angular eigentlich ist und wie es sich im Laufe der Zeit entwickelt hat.
Was eigentlich ist Angular und wie hat es sich entwickelt?
Am Anfang, 2009, wurde Angular als AngularJS veröffentlicht, welches auf Client-seitige Generierung von HTML sowie die Erweiterung des Vokabulars desselben setzte. Durch das damit Vereinfachen der Softwareentwicklung und des Komponenten-Testen erfreute es sich schnell einer großen Beliebtheit untern den Entwicklern. Komplett neu entwickelt kam im September 2016 Angular 2 auf den Markt und hatte mit AngularJS nicht mehr viel gemein. Dann ging es Schlag auf Schlag – im März 2017 löste Angular 4 dann Angular 2 ab. Nur ein halbes Jahr später im November 2017 folgte Angular 5 mit CLI und schon im Mai 2018 stand Angular 6 vor der Tür.
Zwei Major-Releases in einem Jahr? .. U serious?
Als Entwickler ist mir die Beständigkeit der genutzten Frameworks/Libaries ein wichtiger Aspekt bei der Auswahl derselben, daher fingen hier bereits die Alarmglocken an zu läuten. Wie steht es mit der Abwärtskompatibilität? Wird ein Angular-Projekt zur unendlichen Geschichte was Wartung angeht? Möchte man wirklich auf eine Technologie setzen, die augenscheinlich noch so sehr in den Kinderschuhen steckt, dass mehrmals im Jahr ein Major-Release veröffentlicht wird?
Die Antwort lautet überraschenderweise „ja“, denn Angular bietet einem Entwickler ein unglaublich mächtiges und vergleichsweise sehr einfach zu bedienendes Werkzeug, um binnen kürzester Zeit Web-Apps bzw. PWA’s (ProgressiveWebApps) mit komplexer Logik zu erschaffen. Man ist an keine Version gebunden, doch ist man gut beraten die aktuellste zu nutzen, sofern dies möglich ist. Bei der Migration größerer Projekte ist jedoch Vorsicht geboten, da dies durchaus einen unkalkulierbaren Mehraufwand nach sich ziehen könnte.
Aller Anfang ist schwer (?)
Als Anfänger nimmt man gerne AngularJS, da dies keine lokale Installation voraussetzt. Dies ist nicht verkehrt, hat jedoch mit der Entwicklung im aktuellen Angular, wenig gemein. In AngularJS initialisiert man das Framework im Head des DOM und kann sodann beginnen den Code zu schreiben. Angular hingegen basiert auf NodeJS und NPM, und ist im Gegensatz zu seinem JS-Vorgänger, modular aufgebaut und setzt auf TypeScript als Entwicklungssprache.
Folgend zwei Beispiele für eine Hello-World-App in AngularJS und in Angular:
AngularJS
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="HelloController">
<h2>{{message}}</h2>
</div>
<script>
var app = angular.module("app", []);
app.controller("HelloController", function($scope) {
$scope.message = "Hello World";
});
</script>
</body>
</html>Diese App hat das AngularJS-Framework eingebunden und initialisiert einen Controller, welcher eine Eigenschaft „message“ besitzt. Ruft man dies nun im Browser auf, bekommt man direkt einen der primären Vorzüge von Angular, das Data Binding, zu bestaunen. Das Data Binding in AngularJS hält die Daten zwischen Model und der View synchron. Deshalb wird an entsprechender Stelle im HTML auch der Inhalt der Eigenschaft „message“ angezeigt.
Angular
Äquivalent dazu lässt sich eine App in Angular 5 mit nur wenigen Konsole-Befehlen generieren.
npm install @angular/cli –g ng new myFirstApp cd myFirstApp ng serve
Beim Aufruf von http://localhost:4200 im Browser, erscheint die grade erstelle App mit einem Willkommens-Gruß.
Doch was genau ist hier passiert? Man hat schließlich keine Zeile Code geschrieben?
Zuerst muss man Angular installieren, sofern man dies noch nicht getan hat. Wie bereits oben angemerkt, basiert Angular auf NodeJS und NPM. Man kann also ganz gemütlich über „npm install“ Angular installieren.
Mit „ng new“ wird nun eine neue App initialisiert. Angular erstellt die Ordnerstruktur für die App und alle hierfür nötigen Dateien. Nachdem man in das App-Verzeichnis gewechselt hat, kann man mit „ng serve“ oder auch abgekürzt „ng s“ die App im Browser verfügbar machen.
Was unterscheidet Angular von AngularJS?
Der wohl wichtigste Unterschied ist, dass Controller und $scope durch Komponenten und Direktiven ersetzt wurden. Anstatt dem $scope, verwendet Angular eine Hierarchie aus Komponenten als zentrales Architekturkonzept. In AngularJS ist eine Direktive ein komplexes Gebilde, welches ein HTML-Template, DOM-Logik oder andere Funktionalitäten beinhalten kann.
In Angular wurde diese Architektur stark vereinfacht. Ein benutzerdefiniertes Tag in einer Seite wird durch eine Komponentenklasse repräsentiert, wobei der Selector den Tag-Namen festlegt. Jede Komponente besitzt ein eigenes Template, wodurch im Unterschied zu AngularJS, der notwendige Verweis auf einen Controller entfällt.
Man kann in Angular mit dem Konsolenbefehl „ng generate component myComponent“ oder abgekürzt „ng g c myComponent“, der App Komponenten hinzufügen. Angular erstellt die leeren Komponenten und bindet diese ein, so dass man direkt loslegen kann.
Die wohl zweite wichtige Neuerung ist die Einführung von TypeScript. Es gibt natürlich eine ganze Reihe von wichtigen Neuerungen, wie z.B. die Implementierung von RxJS oder den mobile-first-Ansatz, aber hier auf alles einzugehen würde den Rahmen sprengen.
Ein nicht grade unwichtiger Aspekt ist das Testing. Während man in AngularJS erst einmal eine Testumgebung aufsetzen muss, bietet Angular alles Notwendige out-of-the-box. Jede Komponente hat ihren eigenen Unit- sowie End2End-Test.
Anfängerglück
Es gibt wohl kaum einen Entwickler, der nicht schon einmal in die Scope-Falle getappt ist. Scope ist der Gültigkeitsbereich von Variablen und es lohnt sich diesem besondere Beachtung zu schenken, insbesondere beim Debugging oder viel mehr bereits von Anfang an, um Fehler zu vermeiden. In Angular fällt zwar der $scope aus AngularJS weg, aber nicht die Stolperfalle um denselben.
Angular bedient sich einer Hierarchie aus Komponenten, und der Geltungsbereich einer Variablen ist per se auf eine Komponente beschränkt. Man kann sich jedoch aller Eigenschaften und Methoden eingebetteter Komponenten bedienen, sofern diese nicht mit „private“ deklariert sind. Besonders als Anfänger neigt man dazu, Variablen aus unterschiedlichen Geltungsbereichen zu überschreiben und dann wundert man sich und sucht, wo die kuriosen Werte herkommen.
Sein oder nicht sein?
Alles in allem lohnt es sich, sich mit diesem überaus vielseitigen Werkzeug vertraut zu machen. Angular wird stetig weiterentwickelt und ist, zumindest derzeit, einfach konkurrenzlos, auch wenn andere Frameworks natürlich dasselbe von sich behaupten. Im Gegensatz zu anderen Frameworks, ist Angular sehr einfach zu erlernen. Die Syntax ist sehr aussagekräftig und verständlich. Falls Fragen oder Fehler auftreten steht eine sehr aktive und hilfsbereite Community zur Verfügung.
Als derzeit einzige anzunehmende Konkurrenz ist das von Facebook entwickelt ReactJS zu benennen. Es ist aber im Gegensatz zu Angular kein Framework sondern eine Libary. Aspekte wie z.B. das Routing, die Validierung oder die Kommunikation wurden hier explizit außer Acht gelassen. Der Entwickler muss sich also zuallererst eine eigene Sammlung von Bibliotheken anlegen und sich mit diesen vertraut machen. Die Gefahr dabei ist, dass solch eine Bibliothek nach einem Update von ReactJS nicht mehr funktioniert. Das ist als Entwickler, für den Zeit eine Rolle spielt, eine große Gefahr.
Autor: Andreas ist Senior Software-Entwickler bei der TIQ Solutions.
