Technical presentation given by Laurent Duveau at the Ottawa IT Community meetup on March 26, 2018. https://www.meetup.com/ottawaitcommunity/events/248541582/

1. ASP.NET Core 2.1 and Angular 5 in
Visual Studio 2017
LAURENT DUVEAU
MARCH 26TH, 2018

2. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018
Laurent Duveau
@LaurentDuveau
Microsoft MVP in Montreal
Founder of the Angular Academy
2-day Angular Classroom Training
99 classes in 2 years
Montreal, Quebec, Toronto, Ottawa ,
Vancouver, Calgary, Winnipeg, London,
Copenhagen, Helsinki…
March 27-28!

3. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018
Stack Overflow Dev Survey 2018

4. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018
Agenda
Overview of ASP.NET Core + Angular in VS2017
Coding an App!
QnA

5. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018
Setup
.NET Core 2.1 Preview (Win, MacOS, and Linux)
◦ .NET Core 2.1 Preview 1 SDK
◦ .NET Core 2.1 Preview 1 Runtime
Visual Studio 2017 Preview
◦ https://www.visualstudio.com/vs/preview/
Angular Item Templates extension

6. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018
Setup
Visual Studio and Visual Studio “Preview” can be installed side-by-side.
=
VS2017 PreviewVS2017

7. New ASP.NET Core + Angular Project template
ASP.NET CORE 2.0 ASP.NET CORE 2.1 (PREVIEW)
7
Where is my View??
Angular
ASP.NET
MVC
API
Controller
Angular CLI
Project!

8. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018
New ASP.NET Core + Angular Project template
We get the best of both worlds!
◦ ASP.NET Core project: act as an API backend (data access, authorization, …)
◦ Regular Angular CLI project (ClientApp folder): act as a UI web app
The template offers the convenience of hosting both project
types in a single Visual Studio project, that can be built and
published as a single unit.

9. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018
Architecture
ASP.NET Core
Web API (RESTFUL)
Server side
Client side
Database
HTML
+ Js

10. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018
New Project template
Angular CLI
◦ Built-in commands: ng serve, ng test, ng lint, …
◦ Easier to follow Angular versions (ng update!)
Webpack middleware integration
◦ In dev, you don’t need to keep rebuilding your client-side application
Hot module replacement
◦ Any file changed is pushed into the browser immediately without
reloading the page

11. Demo

12. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018
Or just using dotnet cli…
Step 1: Install the templates
Step 2: Create a new Angular App
Step 3: Change Environment variable to “Development”
Step 4: Build the application (restore npm dependencies on the first run…)
Step 5: Finally, run the app
dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0
dotnet new angular
SET ASPNETCORE_Environment=Development
dotnet build
dotnet run

13. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018
Already familiar with Angular CLI?
No need to run ng serve!
By default the ASP.NET Core app deals with serving both server-
side and client-side parts of your app (Internally, it uses ng
serve).
But it can be slow…
Each time you modify your C# code, the ASP.NET Core app
needs to restart, and the Angular CLI server restarts.

14. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018
Run "ng serve" independently!
Startup.cs
◦ Replace:
◦ With:
Now just ng serve in your ClientApp folder!
spa.UseAngularCliServer(npmScript: "start");
spa.UseAngularCliServer("http://localhost:4200");

15. Demo

16. Let’s talk about Angular

17. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018
Angular Core Concepts
Components Modules
Dependency
Injection
Language
(TypeScript)
Services Data Binding Decorators Routing

18. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018
Building SPAs with Components
Header Component
Menu
Component
Footer Component
List ComponentGrid Component

19. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018
What is a Component?

20. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018
What is a Component?
A component is a reusable object
Made up of: HTML
Template
Code
(ts class)

21. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018
Map Update
App
DetailsList
ProductsMenu Contact
Your app is a tree of Components

22. Demo

23. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018
Angular classroom training
Tomorrow in Ottawa!
Get 50% OFF with
promo code OTTUG50

24. Thank you!