🅰️ 12. Mai 2017: Offener Workshop .NET Day Franken, Dreamteam: ASP.NET Core mit Web API und Angular #NetDayFranken
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
book-rating
README.md
ddf-logo.svg
screenshot.png

README.md

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

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

Screenshot

Screenshot

Benötigte Software

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

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!

yo_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!

image


NEU: Extensions

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


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