AngularJS
| AngularJS
| |
|---|---|
| |
| Basisdaten
| |
| Hauptentwickler | |
| Entwickler | Google, Online-Community |
| Erscheinungsjahr | 2009 |
| Aktuelle Version | 1.2.3 |
| Programmiersprache | JavaScript |
| Kategorie | Framework |
| Lizenz | MIT-Lizenz |
| http://www.angularjs.org/ | |
AngularJS – meist einfach als Angular bezeichnet – ist ein Open-Source-Framework von Google, welches die Erstellung von browserbasierten Single-page-Anwendungen mit einem MVC-Modell unterstützt, um die Softwareentwicklung und das Komponententesten entsprechender Anwendungen zu vereinfachen.
Struktur
Controller
In Angular wird 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-Container eingebunden. Dabei wird die View mit dem ViewModel verbunden. Hierdurch wird eine bidirektionale Datenverbindung zwischen der View und der Logik ermöglicht.
Direktiven
Angular ermöglicht es eigene HTML-Elemente und -Attribute in Form von Direktiven zu definieren.
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 wird von AngularJS jQuery Light (jqLite) verwendet, einer reduzierten Version von jQuery. Wird jQuery in das HTML-DOM eingebunden, wird dieses statt jQuery Light verwendet.
Doppelt geschweifte Syntax-Interpolation
Angular bietet zudem eine double-curly syntax interpolation. Dabei werden JavaScript-Ausdrücke in doppelten geschwungene Klammern gesetzt. Hierbei werden jedoch keine Sprunganweisungen unterstützt. Stattdessen werden mit dem Pipe-Operator | Unix-Filtern ähnliche Filter unterstützt.
Alternativ kann auch ng-bind verwendet werden. Der Befehl <span ng-bind="name"></span> hat dasselbe Ergebnis wie <span>{{name}}</span>, jedoch mit dem Unterschied, dass der Browser nichts anzeigt, bevor die entsprechenden Daten geladen wurden.
Services
Services enthalten die Geschäftslogik und binden externe Ressourcen – etwa REST-Webservices – ein. Services entsprechen damit dem Modell im MVC-Modell. 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
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, um Nachrichten an alle übergeordneten Scopes zu senden, während $broadcast dazu dient, Nachrichten an untergeordnete Scopes zu senden.
Damit ein Controller bzw. Service auf eine Nachricht reagieren kann, muss er bzw. es sich für die Nachricht mit Hilfe der $on-Methode für den Nachrichtentyp registrieren (Publish-Subscribe-Verfahren).
Routen in Single-Page-Applikationen
Um Routen in Single-Page-Applikationen (SPA) definieren zu können, wird von AngularJS das ngRoute-Modul[3] bereitgestellt. Über dieses können Routen definiert werden. Das ngRoute-Modul kann Ansichten dynamisch in ein Element mit der ng-view-Direktive[4] nachladen.
Dabei ist es jedoch nur möglich eine einzelne ng-view-Direktive pro Seite anzugeben. Abhilfe schafft hier UI-Router des AngularUI-Projekts.[5]
Zudem erlaubt das $location-Objekt[6] die direkte Verarbeitung der Browser-URL, um eine Seitennavigation zu simulieren.
Hallo-Welt-Programm
Im Folgenden wird ein kleines Hallo-Welt-Programm in AngularJS gezeigt.
In Default.html:
<!DOCTYPE html>
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ng="http://angularjs.org/">
<head>
<title>Hello World!</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script type="text/javascript" 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>
bzw. einfacher, aber nicht W3-komform:
<!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
Mit Angulardart ist auch 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 sollten. [7]
Siehe auch
- JavaScript Bibliotheken
- JavaScript MVC Frameworks
Literatur
- Brad Green, Shyam Seshadri: AngularJS. 1. Auflage. O'Reilly Media, 2013, ISBN 978-1-4493-4485-6, S. 180 (englisch).
Internetquellen
- AngularJS-Website. Abgerufen am 16. März 2013 (englisch).
- AngularJS-Forum auf Google Groups. Abgerufen am 16. März 2013 (englisch).
- AngularJS auf Google+. Abgerufen am 16. März 2013 (englisch).
- Batarang Chrome Plugin. Abgerufen am 16. März 2013 (englisch, Vereinfacht das Debugging von AngularJS-Anwendungen im Google Chrome Webbrowser).
- Angular JS Overview in mobile app development. Verde, abgerufen am 16. März 2013 (englisch).
- Jack Franklin: Essential JavaScript: the top five MVC frameworks. In: .Net Magazine. Microsoft, 23. November 2012, abgerufen am 16. März 2013 (englisch).
- AngularJS-Learning. In: Github. Abgerufen am 8. Juni 2013 (englisch, Linksammlung für AngularJS Anleitungen).
- Angular Modules. Abgerufen am 3. Oktober 2013 (englisch, Liste von Modulen für AngularJS).
Referenzen
- ↑ Restangular. Abgerufen am 2. Oktober 2013 (englisch, AngularJS Service für REST-Services).
- ↑ Angular-Socket.io. Abgerufen am 2. Oktober 2013 (englisch, Socket.IO-basiertes Angular-Service für die Verwendung von WebSockets mit Node.js).
- ↑ ngRoute. In: AngularJS Developer Documentation. Abgerufen am 2. Oktober 2013 (englisch).
- ↑ ngView. In: AngularJS Developer Documentation. Abgerufen am 2. Oktober 2013 (englisch).
- ↑ Golo Roden: Verschachtelte Ansichten mit AngularJS. In: Heise Developer. Verlag Heinz Heise, 6. Mai 2013, abgerufen am 2. Oktober 2013.
- ↑ Using $location. In: AngularJS Developer Documentation. Abgerufen am 2. Oktober 2013 (englisch).
- ↑ ANGULARDART – AngularJS auf Dart portiert, golem.de, 6. November 2013