Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

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

About

🅰️ 12. Mai 2017: Offener Workshop .NET Day Franken, Dreamteam: ASP.NET Core mit Web API und Angular #NetDayFranken

Topics

Resources

Packages

No packages published