Archiv der Kategorie: TypeScript

ngModel like two-way-databinding für Komponenten in Angular


Da es sich bei Angular nur noch im Komponenten handelt, ist es hier natürlich auch wichtig wie man Daten an Komponenten weitergibt und auch wieder zurückgeben kann. Dafür gibt es zwei wichtige Dekoratoren “@Input” um Daten an eine Komponenten zu übergeben und “@Output“ um Daten wieder “zurückzugeben”.

Um ein two-way-databinding zu erstellen gibt es mindestens zwei Möglichkeiten.

V1 eine ngModel Like Datenbinding mit “banana in the box” Syntax  [(name)] hier muss in der Childkomponente bei der Namensgebung des Output Dekorators darauf geachtet werden, das dieser am Ende des Namens “Change” stehen hat und der Name selbst dem vom Input Dekorator entspricht.

V2 hier handelt es sich um die “normale” Bindung mit zwei Attributen eine für die Eingabe der Werte mit eckigen Klammern  “[age]” und dann noch um eine Eventbindung mit  runden Klammern “(ageChanged)” um die Daten die aus der Child Komponente zurückgegeben werden auszuwerten. Auch hier werden wieder zwei Dekoratoren benötigt der Input um die Daten an die Komponente zu senden und der Output Dekorator um das Changed Event aufzurufen.

Parent Komponente

Child Komponente

Wie man in beiden Fällen sieht wird in der Child Komponente für den Output Dekorator ein EventEmitter erstellt mit einem bestimmten Typen (bei uns string), der als Rückgabewert im emit für den EventEmitter übergeben werden muss. Bei dem Wert den man an emit übergibt, handelt es sich um den Rückgabewert und dieser muss immer entsprechend “manuell” angestoßen werden, bei uns z.B. über das “keyup” Event unseres Inputs.

Dazu gibt es noch ein funktionierendes Plunkr Beispiel.

Advertisements

Angular 2 Services automatisch aus .NET Controller erstellen mit T4 Template


Ich habe den bereit schon einmal vorgestellten ProxyGenerator erweitert, so das jetzt auch die Generierung von Angular 2 Services aus .NET Controllern möglich ist.

Der .NET Controller wird wie gehabt über jeder Funktion mit dem passenden Attribut versehen “CreateAngular2TsProxy” und als ReturnType wird der jeweilige .NET Rückgabewert der JSON Funktion eingetragen.

Mit Hilfe des T4 Templates “ProxyGeneratorScript.tt” wird dann der folgende Strongly Typed Angular 2 Service erstellt

Das ganze kann im Detail auf der zugehörigen GitHub Seite nachgelesen werden und das Paket selbst kann man per NuGet installieren. Wichtig ist das dafür zusätzlich noch TypeLite zum Erstellen der Passenden TypeScript Interfaces für unsere .NET Typen verwendet wird und damit ist es auch erst möglich das der Service komplett typisiert erstellt werden kann.

React “Hello World” mit Visual Studio 2015 ASP.NET MVC 4 (jsx und tsx)


Als heißer Verfechter von AngularJs, habe ich mir gedacht schaust du auch mal über den Tellerrand und liest dich mal ein wenig in React ein. Denn bei React handelt es sich nicht um ein “komplettes” Framework wie AngularJs sondern eher um die Möglichkeit Performantere DOM Manipulation auszuführen, bei z.B. großen Listen, wo AngularJs so seine Probleme hat und evtl. kann ich beides später effektiv in einem Projekt verwenden.

Da ich aktuell auf ASP.NET MVC 4 Projekte und Visual Studio 2015 angewiesen bin, war dies meine erste Anlaufstelle um ein React Projekt zu erstellen. Dafür habe ich eine einfache MVC Seite erstellt.

React Bibliotheken installieren

Leichter gedacht als getan, denn die NuGet Pakete die ich so gefunden habe, waren alle nicht aktuell. Daher habe ich npm für die Installation der passenden React Pakete verwendet. Dafür muss im Root Verzeichnis des Projekts eine “package.json” Datei angelegt werden.

image

mit dem folgenden Inhalt

 

und dann einfach über die Rechte Maustaste auf der “package.json” => “Restore Packages” ausführen.

image

Danach gibt es einen versteckten Ordner “node_modules” im Rootverzeichnis unseres Projekts, in dem sich auch die zwei Verzeichnisse “react” und “react-dom” befinden.

image

Im jeweiligen “dist” Verzeichnis befindet sich die passende JavaScript Datei für “react.js” und “react-dom.js”. Diese müssen nur noch in der BundleConfig oder direkt in der Seite entsprechend eingebunden werden.

 

Da es sich hier um ein Beispiel handelt, verwende ich die Dateien direkt aus dem “node_modules” Verzeichnis. Wenn es sich um die Produktivumgebung handelt, richte ich vorher noch einen Gulp Task im Visual Studio ein, der die Dateien ins “Scripts” Verzeichnis meiner Anwendung kopiert und verlinke diese dann aus dem Scripts Verzeichnis heraus.

Damit hätten wir schon einmal die React Bibliotheken die wir für unsere Anwendung benötigen.

JSX und TSX Dateien

React selbst verwendet direkt im JavaScript HTML Syntax um seine Komponenten zu erstellen und verwendet dafür JSX (JavaScript Syntax Extension) was es wesentlich einfacher macht komplexe Komponenten direkt in JavaScript zu erstellen. Auch Visual Studio 2015 unterstützt das JSX Format. Für JavaScript muss man Dateien mit der Endung *.jsx anlegen und in TypeScript muss man Dateien mit der Endung *.tsx anlegen.

JavaScript JSX Dateien “kompilieren”

Damit die JavaScript JSX Dateien in normale JavaScript Dateien übersetzt werden können (damit sie auch der Browser versteht), verwendet man in den meisten Beispielen die JavaScript Bibliothek Babel, da ich aber Visual Studio verwende und die Erweiterung “Web Compiler” installiert habe, benötige ich keine extra JavaScript Bibliothek dafür.

image

Denn wenn man mit der rechten Maustaste auf eine JSX Datei geht, dann gibt es hier einen Punkt “Web Compiler” => “Compile file” und die Datei wird übersetzt in JavaScript und die passende JavaScript Datei wird automatisch angelegt und auch noch eine neue Konfigurationsdatei im Rootverzeichnis wird angelegt “compilerconfig.json”, in dieser Datei sind alle Dateinamen enthalten die automatisch bei Änderungen wieder kompiliert werden sollen.

image

image

Damit ist es jetzt möglich React Code zu erstellen, der automatisch beim Speichern übersetzt wird.

 

Jetzt müssen wir nur noch die Kompilierte JavaScript  Datei in der BundleConfig oder direkt im HTML verlinken und ein Element mit der ID “helloWorld” anlegen und schon funktioniert unsere “Hello World” Anwendung für JavaScript (*.JSX) Dateien.

 

TypeScript TSX Dateien und TypeDefinitions

Auch TypeScript in Visual Studio unterstützt das JSX Format, nur wird hier eine Datei mit der Endung *.tsx erstellt. Damit das ganze dann mit React zusammen funktioniert, muss noch in den Projekteinstellungen bei “TypeScript-Build” bei “JSX-Kompilierung in TSX-Dateien” auf “React” gestellt werden.

image

Das Übersetzen von TypeScript in JavaScript übernimmt hier der TypeScript Compiler nach jedem Speichern und der Web Compiler wie bei JavaScript wird hier nicht benötigt.

Damit TypeScript aber auch funktioniert, muss es React kennen und dafür werden TypeDefinition Dateien für React benötigt. Damit sich diese leichter installieren lassen und wir nicht erst eine NPM Konsole benötigen, gibt es das Addon “Package Installer”

image

Nach dem wir den Package Installer installiert haben, gibt es im Submenü in unserem Projekt den Punkt “Quick Install Package…”

image

Im Fenster was dann aufgeht, wählen wir “TSD” aus und geben “react” ein und wiederholen das ganze noch für “react-global”.

image

Jetzt gibt es einen neuen versteckten Ordner “typings” in unserem Projekt und eine “tsd.json” im Rootverzeichnis des Projekt. Ich habe beides dem Projekt hinzugefügt, damit ich diese nicht immer neu abrufen muss auf einem anderen Rechner, soweit ich es aber beurteilen kann ist dies nicht notwendig.

image

Jetzt können wir beginnen und unsere TypeScript Datei anlegen und den passenden React Code zu erstellen. Dafür müssen wir jetzt eine “*.tsx” Datei anlegen z.B. mit folgendem Inhalt

 

Von Vorteil ist wenn man hier eine Referenz auf die “tsd.d.ts” einfügt, denn dann kann man auf Nummer sicher gehen, das Visual Studio die passenden Typings auch findet.

Damit das Beispiel auch funktioniert, muss die Datei wieder in der BundleConfig eingefügt werden und unserer HTML Datei muss noch ein Element mit der ID “example” hinzugefügt werden.

So mit diesem Wissen sollte es jetzt problemlos möglich sein ein Projekt entsprechend für React vorzubereiten. Das Komplette Projekt findet Ihr auch auf meiner GitHub Seite.

Quellen:

https://templecoding.com/blog/2015/12/11/using-react-typescript-webpack-and-visual-studio/

http://staxmanade.com/2015/08/playing-with-typescript-and-jsx/

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.

Angular 4 “Hello World” mit Visual Studio 2015 Update 3, ASP.NET 4 und TypeScript (aktualisiert für Angular 4.0.3 Release)


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)

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.

ACHTUNG: Ich gebe inzwischen die Versionsnummern nur noch ohne „~“ und „^“ davor an. Denn damit hatte ich in der letzten Zeit vor allem bei den devDependencies immer wieder Probleme, das hier Pakete veröffentlicht wurden so das dass Projekt am ende nicht mehr funktioniert hat und wenn man „~“ und „^“ weglässt kann man sich „sicher“ sein das man genau die Pakete wieder bekommt und das alles noch funktioniert wie bisher.

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. (siehe auch Visual Studio 2013/2015 bereitgestellte nodejs Version veraltet)

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

Update Angualar 2.1.1: In der neuesten Version, kopiere ich die Dateien aktuell nicht mehr per Gulp ins lokale Scripts Verzeichnise, sondern verweise direkt auf die Pfade im node_modules ordner, da dieser sowieso vorhanden sein muss und dies erspart uns vorerst etwas Konfigurationsaufwand. Für den Produktivmodus wäre es aber mit sicherheit besser diese per Bundle auszuliefern.

3.1 TypeScript Einstellungen (veraltet ab VS 2015 Update 3)

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/app.modules.ts”.

scriptappordner

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 in der alten Visual Studio Version 2015 Update 2 TypeScript über eine “tsconfig” zu konfigurieren in der Neuesten Version von VS 2015 Update 3 ist dies auch mögloch über die tsconfig (weiter unten eine genauer Erläuterung dazu).

Da Angular 2 mehrere “experimentelle TypeScript Features” 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).

3.2 TypeScript Einstellungen über tsconfig.json

Ab Visual Studio 2015 Update 3 ist es auch möglich in älteren MVC Projekten auf die tsconfig.json zurückzugreifen und nicht mehr wie in 3.1  beschrieben über die Projekteinstellungen. Dafür muss im Root der Webseite, da wo auch die „package.json“ liegt eine „tsconfig.json“ angelegt werden mit dem folgenden Inhalt.

Wenn alles geklappt hat und man die Projekteigenschaften aufruft für die „TypeScript-Build“ Einstellungen, sollte hier  alles deaktiviert sein und angeben sein das mindetens eine „tsconfig.json“ gefunden wurde in der jetzt die Einstellungen konfiguriert werden.

typescriptbuildsettings

4.Typings installieren für Visual Studio (Veraltet ab TypeScript Version 2.0+)

Damit Visual Studio auch alle Typen erkennt, muss man noch die passende index.d.ts Datei hinzufügen. Und am einfachsten installiert man diese mit der Package Installer Extension, hier muss nur „Typings“ ausgewählt werden und „es6-shim“ eingetragen werden und schon werden die passenden Typings installiert.

image.png

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

image

4.1 Typings in Visual Studio ab TypeScript 2.0+

Sobald man TypeScript 2.0 oder höher verwendet, kann man auf die Typings „verzichten“ und diese werden direkt in der tsconfig.json eingestellt. Hier kommt bei „compileroptions“ das Property „lib“ hinzu. Bei lib handelt es sich um ein Enum in dem man die Umgebung angeben kann die in den TS Dateien bekannt gemacht werden soll, damit z.B: Promises erkannt werden. Wenn man zusätzlich auch noch bestimmte Typen benötigt die man über npm installiert hat wie z.B. jasmine mit „@types/jasmine“ dann gibtes noch ein neues Property „types“ hier kann man dann die customtypes noch angeben die in den TS Dateien bekannt sein sollen.

Daher wird auch in der „boot.ts“ kein Verweis mehr auf die „index.d.ts“ benötigt und kann entfernt werden. Ebenso kann die „typings.json“ und der Ordner „typings“ entfernt werden.

ACHTUNG es reicht nicht aus den Ordner „typings“ aus dem Projekt auszuschließen dieser muss auch im Filesystem entfernt werden, sonst kommt es zu Fehlern, das z.B. Promise bereits bekannt ist.

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 „app.module.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 „app.module.ts“ Datei auf in der alle wichtigen globalen Module, Componenten und Services definiert sind und die dann auch unsere Anwendung die „app.component“ enthält.

für die app.component.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. Mir ist hier aufgefallen, das die „systemjs.config.js“ jedes mal „anders“ aussieht und aufgeräumter wirkt, daher wenn Ihr Angular aktualisiert prüft auch nach ob Ihr evtl. die „systemjs.config.js“ mit anpassen müsst.

Hinweis: Für die Produktive Bereitstellung einer Angular 2 Anwendung sollte man z.B. webpack 2 verwenden, hier werden alle wichtigen Bibliotheken in eine JavaScript Datei zusammengefasst und nicht wie bei SystemJs 300+ Requests beim Aufrufen der Seite erzeugt. Ich habe dafür den folgenden Artikel erstellt „Angular 2 mit webpack 2 mit ts, less, sass Loader für Anfänger in Visual Studio 2015

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.2 verwendet werden, da sonst die Componenten nicht erkannt werden oder die neuen Angular Tags im HTML nicht erkannt und werden und dann rot unterstrichen sind.

HINWEIS: Wenn Ihr „automatisch“ aus euren .NET WebAPI oder Controller Aufrufen einen Angular 2 Service erstellen wollt, dann versucht doch einmal den ProxyGenerator. Der besteht aus einem T4 Template mit dem Ihr voll typisierte Angular 2 Services erstellen könnt direkt aus den .NET Klassen.

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/tree/master/Angular2HelloWorld

Alternativ gibt es noch eine etwas erweiterte Einführung in der auch der Ui-Router eingebunden ist und man sieht wie man einen Service einbindet.

https://github.com/squadwuschel/Angular2Introduction/tree/master/Angular2Introduction/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.

Updated from Angular 2.0 RC5 auf Angular 2.0.0 Release

Die „package.json“ angepasst und die Pakete aktualisiert. Außerdem habe ich die Typings aktualisiert und es gibt jetzt keine „browser.d.ts“ Datei mehr, sondern eine „index.d.ts“ auf die für die passendne Typings verwiesen werden muss. Wenn man bereits ein größeres Beispiel hatte welches z.B. HTTP_PROVIDERS verwendete, kommt es zu einem Fehler denn diese gibt es nicht mehr, sondern nur noch das „HttpModule“. Außerdem gibt es in „@component“ nicht mehr den Verweis auf „directives“ die darin verwendet werden, sondern diese werden jetzt alle in ngModule eingetragen. Das Beispiel auf meiner GitHub Seite verwendet die ngModules bereits und definiert auch dort die passenden Components.

Update from Angular 2.0.0 auf 2.1.1 (31.10.2016)

Ich habe die tsconfig.json hinzugefügt um eine alternative für die TypeScript Kompillierung für Visual Studio 2015 ab Update 3 und älteren MVC Projekten zu zeigen. Außerdem habe ich eine komplet Neue Angular 2 Hello World Anwendung auf Github hinzugefügt.

Update (07.12.2016) – Es gibt es jetzt einen neuen Artikel der die Verwendung von Angular 2 mit Webpack 2 beschreibt und nicht mit SystemJs.

Update (28.02.2017) – package.json angepasst auf Angular 2.4.0 und eine neue Möglichkeit Typings in Visual Studio zu verwalten hinzugefügt – denn ab TypeScript 2.0 wird kein „typings“ Ordner mehr benötigt in Visual Studio.

Update (16.05.2017) – package.json angepasst auf Angular 4.0.3