Archiv für den Monat Juni 2016

T4 Template als Service/Proxybuilder für AngularJs TypeScript Services


Wenn man einen AngularJs HTTP Service erstellt der die Verbindung zum .NET Controller herstellen soll um Daten abzufragen oder zu speichern, handelt es sich immer um den “gleichen” boilerplate Code der geschrieben werden muss. Genau hier setzt mein T4 Template der Proxybuilder an und generiert die passenden AngularJs Services in JavaScript oder auch in TypeScript und in Verbindung mit TypeLite werden komplett typisierte Services erstellt.

Damit das ganze funktioniert muss man nur noch seine Controller Methoden mit einem passenden Attribut versehen z.B. “CreateAngularTsProxyAttribute”. Dann das Projekt kompilieren und das T4 Template “Scripts\ProxyGeneratorScript.tt” ausführen und schon werden die passenden AngularJs Service Funktionen erstellt. Aus dem folgenden .NET Controller

wird dann der volltypisierte AngularJs TypeScript Controller der vom T4 Template generiert wurde.

Das komplette Projekt findet Ihr auf GitHub inklusive einer ausführlichen Beschreibung und ein Beispielprojekt. Das fertige Paket gibt es auch bei NuGet.

Der Proxybuilder kann die folgenden Proxies erstellen, dafür wird jeweils nur das passende Proxybuilder Attribut benötigt:

  • AngularJs pure JavaScript Services
  • AngularJs TypeScript Services voll Typisiert und nur in Verbindung mit TypeLite zu verwenden. TypeLite erstellt Interfaces von unseren .NET Klassen in TypeScript, die der Proxybuilder dann verwendet für Übergabe- und Rückgabewerte.
  • jQuery pure JavaScript Services
  • jQuery TypeScript Services voll Typisiert und nur in Verbindung mit TypeLite.

Wenn Ihr Fragen oder Erweiterungswünsche habt, dann bitte auf GitHub als Issue eintragen.

Angular 1.5 Component Template in TypeScript


Seit Angular 1.5 gibt es noch eine neue Möglichkeit um Direktiven zu erstellen. Der neue Typ nennt sich “component” und bietet einige Vorteile gegenüber der klassischen Direktive. Dazu gehören z.B. die einfachere Konfiguration, da viele Werte bereits vorkonfiguriert sind mit den am häufigsten verwendeten Werten. Dann ist bereits die ControllerAs Syntax eingebaut, in dem man im Template standardmäßig direkt auf die Bindings (früher scope) über “$ctrl.varname” zugreifen kann. Außerdem gibt es so genannt LifeCycle Hooks wie man sie inzwischen aus Angular 2 kennt und welche erst zu einem bestimmten Zeitpunkt aufgerufen werden. Wie z.B. “$onInit()”, welche erst aufgerufen wird, wenn alle Controller und Ihre Bindungen erstellt wurden. Sie kann z.B. zur Initialisierung von eigenen Werten genutzt werden (Quelle, Angular Doku).

Im Folgenden ein einfaches TypeScript Template für die Erstellung einer Component für Angular 1.5. Wie ihr das ganze einbinden und verwenden könnt, findet Ihr auch in meinem GitHub Projekt.