Angular Controller as

Wenn ich so darüber nachdenke, gibt es in Angular.js mindestens immer zwei Möglichkeiten eine Aufgabe zu lösen. Eine Direktive kann eine Funktion oder ein JSON Objekt zurück liefern. Ein Service kann eine Factory oder ein Service sein. Alles leicht verwirrend. In die Kategorie, muss das auch noch sein, fällt die Scope Freiheit eines Controllers.

Üblicherweise wird jedem Controller der Scope per Dependency Injection üergeben und damit eine Singleton Instand erstellt. Es gib auch eine Alternative Variante ohne $Scope.

Dabei wird eine “Controller as” Syntax eingesetzt, die sozusagen einen Alias erzeugt, der dann als Objektträger herhalten muss.

   1:    <div ng-controller="mycontroller as hannes">
   2:          {{hannes.count}}
   3:          <button ng-click="hannes.click()">plus</button>
   4:    </div>
   5:    

 

Der zugehörige Controller wird aber gänzlich anders codiert. Zunächst wird wie üblich die App als Modul erzeugt und darin ein Controller definiert, der auf eine Controller Methode verweist. Dieser ist allerdings Parameterlos. Die Propertys des Scopes werden per this erzeugt. Das fühlt sich aus C# Entwicklersicht fast natürlich an.

JavaScript typisch, wird per Prototype das bestehende Objekt um eine Funktion, hier click, erweitert.

   1:    var App = angular.module('App', []);
   2:    App.controller('mycontroller', myfunction)
   3:    function myfunction() {
   4:        this.count = 0;
   5:      };
   6:   myfunction.prototype.click= function () {
   7:       this.count++;
   8:     };

 

Auch wenn ich die Variante mit $scope optisch weniger gelungen finde, werde ich wegen der Konsistenz innerhalb von Angular diesen Weg nicht verwenden.

Kommentare sind geschlossen