AngularJs TypeScript Interceptor Template


AngularJs bietet ein interessantes Konzept um AJAX Requests bzw. Response zu manipulieren oder zu prüfen ob ein Response bestimmte Daten enthält. Das ganze nennt sich HTTP Interceptor. Ich verwende es z.B. für die folgenden Aufgaben in meinen Projekten

  • Prüfen ob im Response eine Meldung enthalten ist die angezeigt werden soll, wenn diese vorhanden ist, existiert im Response JSON immer ein Property mit dem Namen “Message” und dieses wird dann entsprechend ausgewertet und angezeigt ohne das ich an der eigentlichen Funktion wo der Request gestartet wurde in irgendeiner Art eingreifen muss.
  • Prüfen ob der Response fehlerhaft ist und wenn ja auf eine Fehlerseite umleiten und den Fehler entsprechend anzeigen.
  • Bei einem Request den Header manipulieren und noch ein Antiforgery Token hinzufügen
  • Bei einem Request prüfen ob es sich um den IE handelt und hier das Caching für AJAX Requests über die Standard Header deaktivieren

Dies sind nur einige wenige Funktionen wo es sich lohnt auf AngularJS HTTP Interceptoren zu setzen.

Ein passenden Template für einen HTTP Interceptor in TypeScript sieht z.B. folgendermaßen aus.

 

Ein Beispiel wie das ganze in einem Projekt eingebunden werden kann findet Ihr in meinem GitHub Projekt.

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.

Resharper Code Templates über Resharper Extension bereitstellen


Ich hoffe zumindest, dass jeder der mit Resharper arbeitet sich auch schon einmal die Resharper Code Templates angeschaut hat. Denn diese sind sehr einfach zu erstellen und können einem viel Arbeit abnehmen. Außerdem kann man die Templates auch exportieren und die wichtigsten Templates für das Team auf einem Share oder Webserver als NuGet Paket für die Resharper Extensions bereitstellen.

1. Exportieren der Resharper Code Templates

Zum Exportieren der aktuellen Code Templates, im Visual Studio unter Resharper, auf “Manage Options” klicken.

image

Und in diesem Dialog unter “Import und Export” auf “Export to File” gehen.

image

Hier kann man jetzt auswählen, welche Settings man exportieren möchte und dazu gehören z.B. auch Code Styles und Live Templates. Da ich im Moment nur die Live Templates teilen möchte, exportiere ich nur diese.

image

Diese werden dann z.B. als “AlleLiveTemplates.DotSettings” im Dateisystem abgelegt.

2 Erstellen der NuGet Datei “meineLiveTemplates.nupkg”

Dafür muss eine nuspec Datei erstellt werden, welche benötigt wird um in Verbindung mit der NuGet.exe eine nupkg Datei zu erstellen in der unsere *.DotSettings eingebettet ist.

Dafür benötigt man die Nuget.exe diese kann man direkt auf der NuGet Webseite herunterladen. Der Inhalt der nuspec Datei sieht z.B. folgendermaßen aus.

Wichtig zu wissen ist, das die depenency “Wave” mit Version 5 für Resharper 10.1+ (auch 2016.1.x) ist, damit die NuGet Datei später von Resharper auch als Resharper Extension erkannt wird. Außerdem muss beim Target darauf geachtet werden, dass wie in meinem Beispiel  “AngularJsResharper.Settings” an der passenden Stelle im Target steht und mit der “id” aus “metadata” im nuspec übereinstimmen. In meinem Beispiel liegt die “AlleLiveTemplates.DotSettings” im gleichen Verzeichnis.

Das ganze sieht dann z.B. folgendermaßen aus.

image

Wenn man eine neue Version seiner nuspec erstellt, sollte man auch nicht vergessen die Versionsnummer hochzuzählen, denn dann zeigt Resharper ab Visual Studio 2015 in der Statusleiste auch an das es ein Update gibt.

Und damit ich nicht jedes mal die Konsole öffnen muss, habe ich eine bat Datei erstellt in der nur eine Zeile steht:

nuget.exe pack AngularJsResharperSettings.nuspec

Wenn man jetzt die bat Datei ausführt, sieht das Verzeichnis in meinem Fall danach so aus

image

3 Bereitstellen der nuget für die Resharper Extensions

Dafür kann man in den Resharper Optionen unter dem Punkt “Extension Manager”

image

Noch weitere Quellen angeben, z.B. ein lokales Verzeichnis oder einen Netzwerkpfad, wenn man die Einstellungen auch mit anderen Entwicklern teilen möchte und hier einfach unsere nupkg Datei einfügen und schon findet man diese auch im Resharper Extension Manager.

image

image

image

Jetzt muss man die Settings nur noch installieren und Visual Studio neustarten und schon kann man auch die bereitgestellten Templates verwenden.

Hinweis: Da ich mit den Settings etwas exzessiv auf meinem Rechner herumgespielt habe und auch meine eigenen Templates mehrmals lokal importiert und exportiert habe, scheint Resharper hier noch ein paar Bugs zu haben, denn manchmal wurden bei mir nicht alle Templates angezeigt, nachdem ich die Settings installiert hatte. Wenn Ihr daher nicht sicher seid ob alle Templates auch geladen werden, sucht euch einen Rechner von einem Arbeitskollegen der am besten bisher noch nichts mit Resharper Templates gemacht hat und schaut dort ob alles da ist.

Das ganze geht natürlich auch für ältere Resharper Versionen, hier sind die nuspec Einstellungen nur etwas anders. In der Quelle findet Ihr auch noch die Einstellungen für die älteren Resharper Versionen.

Quelle: http://asizikov.github.io/2015/07/05/sharing-resharper-settings/

AngularJs Draggable Direktive für UI-Bootstrap Modal in TypeScript


In meinen aktuellen AngularJs Projekten verwende ich für das Layout meist Bootstrap und für die JavaScript Umsetzung der Komponenten dann entsprechend UI-Bootstrap. Seit einiger Zeit wird das Projekt auch wieder aktiv weiterentwickelt. Leider werden die Komponenten sehr “einfach” gehalten und setzen nur die Funktionalität um die auch das klassische Bootstrap bietet. Es gibt noch weitere Komponentenanbieter für Bootstrap, wie z.B. AngularStrap wo mehr Zeit auch in zusätzliche Features investiert wurde, nur leider wird das Repo aktuell nicht mehr so regelmäßig aktualisiert.

Daher versuche ich aktuell vermehrt auf UI-Bootstrap zu setzen und habe hier eine einfache Direktive erstellt, mit der das Standard Modal Draggable wird. Dafür muss man einfach den Mauszeiger im Header des Modals gedrückt halten und man kann das Modal verschieben. Die Direktive muss dabei nur in AngularJs registriert werden, denn sie hängt sich automatisch an eine bestehende Modal CSS Klasse “modal-dialog” und damit sind alle Modals verschiebbar, wenn die Direktive einmal registriert wurde.

Der passende TypeScript Code zum Draggable Modal

TypeScript Erstellung/Fehleranzeige in Visual Studio deaktivieren


Das gute an TypeScript ist zwar, das man direkt beim Erstellen des Projektes in Visual Studio sieht, wenn es zu einem Fehler kommt und das Projekt nicht gestartet werden kann, wie man es auch von C# gewohnt ist.

Nur leider kann es durchaus dazu kommen das der TypeScript Code kurzzeitig nicht gebaut werden kann, da z.B. T4 Templates wie TypeLite oder ProxyGenerator die TypeScript Code erstellen einen Fehler werfen und die generierten TypeScript Dateien leer sind und alle anderen TypeScript Programmteile die darauf zugreifen nicht mehr funktionieren. Hier ist es meist notwendig, das das Webprojekt neu erstellt werden muss, damit die Generatoren auf die Web DLL zugreifen können, um den passenden TypeScript Code zu erstellen.

Zum Glück ist es inzwischen möglich mit Hilfe des Tags

welcher in der .csproj in der TypeScript Definition einer PropertyGroup eingefügt werden muss, das Projekt trotz vorhandener TypeScript Fehler zu kompilieren.

Die komplette Property Group kann dann z.B. folgendermaßen aussehen

Wenn Ihr keine Attribute wie TypeScriptTarget oder TypeScriptSourceMap in eurer .csproj finden könnt, dann müsst Ihr vorher einfach die TypeScript Build Einstellungen des Projektes öffnen und eine Einstellung ändern, dann speichern und dann einfach wieder den Originalwert einstellen und Ihr solltet die Werte wie oben in eurer .csproj finden.

image

Ein weitere sehr nette Extension für Visual Studio in diesem Zusammenhang ist “editproj”, damit bekommt Ihr im Submenü, wenn Ihr auf ein Projekt klickt die Auswahl “Edit Project File” was die .csproj direkt zum Bearbeiten öffnet.

image

Denn wenn euer Projekt wieder läuft, wollt Ihr ja auch das die TypeScript Dateien wieder erstellt werden und Ihr merkt wenn Ihr einen “richtigen” Fehler gemacht habt.

Angular 2 “Hello World” mit Visual Studio 2015 Update 2, ASP.NET 4 und TypeScript (aktualisiert für Angular 2.0.0 RC5)


Da es nicht jedem Entwickler vergönnt ist immer auf die neuesten Technologien zurückgreifen wie z.B. ASP.NET Core, dachte ich mir ich versuche es mal mit dem guten alten ASP.NET 4 und Angular 2. Aber das hat gedauert bis ich Angular 2 bei mir zum “Laufen” bekommen habe, denn es gibt für Angular 2 und den zugehörigen Abhängigkeiten kein NuGet Paket mehr. Denn leider scheint NuGet für viele JavaScript Bibliotheken an Bedeutung zu verlieren. Damit muss man auch in Visual Studio auf npm (Node Package Manager) und Konsorten zurückgreifen.

1. Erstellen einer ASP.NET 4 Anwendung

Als erstes erstellen man eine ASP.NET 4 Anwendung im Visual Studio und geht auf “File –> New –> Project” und wählt die “ASP.NET Web Application” aus.

image

Dann eine MVC Anwendung anlegen ohne Authentifizierung (enthält einfach weniger Code und die Authentifizierung wird in unserem Beispiel nicht benötigt).

image

2. NPM Konfiguration zu unserem Projekt hinzufügen

Da es leider kein NuGet Paket für Angular 2 gibt, muss man eine “package.json” im Root der Anwendung anlegen.

image

imageimage

welche Packages benötigt werden, findet man in der aktuellen Angular 2 Dokumentation, denn dabei handelt es sich nicht nur um eine einfache Angular 2 JavaScript Datei, sondern hier sind noch weitere Komponenten notwendig. Warum und weshalb kann man auch in der Dokumentation nachlesen. Aktuell sieht die Json Datei dann z.B. folgendermaßen aus

ACHTUNG: Ich habe zu den Abhängigkeiten die auf der Angular Seite angezeigt werden, noch die aktuelle “gulp” Version hinzugefügt (Warum erläutere ich weiter unten)

HINWEIS: Da sich die Router Componente von der Beta Version zur RC Version sehr stark verändert hat, werden aktuell die neue Router Componente sowie die veraltete Router Componente (router-deprecated) zum Download angeboten, damit eine Migration von der Beta zur RC Version leichter ist.

ACHTUNG: Wenn man von der Beta auf die RC Version aktualisiert, würde ich empfehlen den node_modules Ordner vorher einmal zu löschen, da Angular jetzt in einem anderen Order zu finden ist und sich sehr viel strukturell geändert hat.

Wenn man jetzt mit der rechten Maustaste auf die package.json geht, gibt es dort einen Punkt “Restore Packages”, mit diesem werden wie bei NuGet alle Pakete heruntergeladen für unsere package.json. In ein Verzeichnis mit dem Namen “node_modules”. Das Verzeichnis wird NICHT unserem Projekt hinzugefügt und kann nur angezeigt werden, wenn man versteckte Dateien einblendet.

image

Wenn Ihr glück habt, werden alle Dateien heruntergeladen. Das sieht man, wenn man die Output Konsole öffnet und “Bower/npm” als Ausgabe anzeigen lässt, wenn hier keine Fehler auftreten ist alles OK.

image

Bei mir kam es hier aber zu einem Fehler, da Visual Studio seine eigene Installation von npm mit sich bringt, diese aber zum Herunterladen der Komponenten “veraltet” war, musste ich die neuste Version von npm installieren und dann im Visual Studio eintragen. Dafür geht man in die QuickLaunch box rechts oben und tippt “External Web Tools” ein und wählt den Eintrag aus.

image

In “External Web Tools” dann den Pfad zum aktuellen nodejs Verzeichnis hinzufügen und den Eintrag an den Anfang verschieben. Dann am besten Visual Studio noch einmal neu starten und versuchen das “Restore Packages” noch einmal auszuführen, diesmal hoffentlich ohne Fehler.

image

HINWEIS: Mit dem Update auf Angular 2 RC1 kam es bei mir zu einem weiteren Fehler und im Output Fenster für “Bower/npm” stand z.B. folgende Fehlermeldung:

npm ERR! 404 '@angular/http' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it

Ab der RC1 von Angular 2 ist wichtig das man mindestens NodeJs 6.x installiert hat und NPM mindestens Version 3.8.9 installiert hat, denn nur dann werden die neuen Packages erkannt und können heruntergeladen werden. Leider geht bei mir zumindest die IntelliSense für die Erkennung der Versionsnummern im package.json für die Angular Pakete mit dem “@” davor nicht mehr.

3. Wozu ist überhaupt dieses “gulp” da?

Wir haben zwar unsere Module alle heruntergeladen die in der package.json eingetragen waren, aber diese liegen in einem eigenen Verzeichnis “node_modules” in dem noch viel mehr Dateien liegen. Mit gulp kann man eine einen “Task” erstellen der z.B. vor jedem starten des Projekts alle für uns wichtigen JavaScript oder Stylesheet Dateien in den lokalen Scripts oder Styles Ordner kopiert oder temporäre Dateien löscht oder Minifizierungen durchführt. Dafür muss im Root unserer Webseite eine “gulpfile.js” angelegt werden mit dem folgenden Inhalt.

Wenn man jetzt mit der rechten Maustaste auf die “gulpfile.js” klickt, gibt es einen Punkt “Task Runner Explorer”, diesen bitte anklicken.

image

und es öffnet sich ein neues “Fenster”. Wenn dies noch “leer” aussieht, dann am besten Visual Studio neu starten.

image

Nach dem Neustart sollte das ganze folgendermaßen aussehen

image

Mit der rechten Maustaste auf “moveToScripts” kann man das ganze auch direkt einmal ausführen und wenn das Ausführen erfolgreich war, können wir in unseren Scripts Ordner gehen und hier alle Dateien anzeigen lassen, denn diese wurden nicht dem Projekt hinzugefügt, sondern nur in den Ordner kopiert.

image

image

Ich habe diese dann in das Projekt eingebunden mit “Include In Project”

image

3. TypeScript Einstellungen

Am besten ist es wenn man die neuste Version von TypeScript installiert hat, denn bei mir gab es erst ab Version 1.8 keine Probleme mehr, obwohl eigentlich 1.5 ausreichen sollte. Dann müssen wir eine erste TypeScript Datei in unserem Projekt hinzufügen, am besten unter: “ScriptsApp/mainApp.ts” (nicht von den anderen Ordnern verwirren lassen, es handelt sich nur um eine App die schon etwas mehr demodaten enthält)

mainApp

Jetzt öffnen wir die Einstellungen (Properties) der Webseite und schauen uns die “TypeScript Build” Einstellungen an, jetzt sollten die Einstellungen auch in der csproj generiert sein.

image

Ich habe es leider nicht hinbekommen TypeScript über eine “tsconfig” zu konfigurieren (sollte es hier einen Trick geben, freue ich mich auch wieder über einen Kommentar).

Da Angular 2 mehrere “experimentelles TypeScript Feature” verwendet  die erst noch aktiviert werden müssen. Muss man die “csproj” Datei der Webseite bearbeiten, denn die Features die man benötigt, können nicht in den Einstellungen der Webseite eingestellt werden. Dafür muss die Webseite entladen werden mit “Unload Project”.

image

Danach kann man wieder mit der rechten Maustaste auf das entladene Projekt gehen und es bearbeiten mit “Edit …csproj”. Und in der csproj am besten nach “TypeScriptTarget” suchen und schon sieht man einen Block in dem einige TypeScript Einstellungen vorgenommen werden können.

image

Ich konnte mein Projekt mit Angular 2 erst erstellen, nach dem ich den folgenden Block mit Einstellungen für TypeScript eingefügt habe und alle anderen TypeScript Settings damit überschrieben habe.

sonst kam beim Erstellen der TypeScript Dateien immer der Fehler “module not found” und das Projekt konnte nicht kompiliert werden. Jetzt kann man die csproj wieder schließen und unser Projekt wieder laden.

TypeDefinitions für Angular 2 brauchen wir dem Projekt keine hinzufügen, diese scheint er sich über den “node_modules” Ordner (obwohl dieser ausgeblendet ist) bereits selbst zu suchen, denn dort sind bereits alle wichtigen TypeDefinitions mit enthalten (hierbei handelt es sich aber nur um meine aktuellen Beobachtungen, wenn hier jemand genaueres weiß warum das funktioniert, freue ich mich über einen Kommentar).

4. Typings installieren für Visual Studio

Damit Visual Studio auch alle Typen erkennt, muss man noch die passende browser.d.ts Datei hinzufügen. Am besten im Root Verzeichnis der Webseite mit dem NPM

typings install es6-shim --ambient --save

Der Pfad zur browser.d.ts Datei wird dann in der boot.ts entsprechend angegeben. Die von NPM hinzugefügten Dateien werden NICHT dem Projekt hinzugefügt.

image

5. Angular 2 “Hello World App”

So jetzt nachdem wir unser Projekt entsprechend vorbereitet haben, können wir auch noch unsere Angular 2 Anwendung schreiben.

Dazu erstellen wir noch zwei TypeScript Dateien „boot.ts“ und „appModule.ts“ auch direkt im „ScriptsApp“ Verzeichnis.

ScriptAppOrdner

Der Inhalt der boot.ts sieht folgendermaßen aus.

HINWEIS: “./” vor mainApp gibt an das im aktuellen Verzeichnis nach der Datei gesucht werden soll.

Die „boot.ts“ Datei gilt als Einstieg in unsere Anwendung und ruft die „appModule.ts“ Datei auf in der alle wichtigen globalen Module definiert sind und die dann auch unsere Anwendung die mainApp enthält.

für die mainApp.ts sieht der Code folgendermaßen aus und “my-app” ist der Selector mit dem wir unsere neue Komponente entsprechend anzeigen können.

ACHTUNG: Wenn man von Angular 2 Beta zur RC Updated müssen auch alle Pfade in den imports aller Projektdateien angepasst werden und aus “angular2” wird “@angular” z.B. aus “angular2/core” wird “@angular/core”.

Dann habe ich die _Layout.cshtml etwas aufgeräumt und nur noch die wichtigsten Einträge hinzugefügt, wie die Verweise auf unsere JavaScript Dateien und das Einrichten von SystemJs um unsere Dateien zu laden sowie unser neues Tag “my-app”.

Angular 2 selbst wird in den Scripts seit der RC nicht mehr direkt verlinkt, sondern dafür wird jetzt die SystemJs Konfiguration verwendet.

6. SystemJs konfigurieren

Damit Angular auch weiß wo er welche Module für Angular 2 zu finden sind, muss SystemJS noch konfiguriert werden. Ich habe dafür eine Datei mit dem Namen “systemjs.config.js” im Scripts Verzeichnis angelegt. In dieser Datei werden alle verwenden Angular 2 Module definiert und es wird angegeben wo diese zu finden sind. Ich habe diese im node_modules Ordner gelassen, denn im Beispiel auf der Angular 2 Seite wird es ebenfalls so gehandhabt.

Wenn man jetzt die Webseite startet, dann sollte das ganze funktionieren und im Browser z.B. folgendermaßen aussehen.

image

Wenn nichts angezeigt wird, am besten die Entwicklerkonsole öffnen und schauen was für ein Fehler angezeigt wird, diese sind wie ich finde inzwischen doch recht aussagekräftig, zumindest im Vergleich zu NG1.

HINWEIS: Es muss Resharper ab Version 2016.1.1 verwendet werden, da sonst die Componenten nicht erkannt werden. Leider werden die neuen Angular Tags im HTML noch nicht erkannt und werden rot unterstrichen.

Quelle:

http://www.mithunvp.com/angular-2-in-asp-net-5-typescript-visual-studio-2015/

https://yakovfain.com/2016/05/06/starting-an-angular-2-rc-1-project/

Das zugehörige Projekt auf meiner GitHub Seite sollte voll funktionsfähig sein. Aber bitte daran denken das man die passenden NPM Befehle noch ausführen muss für die Typings und den Package Restore für die package.json.

https://github.com/squadwuschel/Angular2Introduction

Updated from Angular 2.0 RC1 to RC2

Für das Update von RC1 auf RC2 habe ich lediglich die „package.json“ aktualisiert und die „systemjs.config.js“ an das Beispiel vom Angular Quickstart angepasst und schon sollte alles wieder funktionieren.

Updated from Angular 2.0 RC2 to RC3

Einfach nur die „package.json“ angepasst und die Pakete aktualisiert.

Updated from Angular 2.0 RC3 to RC4

Einfach nur die „package.json“ angepasst und die Pakete aktualisiert.

Updated from Angular 2.0 RC4 to RC5

Einfach nur die „package.json“ angepasst und die Pakete aktualisiert. Außerdem wurde das Beispiel um eine „appModule.ts“ Datei erweitert in der jetzt per „ngModule“ Decorator Globale Importe für das gesamte Projekt definiert werden können wie HTTP_PROVIDERS oder FormsModule für „(ngModule)“. Die Datei ist jetzt auch in der offiziellen Hello World Anwendung von Angular 2.0 vorhanden und ich habe mein Beispiel nur entsprechend angepasst.