AngularJS

aus Wikipedia, der freien Enzyklopädie
Wechseln zu: Navigation, Suche
AngularJS
AngularJS logo
Maintainer Google Inc.
Entwickler Google Inc., Online-Community
Erscheinungsjahr 2009
Aktuelle Version 1.5.6[1]
(27. Mai 2016)
Aktuelle Vorabversion 2.0.0-rc.7[2]
(13. September 2016[2])
Programmier­sprache TypeScript, JavaScript
Kategorie Framework
Lizenz MIT-Lizenz
deutschsprachig nein
Angular 1: www.angularjs.org
Angular 2: www.angular.io

AngularJS – oft einfach als Angular 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 wird als Open-Source-Framework vom US-amerikanischen Unternehmen Google Inc. entwickelt.

Konzept[Bearbeiten | Quelltext bearbeiten]

Angular basiert auf der clientseitigen Generierung von HTML-Ansichten und Erweiterungen des Vokabulars von HTML. Hierdurch kann Funktionalität im Rahmen der View abgebildet werden, ohne auf DOM-Manipulation via jQuery zurückgreifen zu müssen. Angular behandelt die Datenvalidierung im Rahmen von Eingabeformularen als Funktionalität der View. Hierbei wird der Gedanke der HTML5-Form-Validation fortgesetzt und durch AngularJS in eine Webbrowser-unabhängige Javascript-Variante implementiert. Diese Vorgehensweise besitzt keine Funktionalitäten zur Abbildung von Fachkonzept-Daten (Model) in Form einer clientseitigen Entitätenverwaltung. In anderen SPA-Frameworks stellt dies einen typischen Bereich zur Datenvalidierung dar. Stattdessen werden die Fachkonzeptdaten häufig direkt in einem ViewModel abgelegt. In dem offenen Vorschlag „Data Persistence in Angular 2.0“[3] wird über eine Erweiterung hinsichtlich dieses Funktionsbereichs nachgedacht.

Die Strukturierung eines Angular-Webclients erfolgt auf Basis von Modulen, View-Templates, Controllern, Scopes, Filtern und Providern (Factory, Service). Für die Zusammenführung dieser Elemente ist der Dependency-Container von Angular verantwortlich. Hierdurch entsteht eine lose gekoppelte Anwendung, welche aus wiederverwendbaren Teilkomponenten besteht. Unter Berücksichtigung der ISO/IEC 25010 können so wartbare Anwendungen realisiert werden. Angular besitzt einen Mechanismus zur Datenbindung nach dem MVVM-Muster. Hierdurch kann Programmcode zur Synchronisation zwischen View und Anwendungslogik eingespart werden. Durch deklarative Beschreibungen von Datenbindungen innerhalb der View leitet Angular eine bidirektionale Änderungsverfolgung der Werte ein. Dies kann auch starke Auswirkungen auf die Performance einer SPA haben. Technisch gesehen befindet sich Angular hierzu in einer Eventschleife um jede Änderung abzufangen, auszuwerten und ggfs. eine Aktualisierung der View zu initiieren. Nicht editierbare Daten können mittels Angulars One-Time-Binding von weiteren Aktualisierungen ausgeschlossen werden.

Durch das mitgelieferte Mocking-Modul können Standardfunktionalitäten wie $http durch Attrappen ersetzt werden. Dies ermöglicht die Umsetzung von isolierten Testfällen. Eine Testbarkeit von entwickelten Direktiven ist ebenfalls gegeben.

Struktur[Bearbeiten | Quelltext bearbeiten]

Controller[Bearbeiten | Quelltext bearbeiten]

In Angular 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[Bearbeiten | Quelltext bearbeiten]

Angular 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.

Präfix-Syntax für Direktiven
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[Bearbeiten | Quelltext bearbeiten]

Mit Hilfe von doppelten geschwungenen 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[Bearbeiten | Quelltext bearbeiten]

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[Bearbeiten | Quelltext bearbeiten]

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[Bearbeiten | Quelltext bearbeiten]

In Single-Page-Applikationen werden mit Routen die Zuordnung von URLs zu spezifischen Ansichten festgelegt. Zu diesem Zweck stellt AngularJS das ngRoute-Modul[4] bereit. Damit können innerhalb der globalen HTML-Vorlage verschiedene Ansichten (HTML-Fragmente) dynamisch in ein Element mit der ng-view-Direktive[5] 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[6][7][8], sowie das Modul Angular-Route-Segment, welches leichtgewichtiger ist und die Schnittstelle des vorhandenen AngularJS-Routers lediglich erweitert.[9][10]

Das $location-Objekt[11] erlaubt die direkte Verarbeitung der Browser-URL, so dass eine Seitennavigation simuliert werden kann.

Hallo-Welt-Programm[Bearbeiten | Quelltext bearbeiten]

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[Bearbeiten | Quelltext bearbeiten]

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.[12][13]

Siehe auch[Bearbeiten | Quelltext bearbeiten]

JavaScript-Bibliotheken

JavaScript MV*-Frameworks

Literatur[Bearbeiten | Quelltext bearbeiten]

  • 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[Bearbeiten | Quelltext bearbeiten]

 Commons: AngularJS – Sammlung von Bildern, Videos und Audiodateien

Referenzen[Bearbeiten | Quelltext bearbeiten]

  1. URL der Fundstelle: https://github.com/angular/angular.js/releases
  2. a b Changelog
  3. Jeff Cross, Ritchie Martori, Anant Narayanan: Data Persistence in Angular 2.0 – Google-Docs. Abgerufen am 9. August 2013 (englisch).
  4. ngRoute. In: AngularJS Developer Documentation. Abgerufen am 2. Oktober 2013 (englisch).
  5. ngView. In: AngularJS Developer Documentation. Abgerufen am 2. Oktober 2013 (englisch).
  6. AngularUI for AngularJS. Abgerufen am 27. August 2014 (englisch).
  7. UI-Router – JsWiki.de, das deutsche Wiki rund um JavaScript. Abgerufen am 19. März 2015 (deutsch).
  8. Golo Roden: Verschachtelte Ansichten mit AngularJS. In: Heise Developer. Verlag Heinz Heise, 6. Mai 2013, abgerufen am 2. Oktober 2013 (deutsch).
  9. angular-route-segment.com. Abgerufen am 19. März 2015 (englisch).
  10. Angular-Route-Segment – JsWiki.de, das deutsche Wiki rund um JavaScript. Abgerufen am 19. März 2015 (deutsch).
  11. Using $location. In: AngularJS Developer Documentation. Abgerufen am 2. Oktober 2013 (englisch).
  12. AngularDart — Superheroic MVW Framework for Dart
  13. ANGULARDART – AngularJS auf Dart portiert, golem.de, 6. November 2013.