Zum Zeitpunkt des Blog Artikels befindet sich Angular.js 1.5 in der RC0 Phase. Trotz des kommenden (und völlig anderen) Angular 2 wird weiter am 1er Zweig gearbeitet. In jeder meiner bisherigen Angular Schulungen, waren Direktiven eine echte Hürde für die Teilnehmer. So kommt nun ein etwas einfachere Variante mit den Components in der Version 1.5. Überdies ähnelt die Verwendung auch den Components von Angular 2 und wird als Umstiegshilfe gesehen.
Komponenten werden als HTML Erweiterungen betrachtet, analog zu den Direktiven. Beide beschreiben das Verhalten eines kleinen Teils der Single Page Application Website. Erster Unterschied ist, das Komponenten nur als Elemente verwendet werden können. Der Erste Parameter identifiziert das neue HTML Element in der Angular Camel Case Notation. Der zweite Parameter enthält die Optionen und nicht eine Funktion (mit Rückgabeobjekt) wie bei der Direktive.
1: angualar.module("App")
2: .component(name, options);
Folgende Optionen können übergeben werden
controller – Name der oder Konstructor Funktion
controllerAs – Controller Alias
template – html Zeichenkette oder als Funktion die eine html Template Zeichenkette zurück gibt
templateUrl – Zeichenkette oder Funktion die auf eine HTML Datei verweist
bindings – JavaScript Object {} Bindungen zwischen DOM Attributen und den Component Eigenschaften des Component Controllers
transclude – innere ersetzung des HTML Templates mit HTML aus Template Referenzierung (bool)
$... – {function()=} – Factory Funktion
Als nächstes ein Beispiel einer Angular Component. Der Wert des HTML Attributes count wird im lokalen scope des Controllers zugewiesen. Der Controller zeigt auf eine inline Funktion, die eine Methode plus bereit stellt. Im Template wird in der Notation Komponenten Name . Controller Eigenschaft/Methode die Bindung an das Viewmodel deklariert.
1: .component('counter', {
2: bindings: {
3: count: '@'
4: },
5: controller: function() {
6: this.plus = function {
7: this.count++;
8: };
9: },
10: template: '<div><input type="text" ng-model="counter.count">
<button type="button" ng-click="counter.plus();">+</button></div>'
11: })
In der Praxis wird wahrscheinlich im HTML Code ein zum View gehöriger Controller, das Viewmodel bereitstellen. Entsprechend wird dem count Attribut des Counter kein Wert zugewiesen, sondern eine Eigenschaft des Controllers. Hier mit der ControllerAS Syntax als vm bezeichnet.
1: <div ng-controller="MainCtrl as vm">
2: <h1>Counter</h1>
3: <counter count="vm.count"></counter>
4: </div>
In Zeile 3 des JavaScript Component Codes wird dann die Bindung mit count :”=” auf die Eigenschaft des Viewmodels durchgereicht. Die ViewModel Eigenschaft Count kann so über vm.count dann in der Sicht Formular weiter gebunden werden.