AngularJS
AngularJS (zur Abgrenzung vom Nachfolger Angular (Version 2 und höher) auch AngularJS 1 oder Angular 1 bezeichnet) ist ein clientseitiges JavaScript-Webframework zur Erstellung von Single-Page-Webanwendungen nach einem Model-View-ViewModel-Muster. Die Softwareentwicklung und das Komponententesten können damit vereinfacht werden. Es wurde als Open-Source-Framework vom US-amerikanischen Unternehmen Google Inc. Der Long Term Support (LTS) wurde am 31. Dezember 2021 eingestellt.[2]
| AngularJS | |
|---|---|
 | |
| Basisdaten | |
| Maintainer | Google Inc. |
| Entwickler | Google Inc., Online-Community |
| Erscheinungsjahr | 20. Oktober 2010 |
| Aktuelle Version | 1.8.2[1] (21. Oktober 2020) |
| Programmiersprache | TypeScript, JavaScript |
| Kategorie | Framework |
| Lizenz | MIT-Lizenz |
| deutschsprachig | nein |
| www.angularjs.org | |
Im September 2016 wurde die stark verbesserte, nicht rückwärts-kompatible Version Angular 2 herausgegeben.[3] Der Begriff AngularJS wird nunmehr eingeschränkt auf Version 1 verwendet, Angular ohne Zusatz nur für die höheren Versionen.
Konzept
Die Philosophie von AngularJS basiert auf der Annahme, dass deklarative Programmierung (in HTML) verwendet werden sollte um Benutzeroberflächen zu gestalten und Softwarekomponenten miteinander zu verbinden, während imperative Programmierung (in JavaScript in Form von AngularJS) für die Umsetzung von Programmlogik verwendet werden sollte.
Der Aufbau von AngularJS orientiert sich lose am MVC-Muster, insbesondere dem MVVM-Muster, nach welchem eine Software in Models (Datenmodelle), Views (Benutzeroberfläche) und ViewModels (zur Veränderung der Benutzeroberfläche nach Interaktion mit den Daten) gegliedert wird.[4]
AngularJS erweitert das Vokabular von HTML um neue Tags und Parameter, die Direktiven, aus welchen zur Laufzeit Funktionalität generiert wird. Dies geschieht über sogenannte Datenbindungen, durch welche einzelne Elemente einer Webapplikation mit einem Datensatz verkoppelt werden. Interagiert der Benutzer mit der Applikation, können die Datensätze verändert oder anders dargestellt werden, etwa durch die Sortierung einer Tabelle nach einem anderen Kriterium. So kann Funktionalität erzeugt werden, ohne auf DOM-Manipulation via jQuery oder ähnlicher Bibliotheken zurückzugreifen.
Die verwendeten Datenmodelle werden nicht in AngularJS selbst definiert, sondern übernommen wie sie sind. Insbesondere gibt es keine clientseitige Entitätenverwaltung, wie in anderen Single-Page-Frameworks.
AngularJS-Applikationen werden in verschiedene Module untergliedert:
- Templates definieren den Aufbau der Benutzeroberfläche.
- Controller enthalten die Programmlogik.
- Scopes verwalten die Daten, auf die ein Programmbaustein zugreifen kann.
- Filter sortieren die Daten dynamisch nach vorgegebenen Kriterien.
- Provider stellen weitere Funktionalitäten (üblicherweise unter anderem die Interaktion mit einem Backend) zur Verfügung.
Diese Module werden vom sogenannten Dependency-Injection-Container beim Aufruf der Applikation durch Bootstrapping zu einem lose gekoppelten Programm zusammengeführt, welches aus wiederverwertbaren Teilkomponenten besteht. So entsteht eine wartbare Software im Sinne der ISO/IEC 25010. Technisch gesehen ist eine solche Anwendung eine Eventschleife, die jede Änderung abfängt, auswertet und gff. Aktualisierungen in der Präsentation initiiert. Nichtveränderliche Daten können mittels eines One-Time-Bindings einmalig gebunden und von weiteren Aktualisierungen ausgeschlossen werden.
Ein mitgeliefertes Mocking-Modul erlaubt es Standardfunktionalitäten, wie die Komponente zum durchführen von HTTP-Anfragen, durch Attrappen zu ersetzen und so isolierte Testfälle umzusetzen, ohne tatsächlich Anfragen zu verschicken oder Daten zu verändern. Dadurch ist die isolierte Testbarkeit der einzelnen Module gegeben.[5]
Struktur
Controller
In AngularJS wird ein clientseitiges Model (nach dem Model-View-ViewModel-Muster ein ViewModel) gemeinsam mit der Logik in einem Controller definiert. Die Controller werden anschließend zu einem Modul zusammengefasst. Die Module werden mit Hilfe eines integrierten Dependency-Injection-Containers in die Applikation eingebunden. Dabei wird die View mit dem Model verbunden. Diese Datenbindung ist bidirektional, das heißt, Benutzereingaben wirken sich auf das Model aus, programmatische Änderungen am Model aber auch auf die Benutzeransicht.
Direktiven
AngularJS ermöglicht es, benutzerdefinierte HTML-Elemente und -Attribute, sogenannte Direktiven, zu erstellen.
Vordefinierte Direktiven sind am ng-Namensraum im Präfix erkennbar. Die Art des zu benutzenden Präfixes ist dabei vom Validator abhängig.
| Validator | Beispiel |
|---|---|
| keiner | ng-repeat="item in items" |
| XML | ng:repeat="item in items" |
| HTML5 | data-ng-repeat="item in items" |
| xHTML | x-ng-repeat="item in items" |
Um Elemente auszuwählen, verwendet AngularJS ein integriertes jQuery Lite (jqLite). Dabei handelt es sich um eine reduzierte Version von jQuery, in welcher nur die wichtigsten Funktionalitäten eingebunden sind. Wird jQuery in das HTML-DOM eingebunden, wird dieses statt jQuery Lite verwendet.
Interpolation
Mit Hilfe von doppelten geschweiften Klammern (double-curly syntax) können JavaScript-Ausdrücke im HTML-Code eingebettet werden. Hierbei werden jedoch keine Sprunganweisungen unterstützt. Mit dem Pipe-Operator | können Filter hinzugefügt werden, die sich auf das angezeigte Resultat auswirken.
Alternativ kann auch ng-bind verwendet werden. Die Befehle <span ng-bind="name"></span> und <span>{{name}}</span> führen beide dazu, dass der Wert der Variable name angezeigt wird. Mit ng-bind wird jedoch verhindert, dass der Browser beim erstmaligen Laden die Vorlage anzeigt, falls AngularJS die Daten nicht schnell genug geladen und damit die Vorlage ersetzt hat.
Services
Services enthalten die Geschäftslogik und binden externe Ressourcen – etwa REST-Webservices – ein. Services werden als Singleton instanziiert.
Services können selbst programmiert werden oder von Drittanbietern übernommen werden. Das AngularJS-Framework stellt aber bereits zahlreiche Services (erkennbar am $-Präfix) zur Verfügung. Dazu zählen beispielsweise $http und $resource, die zum Durchführen von Ajax-Anfragen dienen. Beide greifen intern auf das XMLHttpRequest-Objekt zu und unterscheiden sich im Abstraktionsgrad. Während $http beliebige HTTP-Anfragen durchführen kann, ist $resource auf REST-Services spezialisiert.
Kommunikation zwischen Scopes
Jeder Controller besitzt ein eigenes $scope-Objekt, welches die zum Controller gehörigen Funktionen und Daten kapselt. Damit Controller mit anderen Controllern oder Services kommunizieren können, werden vom $scope- bzw. vom $rootScope-Objekt $emit- und $broadcast-Methoden zur Verfügung gestellt. Dabei dient $emit dazu, Nachrichten an alle übergeordneten Scopes zu senden, während $broadcast dazu dient, Nachrichten an untergeordnete Scopes zu senden.
Damit ein Controller oder ein Service auf eine Nachricht reagieren kann, muss er sich für die Nachricht mit Hilfe der $on-Methode für den Nachrichtentyp registrieren (Publish-Subscribe-Verfahren).
Routen in Single-Page-Applikationen
In Single-Page-Applikationen werden mit Routen die Zuordnung von URLs zu spezifischen Ansichten festgelegt. Zu diesem Zweck stellt AngularJS das ngRoute-Modul[6] bereit. Damit können innerhalb der globalen HTML-Vorlage verschiedene Ansichten (HTML-Fragmente) dynamisch in ein Element mit der ng-view-Direktive[7] nachgeladen werden.
Dabei kann man nur eine einzelne ng-view-Direktive pro Seite angeben. Abhilfe schafft hier der alternative UI-Router des AngularUI-Projekts, dessen Funktionsumfang weitaus größer ist[8][9][10], sowie das Modul Angular-Route-Segment, welches leichtgewichtiger ist und die Schnittstelle des vorhandenen AngularJS-Routers lediglich erweitert.[11][12]
Das $location-Objekt[13] erlaubt die direkte Verarbeitung der Browser-URL, so dass eine Seitennavigation simuliert werden kann.
Hallo-Welt-Programm
Im Folgenden wird ein Hallo-Welt-Programm in AngularJS gezeigt:
In Default.html:
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script src="controller.js"></script>
</head>
<body>
<div ng-app="helloWorldModule">
<div ng-controller="HelloWorldController">
Name: <input type="text" ng-model="name" required>
<hr>
<div>Hello {{name}}!</div>
</div>
</div>
</body>
</html>
In controller.js:
'use strict';
// definieren eines Moduls
var helloWorldModule = angular.module("helloWorldModule", []);
// hinzufügen eines Controllers zum Modul
helloWorldModule.controller("HelloWorldController", function ($scope) {
$scope.name = "World";
});
Angulardart
Mit Angulardart ist eine Version für die Programmiersprache Dart verfügbar. Angulardart lehnt sich eng an AngularJS an, wobei die zusätzlichen Möglichkeiten von Dart wie Metadaten, Typen und Klassen genutzt werden.[14][15]
Siehe auch
JavaScript-Bibliotheken
JavaScript MV*-Frameworks
Literatur
- Philipp Tarasiewicz, Robin Böhm: AngularJS: Eine praktische Einführung in das JavaScript-Framework. 1. Auflage. dpunkt.verlag, 2014, ISBN 978-3-86490-154-6, S. 354.
- Brad Green, Shyam Seshadri: AngularJS. 1. Auflage. O’Reilly Media, 2013, ISBN 978-1-4493-4485-6, S. 180 (englisch).
Weblinks
Einzelnachweise
- Release 1.8.2. 21. Oktober 2020 (abgerufen am 6. November 2020).
- Stable AngularJS and Long Term Support
- AngularJS is No More – The Future of TypeScript and Angular 2?
- Golo Roden: Webanwendungen mit AngularJS. Heise Online, 13. September 2013, abgerufen am 2. September 2019.
- API Reference / ngMock. In: angularjs.org. Abgerufen am 2. September 2019 (englisch).
- ngRoute. In: AngularJS Developer Documentation. Abgerufen am 2. Oktober 2013 (englisch).
- ngView. In: AngularJS Developer Documentation. Abgerufen am 2. Oktober 2013 (englisch).
- AngularUI for AngularJS. Abgerufen am 27. August 2014 (englisch).
- UI-Router – JsWiki.de, das deutsche Wiki rund um JavaScript. (Nicht mehr online verfügbar.) Archiviert vom Original am 2. April 2015; abgerufen am 19. März 2015. Info: Der Archivlink wurde automatisch eingesetzt und noch nicht geprüft. Bitte prüfe Original- und Archivlink gemäß Anleitung und entferne dann diesen Hinweis.
- Golo Roden: Verschachtelte Ansichten mit AngularJS. In: Heise Developer. Verlag Heinz Heise, 6. Mai 2013, abgerufen am 2. Oktober 2013.
- angular-route-segment.com. Abgerufen am 19. März 2015 (englisch).
- Angular-Route-Segment – JsWiki.de, das deutsche Wiki rund um JavaScript. (Nicht mehr online verfügbar.) Archiviert vom Original am 2. April 2015; abgerufen am 19. März 2015. Info: Der Archivlink wurde automatisch eingesetzt und noch nicht geprüft. Bitte prüfe Original- und Archivlink gemäß Anleitung und entferne dann diesen Hinweis.
- Using $location. In: AngularJS Developer Documentation. Abgerufen am 2. Oktober 2013 (englisch).
- AngularDart – Superheroic MVW Framework for Dart
- ANGULARDART – AngularJS auf Dart portiert. golem.de, 6. November 2013.
