Dreamteam:
ASP.NET Core mit Web API & Angular

Workshoptag - 12. Mai
9:00 Uhr - 17:00 Uhr

mit Johannes Hoppe und Ferdinand Malcher von der angular.schule.

ASP.NET Core und Angular. Die Kombination dieser zwei Technologien ist das Dreamteam, wenn es um Webanwendungen geht. Den Start erleichtert uns Microsoft mit den ASP.NET Core JavaScript Services. Die Sammlung von Technologien rund um ASP.NET Core wird Thema dieses Workshops sein.

Wir entwickeln ein Backend mit der Web API von ASP.NET Core 1. Der Zugriff auf die Datenbank geschieht natürlich über das neue Entity Framework (oder In-Memory, falls kein MS SQL Server vorhanden). Zusätzlich stellen wir wir ein vollständiges Beispiel für Angular vor. Du lernst im Laufe des Workshops alle Bestandteile kennen, die für das Zusammenspiel von Client & Server notwendig sind.

Zum Ende kannst du die Begriffe NuGet, NPM, Yeoman, Middlewares, Webpack, HMR uvm. einordnen. Du wirst in der Lage sein, eine erste Angular-App unter .NET Core mit der Web API sowie dem Entity Framework selbst aufzusetzen.

Slides

https://presentations.angular.schule/angular_dotnetcore/

Screenshot

Benötigte Software

Egal ob Windows, Mac oder Linux. Bei diesem Workshop kann jeder mitmachen.
Bitte installiere dazu zunächst folgende Software:

• .NET Core SDK 1.03
• Node.js 6.9 oder höher
• Visual Studio Code 1.10 oder höher - ACHTUNG: nicht das große Visual Studio 2017!
• Chrome

Sicher ist sicher. Bitte anschließend die Versionen überprüfen:

dotnet --version
> Erwartet: 1.0.3 oder höher

node -v
> Erwartet: v6.9.x oder höher

Pakete installieren und Startprojekt anlegen

Bekanntermaßen ist das Internet auf Konferenzen immer knapp bemessen.
Bitte mache daher deinen Laptop rechtzeitig lauffähig!

Alle Windows-User sollten vor Beginn des Kurses die windows-build-tools installieren.
Warnungen von NPM können ignoriert werden.
Nach der Installation musst du eine neue Konsole starten!

npm install -g windows-build-tools

Danach bitte folgenden Befehl ausführen.
Warnungen von NPM können ignoriert werden.

npm install -g yo generator-aspnetcore-spa
npm install -g @angular/cli

Damit haben wir Yeoman an Board.
Mit Yeoman kann man besonders leicht neue Projekte erzeugen:

mkdir book-rating
cd book-rating
yo aspnetcore-spa

Du entscheidest dich natürlich für Angular!

Führe auch noch diese Installation durch:

npm i --save-dev @angular/cli@1.0.2

Und nun kannst du das Projekt bereits starten:

# Windows:
set ASPNETCORE_ENVIRONMENT=Development

# macOS / Linux:
export ASPNETCORE_ENVIRONMENT=Development


dotnet run

Gehe mit deinem Browser auf http://localhost:5000

Hello, world!

---

NEU: Extensions

Ohne folgende VSCode-Erweiterungen ist der Entwicklungs-Workflow doch recht rustikal.

• ext install csharp
• ext install csharpextensions
• ext install tslint
• ext install ng-template
• ext install autoimport
• ext install EditorConfig
• ext install vscode-icons

---

FAQ

• Warum doch noch kein Angular 4?

  Wegen #800!

• Wozu die Angular-CLI?

  Die Angular-CLI verwenden wir später nur, um neue Komponenten zu generieren. Wir müssen dazu eine Datei mit dem Namen .angular-cli.json in das Hautpverzeichnis legen.

• Wie integriere ich TSLint und Codelyzer in das Projekt?

  TSLint ist ein nützliches Werkzeug, um Fehler im TypeScript-Code schon bei der Entwicklung zu erkennen. Codelyzer bringt eine Reihe von Regeln mit, die dem Angular-Styleguide folgen. Dazu müssen wir die TSLint-Extension und Codelyzer installieren und die Datei .tslint.json im Projektordner anlegen.

Bei weiteren Fragen wende dich einfach direkt an das Angular-Schule-Team:
team@angular.schule

© 2017 http://angular.schule, Stand: 11.05.2017