Kurzeinführung in AngularJS
2015-04-01 09:34 (Kommentare: 0)
Wir helfen euch bei den ersten Schritten mit AngularJS und zeigen euch, wo ihr weitere Tutorials und Hilfe für das JavaScript-Framework findet.
Was ist AngularJS?
AngularJS bzw. kurz Angular ist ein Open Source Framework von Google. Es arbeitet clientseitig und kann leicht mittels JSON an unterschiedliche serverseitige Systeme und Datenbanken angebunden werden. Das AngularJS wird gerne für die Erstellung von Single-Page-Webseiten genutzt. Basis des Frameworks bilden die Technologien HTML und JavaScript sowie das Model View ViewModel Design Pattern, welches eine Variante des Model View Controller Entwurfsmusters ist.
Konsistenz durch Two-Way-Databinding
Ein zentrales Feature von AngularJS ist das Two-Way-Databinding. Diese zugegebenermaßen performancehungrige Eigenschaft des Frameworks sorgt für Konsistenz zwischen View- und Model-Ebene: Änderungen am Model lösen eine Aktualisierung der View aus und umgekehrt.
Selbstgesetztes Ziel des Frameworks ist es die Entwicklungszeiten zu senken. Dazu setzt die beliebte Lösung auf benutzerdefinierte HTML-Elemente und Attribute. Diese werden bei Angular als Direktiven bezeichnet. Das Framework kommt bereits mit einigen vordefinierten Direktiven daher. Diese sind am Präfix ng zu erkennen, zu den bekanntesten gehört ng-repeat.
ng-repeat
Die Direktive ng-repeat erlaubt das Programmieren von Schleifen. Sie ermöglicht Collections, also Arrays oder Objekte in der View, auszugeben. Dabei kann die Ausgabe durch Filter und Expressions beeinflusst werden. Die Filter sind eigene oder vordefinierte Funktionen, die an die Ausgabe der Direktive gebunden werden.
Beispiel für eine einfache Sortierung:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - hosting</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular.min.js"></script>
</head>
<body ng-app="">
<div ng-init="packs = [{pack:'Mid', space:'100'},
{pack:'Pro', space:'1000'},
{pack:'Simple', space:'10'},
{pack:'Business', space:'5000'}]"></div>
<table id="unsorted">
<tr><th>Pack</th><th>Space</th></tr>
<tr ng-repeat="pack in packs">
<td></td>
<td></td>
</tr>
</table>
<hr>
<table id="sorted">
<tr><th>Pack</th><th>Space</th></tr>
<tr ng-repeat="pack in packs | orderBy:'space'">
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
Filter
Die erste Tabelle im Beispiel gibt die Daten unsortiert aus. In der zweiten Tabelle sorgt der Filter orderBy für das Feld space für die Sortierung der Daten nach der Space-Größe. Ändern von orderBy:'space' zu orderBy:'pack' würde eine Sortierung der Paketnamen nach dem Alphabet auslösen.
Expressions
Durch eine kleine Modifizierung des Codes für die zweite Tabelle schreibt Angular den Paketnamen in Großbuchstaben. Dazu genügt es, pack.pack um die Funktion toUpperCase() zu ergänzen. Ein + und der String MB hinter pack.space - innerhalb der geschweiften Klammern - ergänzt den String 'MB'.
<table id="sortedUppercase">
<tr><th>Pack</th><th>Space</th></tr>
<tr ng-repeat="pack in packs | orderBy:'space'">
<td></td>
<td></td>
</tr>
</table>
Testen könnt ihr die Codebeispiele auf Plunker unter der URL http://plnkr.co/edit/naWdmPTFpzjCqCd4DJfu
Module, Scopes und Controller
Ihr vermisst JavaScript-Code? Die bisherigen Beispiele zeigen, wie leicht und effizient sich mit AngularJS Daten visualisieren und manipulieren lassen. Und das funktioniert bis zu einem gewissen Grad sogar ohne eigenen JavaScript-Code, allein mit den HTML-Erweiterungen von Angular. Benötigt ihr für eure Webanwendungen eigene und komplexere Funktionen, ist es Zeit für Module, Scopes und Controller.
H3 Module
Module kapseln euren JavaScript Code. Sie enthalten unter anderem selbst erstellte Controller, Filter und Direktiven. Es ist üblich, die Module in einem separaten File abzulegen. Gängig ist es dies mit app.js zu bezeichnen.
Bereits eine Zeile genügt im app.js, um ein Modul zu erstellen.
angular.module('hosterApp', []);
Der erste Parameter des Aufrufes ist der Modulname, der zweite Parameter, ein Array, nimmt Abhängigkeiten auf. Die Verbindung zwischen HTML-Code und Modul erfolgt über die ngApp-Direktive. Dies kann im zentralen html-, body- oder einem Container-Tag erfolgen.
<body ng-app="hosterApp" ng-controller="PackCtrl">
Mit der Direktive ng-controller definieren wir den Controller, der die Verarbeitung übernehmen soll.
Achtung: zusätzlich ist mittels Script-Tags der App-File im HTML-Dokument einzubinden!
Controller
Controller definieren das Model sowie die Logik. Im folgenden einfachen Beispiel umfasst der Controller im Prinzip nur die Variablendefinition. Als Namenskonventionen hat sich das Anhängen von Ctrl für Controller etabliert.
angular.module('hosterApp', []) .controller('PackCtrl', function($scope){ $scope.packs = [
{pack:'Mid', space:'100'},
{pack:'Pro', space:'1000'},
{pack:'Simple', space:'10'},
{pack:'Business', space:'5000'}
];
});
Scopes
Scopes sind Variablen, die als Bindeglied zwischen View und Controller dienen. Im obigen Beispiel nehmen wir die Variablen aus unseren bisherigen Beispielen und verschieben diese in die app.js. Zugriff auf die Skopes erhalten wir durch die Direktive ng-app. Die Verwendung der Variablen in der Index.html erfolgt analog zu dem Beispiel ohne app.js-Datei.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - hosting 2</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="hosterApp" ng-controller="PackCtrl">
<table id="unsorted">
<tr><th>Pack</th><th>Space</th></tr>
<tr ng-repeat="pack in packs">
<td></td>
<td></td>
</tr>
</table>
<hr>
<table id="sorted">
<tr><th>Pack</th><th>Space</th></tr>
<tr ng-repeat="pack in packs | orderBy:'space'">
<td></td>
<td></td>
</tr>
</table>
<hr>
<table id="sortedUppercase">
<tr><th>Pack</th><th>Space</th></tr>
<tr ng-repeat="pack in packs | orderBy:'space'">
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
Testen könnt ihr den Code unter http://plnkr.co/edit/fsTJsiTrGqZFIorMWOeu
Angular und Datenbanken
Datenbanken sind ein fester Bestandteil moderner Webentwicklung, so darf auch bei AngularJS die Anbindung von Datenbanken nicht fehlen. Diese kann leicht durch JSON gelöst werden. Wie dies funktionieren kann, zeigen euch die folgenden Websites:
- http://codeforgeek.com/2014/09/two-way-data-binding-angularjs/
- http://www.angularcode.com/user-authentication-using-angularjs-php-mysql/
- http://devzone.co.in/angularjs-simple-example-post-data-php-page/
Apis, Tutorials und Best-Practice-Code
Einen Einstieg bietet die Projektseite https://angularjs.org/. Auf der Subdomain https://docs.angularjs.org/api ist die AngularJS Api zu finden. Sucht ihr Tutorials, Blogs und weiteres rund um Angular in deutscher Sprache ist https://angularjs.de/ eine gute Anlaufstelle. Wer AngularJS Best Practices lernen möchte, sollte das folgendene Video anschauen: https://www.youtube.com/watch?v=9IBljKq4XrQ.