Als sehr neue Technologie im Bereich Webdevelopment erfreut sich seit einiger Zeit AngularJS von Google sehr großer Beliebtheit. In einigen Artikel hier habe ich das Thema ja schon aufgegriffen und werde jetzt noch einmal detaillierter in die ein wenig in die Tiefe gehen. Es geht also um die „AngularJS Highlights“.
AngularJS Highlights in der Übersicht
Dieser Artikel gliedert sich sin die folgenden Bereiche. Two Way Data-Binding, Templates, MVC, Dependency Injection, Directives und Testing. Persönlich habe ich schon viele Webapplikationen mit Javascript umgesetzt. Natürlich auch sehr viel mit jQuery. Es ist ein Genuss auf solch große Features out of the Box zu zugreifen und diese auch in Kombination mit mit Twitter Bootstrap zu nutzen. Tolle Möglichkeiten gibt es hier mit Slidern, Image-Gallerien und natürlich vielen Effekten für Formulare oder sonstiges. In Kombination mit AJAX ist es auch möglich DOM-Elemente zu manipulieren. Diese Vielzahl von jQuery-Features und auch die Tatsache, daß sie in viele CMS-Systeme fest etabliert sind beschränkt den Anwendungsfall von AngularJS sehr stark. Sicherlich ist die Neuentwicklung kompletter Webapplikationen daher der bevorzugte Anwendungsfall. Von der Anzahl der Features holt AngularJS nahezu täglich auf und auch bei der Kompatibilität zu CSS-Frameworks.
AngularJS Two Way Data-Binding
AngularJS Data-Binding
Data-Binding ist ein sehr wichtiges Feature im modernen Webdesign. Dabei können Daten von 2 Stellen aus manipuliert werden. Einmal vom User, dadurch das er neue Eingaben vornimmt und über die Applikation indem sie neue Daten zur Verfügung stellt. Betrachten wir z.B. die Facebook Timeline. Sie wird von verschiedenen Usern auf der ganzen Welt gefüllt. Dabei sind beide Seiten aktuell zu halten. Also das Frontend und das Backend. In diesem Falle ist es eine Realtime Webapplikation. Die uns die aktuellen Daten zeigt und die wir ständig erweitern können. Im Bezug auf AngularJS gibt es hierzu folgendes Zitat
Think of your model as the single-source-of-truth for your application. Your model is where you go to to read or update anything in your application.
In AngularJS ist Data-Binding eine große Stärke. Nutzt man alternative Technologien ist der Weg hier sehr lang. Stichworte sind hier beispielsweise Boilerplate oder Knockout. In AngularJS ist Data-Binding einfach, zuverlässig und innovativ. So wird die Synchronisierung zwischen DOM und Model zum Kinderspiel.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/angular-1.3.15.min.js"></script> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="name" placeholder="Ihr Name"> <hr> <h1>Hallo, {{name}}!</h1> </div> </body> </html> |
In dem oben genannten Beispiel wird direkt im Frontend das ng-model=“name“ instanziert und bei der Eingabe direkt in der folgenden Überschrift als {{name}} ausgegeben. Und das ist genau die Stelle, die mich am meisten in AngularJS beeindruckt hat. Dafür ist es gar nicht nötig mehr Javascript Code zu schreiben. Das funktioniert einfach. Das ist der AngularJS Magic, der mich seit über einem halben Jahr antreibt und täglich wieder in seinen Bann zieht.
AngularJS Templates
AngularJS Template
Templates sind aus dem heutigen Webdevelopment nicht mehr wegzudenken. Ein Template ist dabei ein HTML Gerüst in dem bestimmte Teile dynamisch ersetzt werden. AngularJS sagt man eine extrem hohe Performance nach, da die Templates bereits bereits als JS-Files zum Client übertragen wurden und daher bereits gerendert sind. Das stimmt so nicht ganz ist aber tatsächlich ein starker Vorteil. In meinen Augen ist der größte Dabei die Datenübertragung, gerade für den mobilen Bereich. Es müssen nur noch die relevanten Daten übertragen werden.
An dieser Stelle möchte ich ein wenig tiefer in die Technik von AngularJS Templates einsteigen. Das HTML wird über den Webbrowser in das DOM geparsed. Das DOM insgesamt geht dann wieder zum AngularJS Compiler. AngularJS bildet als AngularJS-Directives zusätzliche Rendering Anweisungen für das Template. Diese Directives sind also zuständig für das Data-Binding im AngularJS-View.
Das hier muß verstanden werden, damit man den großen Vorteil von AgularJS erkennt und versteht. Das HTML des AngularJS-Views wird also nicht als String gehandhabt und darin Teile ersetzt. Der Input hier ist das bereits fertige Browser DOM. Man kann also nicht nur von Precompiled sondern von vorgerendert sprechen. Man betrachtet also generell bei der Programmierung von AngularJS das DOM. Dadurch ist mal Realtime.
Ob jetzt Backend- und Frontend-Developer näher zusammen rücken, da es ein schönes Markup für HTML ist und man hier fertige Views von Frontend Developern bekommt glaube ich nicht. Aber wie jede Template Sprache verfolgt natürlich auch AngularJS diesen Ansatz. Ich persönlich finde die Autovervollständigung in PhpStorm durch das AngularJS-PhpStorm Plugin sehr gut. Das gibt es sicher auch für andere Webdeveloper IDEs. Auch das hier ist neu und muß gegoogelt, gelernt und angewendet werden.
Hier ist ein Beispiel dafür, wie man Daten mit ng-repeat im View rendert.
|
1 2 3 4 5 6 7 |
function ImageCtrl($scope) { scope.images = [ {"thumbnail":"img/image_01.jpeg", "description":"Image 01 Beschreibung"}, {"thumbnail":"img/image_02.jpeg", "description":"Image 02 Beschreibung"}, {"thumbnail":"img/image_03.jpeg", "description":"Image 03 Beschreibung"} ]; } |
|
1 2 3 4 5 6 7 |
<div ng-controller="ImageCtrl"> <ul> <li ng-repeat="image in images"> <img ng-src="{{image.thumbnail}}" alt="{{image.description}}"> </li> </ul> </div> |
AngularJS MVC
AngularJS MVC Model View Controller
Ein MVC-Framework bietet viele Vorteile. Der AngularJS-Quellcode wird strukturierter und übersichtlicher. Das ist natürlich ausschlaggebend für die Erstellung komplexer Applikationen. Und da die hier von AngularJS übernommen und gesteuert wird hat man die nicht mehr im Backend. Das dient jetzt wieder als reiner Data-Provider.
Das AngularJS-Model
Das Model stellt die Daten in der Applikation dar. Es sind also einfache Javascript-Objekte. An dieser Stelle braucht man hier keine speziellen Getter und Setter. Oder sonstige Daten Aufbereitungen. Die Tatsache, daß es sich hier um einfaches Javascript handelt ist einfach nur schön.
ViewModel
Das ViewModel stellt spezifische Daten und Methoden einem speziellen View zur Verfügung. Das ViewModel ist das $scope Object der AngularJS-Applikation. Das $scope-Objekt ist ein einfaches Javascript Objekt mit einer einfachen API über das Daten Änderungen durchgeführt werden können.
Controller
Der Controller ist zuständig für die initiale Bereitstellung der Daten im $scope und alle anderen routenrelevanten Daten. Er ist das Herzstück der jeweiligen Route und enthält neben allen Abhängigkeiten auch große Teile der Logik. Diese kann weiter ausgelagert werden. Grundsätzlich ist es aber auch möglich alles über den Controller und das $scope Objekt zu handeln.
View
Das HTML-Template, in diesem Falle natürlich auch ein Javascript, zum rendern der Ausgabe. In dem Template ist das werden alle HTML-Elemente abgelegt und ggf. eingeblendet oder iteriert. Duch das Data-Binding kann man hier sehr leicht die einzelnen Cases abbilden und Daten auch sehr schön über sogenannte Filter formatiert ausgeben.
AngularJS Dependency Injection
AngularJS Dependency Injection
Ganze Bücher gibt es zu dem Thema und wer sich einmal durch das PHP-Framework Symfony gearbeitet hat kommt daran gar nicht vorbei. Eine große Hürde, die viele Entwickler dann doch lieber zu einfacheren Frameworks, wie CodeIgniter bringt. AngularJS hat hier den großen Vorteil, daß es über eine Build-in Dependency Injection zur Verfügung stellt, die sehr leicht zu verstehen ist. Über die Dependency Injection werden also Abhängigkeiten zur Verfügung gestellt und es wird auch dafür gesorgt, daß diese erst geladen werden. So sagt man beispielsweise in einem Controller welche Services man gerne als Parameter zur Verfügung hätte.
|
1 2 3 |
function sampleCtrl($scope, $location, $routeParams) { // Sample Code } |
Genauso einfach lassen sich allerdings auch eigene Dependencies schreiben.
AngularJS Directives
Directives können als Widget verstanden werden. Deren einfache Handhabung und der einfache Einsatz sind sicher auch ein weiterer großer Pluspunkt für AngularJS. Das wird auch immer wieder bei den Vorteilen gegenüber jQuery erwähnt. Pratischerweise können Directives auch als Listener verwendet werden. Hier einmal ein Beispiel.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
angular. module('SomeModule', []). factory('notify', ['$window', function (win) { return function (msg) { win.alert(msg); }; }]); function example(scope, notifyService) { scope.outputMsg = function (msg) { notifyService(msg); }; } myController.$inject = ['$scope', 'notify']; |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
myModule.directive('sampleComponent', function(mySomethingService) { return { restrict: 'E', controller: function($scope, $attrs, mySomethingService) { $scope.$on('handleMessenger', function() { $scope.message = 'Directive: ' + mySomethingService.message; }); }, replace: true, template: '<input>' }; }); |
Und dann kann man das ganze direkt so nutzen.
|
1 |
<sample-Component ng-model="message"></sample-Component> |
So können Funktionen beliebig hinzugefügt, editiert und gelöscht werden.
AngularJS Testing
AngularJS Testing
Das AngularJS Team legt großen Wert auf die Testbarkeit von Code. Dieses Ziel macht es von Anfang an sehr einfach seine AngularJS Applikation zu testen und man sollte sich das auch einfach schnell angewöhnen. Ein sehr gutes Online Tutorial zum Thema AngularJS-Testing gibt es hier https://github.com/angular/angular-seed.
