Zum Inhalt

Erste Schritte mit AngularJS

MVC-Frameworks für JavaScript gibt es mittlerweile in Hülle und Fülle. Diese unterscheiden sich nicht nur im Funktionsumfang, sondern auch in der Handhabung und der Dokumentation. Dies macht es nicht gerade einfach ein zum eigenen Projekt passendes Framework auszuwählen.

Da ich nicht der erste bin der vor dieser Entscheidung steht konnte ich glücklicherweise auf die Arbeit von TodoMVC zurückgreifen. Zahlreiche Freiwillige haben sich die Mühe gemacht die immer gleiche Todo-Anwendung in den einzelnen Frameworks zu implementieren. So sind mittlerweile über 50 verschiedene Frameworks vertreten und lassen sich recht einfach vergleichen.

Nachdem ich mehrmals gehört hatte wie toll AngularJS sei und mir auch das Beispiel dazu gefallen hat habe ich mir dieses Framework genauer angeschaut. AngularJS wird seit 2009 von Google entwickelt und bietet neben einer Trennung von DOM und Applikationslogik auch einen sehr einfachen Einstieg.

Data Binding inklusive

Das Konzept von Data Binding in Silverlight und WPF hat mir immer schon gefallen. Bei AngualJS ist dies von Grund auf integriert und hilft einem so wie bei den XAML-Varianten mit sehr wenig Code das GUI an die Daten in einem Modell zu binden. Die dazu passende Mini-Anwendung kommt mit 13 Zeilen Code aus:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
  <div ng-app>
    <label>Name:</label>
    <input type="text" ng-model="name">
    <hr>
    <h1>Hello {{name}}!</h1>
  </div>
</body>
</html>

Führt man diesen Code im Webbrowser aus funktioniert das Data Binding wie erwartet

JSON verarbeiten

Will man Daten anzeigen die als JSON formatiert sind ist dies ebenfalls ohne grossen Aufwand möglich - ausser die Daten kommen von einem anderen Server. In dem Fall stösst man schnell auf die Abkürzung CORS (Cross-origin resource sharing) und muss daran denken die Headerzeilen zu modifizieren. Ist dies geschafft muss man nur noch den Endpunkt angeben und die Daten korrekt auslesen.

Zum Testen nutzte ich den Service https://md5.jsontest.com der einen Parameter text ausliest und den dazugehörigen MD5 Wert mit dieser JSON-Antwort zurückliefert:

1
2
3
4
{
   "md5": "8b1a9953c4611296a827abf8c47804d7",
   "original": "Hello"
}

Um den Service aufzurufen genügt dieser Code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html ng-app="myApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
  <div ng-controller="ServerCtrl">
    <form ng-submit="onSend()">
      <input type="text" ng-model="input"/>
      <button type="submit">Click</button>
    </form>
    <hr>
    MD5 value: <div class="result">{{md5Value}}</div>
  </div>
</body>
<script>
var myApp = angular.module('myApp', []);

// Header modifizieren
myApp.config(['$httpProvider', function($httpProvider) {
  $httpProvider.defaults.useXDomain = true;
  delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);

// Service aufrufen
myApp.controller('ServerCtrl', function ServerCtrl($scope, $http){
  $scope.onSend = function() {
  var url = "http://md5.jsontest.com/?text=" + $scope.input
  $http.get(url)
    .then(function(result)
    {
      $scope.md5Value = result.data.md5
    })
  }
});
</script>
</html>

Serviceaufruf mittels AngularJS

Damit all dies funktioniert braucht es die Parameter $scope und $http beim Methodenaufruf. Dies signalisiert AngularJS das hier mittels Dependency Injection die passenden Objekte eingefügt werden sollen. Folgt man der Namenskonvention ist der Code ganz einfach und wie durch Magie werden alle Abhängigkeiten korrekt ersetzt. Aber wehe man vertippt sich...

Hilfreiche Ressourcen

Neben der offiziellen Dokumentation gibt es zahlreiche weitere Blogs und Videos die einem beim verstehen dieses Frameworks helfen. Wie immer freue ich mich auch bei diesem Thema um weitere Links zu guten Unterlagen.

K. Scott Allen hat in den letzten Monaten zu fast allen Aspekten von AngularJS ausführlich gebloggt. Neben Themen für Einsteiger hat er dabei auch etliche fortgeschrittener Problemstellungen betrachtet.

Für einen strukturierten Einstieg hat mir die Serie "Show me AngularJS" bei Tekpub sehr gefallen. Rob Conery zeigt einem dabei nicht nur die schönen Seiten von AngularJS sondern auch was alles für Stolperfallen auf einen warten.

Wer nur wenig Zeit hat findet bei Egghead.io derzeit 45 Videos die jeweils nur wenige Minuten lang sind und sich genau einem einzelnen Aspekt widmen. Diese Fokussierung ist besonders hilfreich wenn man die Antwort auf eine spezifische Frage sucht.

Auch an der NDC Oslo gab es zahlreiche Präsentationen rund um AngularJS. Dabei wurde nicht nur gezeigt wie AngularJS funktioniert sondern auch wie es sich im Vergleich mit anderen Frameworks schlägt – und dies im wahrsten Sinne des Wortes:

Nächste Schritte

Die ersten Versuche zeigten mir dass ich viele sonst komplexe GUI-Zaubereien mit AngularJS sehr einfach umsetzen kann. Ich habe aber noch zu grosse Lücken im Bereich JavaScript um mit diesem Framework effizient arbeiten zu können. Neben dem vertiefen meiner JavaScript-Kenntnisse will ich überprüfen wie es um die Testbarkeit von AngularJS wirklich steht. Die Ergebnisse werde ich ebenfalls in diesem Blog veröffentlichen.