AngularJS

aus Wikipedia, der freien Enzyklopädie
Wechseln zu: Navigation, Suche
Dieser Artikel oder Abschnitt bedarf einer Überarbeitung. Näheres ist auf der Diskussionsseite angegeben. Hilf mit, ihn zu verbessern, und entferne anschließend diese Markierung.
AngularJS
AngularJS logo
Maintainer Google Inc.
Entwickler Google Inc., Online-Community
Erscheinungsjahr 2009
Aktuelle Version 1.2.22
(12. August 2014)
Aktuelle Vorabversion 1.3.0-beta.18
(12. August 2014)
Programmier­sprache JavaScript
Kategorie Framework
Lizenz MIT-Lizenz
Deutschsprachig nein
www.angularjs.org

AngularJS – oft einfach als Angular bezeichnet – ist ein Open-Source-Framework von Google. Mit AngularJS kann man in HTML und JavaScript Single-page-Webanwendungen nach einem MVC-Muster erstellen. Die Softwareentwicklung und das Komponententesten können damit vereinfacht werden.

Struktur[Bearbeiten]

Controller[Bearbeiten]

In Angular wird ein clientseitiges Model (nach dem Model-View-ViewModel-Muster ein ViewModel) gemeinsam mit der Logik in einem Controller definiert. 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]

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 jQuery Light (jqLite), eine reduzierten Version von jQuery. Wird jQuery in das HTML-DOM eingebunden, wird dieses statt jQuery Light verwendet.

Interpolation[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]

Services enthalten die Geschäftslogik und binden externe Ressourcen – etwa REST-Webservices – ein. Services werden als Singleton instanziiert.

Um AJAX-Anfragen durchzuführen, stehen in AngularJS das $http-Objekt und das $resource-Objekt zur Verfügung. 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.

Zudem gibt es spezialisierte Services von Drittanbietern.[1][2]

Kommunikation zwischen Scopes[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]

In Single-Page-Applikationen werden mit Routen die Zuordnung von URLs zu spezifischen Ansichten festgelegt. Zu diesem Zweck stellt AngularJS das ngRoute-Modul[3] bereit. Damit können innerhalb der globalen HTML-Vorlage verschiedene Ansichten (HTML-Fragmente) dynamisch in ein Element mit der ng-view-Direktive[4] nachgeladen werden.

Dabei kann man nur eine einzelne ng-view-Direktive pro Seite angeben. Abhilfe schafft hier der UI-Router des AngularUI-Projekts.[5]

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

Hallo-Welt-Programm[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.0.7/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]

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

Siehe auch[Bearbeiten]

JavaScript Bibliotheken
JavaScript MV*-Frameworks

Literatur[Bearbeiten]

  •  Brad Green, Shyam Seshadri: AngularJS. 1 Auflage. O'Reilly Media, 30. April 2013, ISBN 9781449344856, S. 180.

Weblinks[Bearbeiten]

 Commons: AngularJS – Sammlung von Bildern, Videos und Audiodateien

Offizielle Webpräsenz von AngularJS

Referenzen[Bearbeiten]

  1. Restangular. Abgerufen am 2. Oktober 2013 (englisch, AngularJS Service für REST-Services).
  2. Angular-Socket.io. Abgerufen am 2. Oktober 2013 (englisch, Socket.IO-basiertes Angular-Service für die Verwendung von WebSockets mit Node.js).
  3. ngRoute. In: AngularJS Developer Documentation. Abgerufen am 2. Oktober 2013 (englisch).
  4. ngView. In: AngularJS Developer Documentation. Abgerufen am 2. Oktober 2013 (englisch).
  5. Golo Roden: Verschachtelte Ansichten mit AngularJS. In: Heise Developer. Verlag Heinz Heise, 6. Mai 2013, abgerufen am 2. Oktober 2013 (deutsch).
  6. Using $location. In: AngularJS Developer Documentation. Abgerufen am 2. Oktober 2013 (englisch).
  7. ANGULARDART – AngularJS auf Dart portiert, golem.de, 6. November 2013