Successfully reported this slideshow.
Your SlideShare is downloading. ×

ASP.NET Core 2.1 and Angular 5 in Visual Studio 2017

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 24 Ad

ASP.NET Core 2.1 and Angular 5 in Visual Studio 2017

Download to read offline

Technical presentation given by Laurent Duveau at the Ottawa IT Community meetup on March 26, 2018.

https://www.meetup.com/ottawaitcommunity/events/248541582/

Technical presentation given by Laurent Duveau at the Ottawa IT Community meetup on March 26, 2018.

https://www.meetup.com/ottawaitcommunity/events/248541582/

Advertisement
Advertisement

More Related Content

More from Laurent Duveau (20)

Recently uploaded (20)

Advertisement

ASP.NET Core 2.1 and Angular 5 in Visual Studio 2017

  1. 1. ASP.NET Core 2.1 and Angular 5 in Visual Studio 2017 LAURENT DUVEAU MARCH 26TH, 2018
  2. 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. 3. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018 Stack Overflow Dev Survey 2018
  4. 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. 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. 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. 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. 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. 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. 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. 11. Demo
  12. 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. 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. 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. 15. Demo
  16. 16. Let’s talk about Angular
  17. 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. 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. 19. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018 What is a Component?
  20. 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. 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. 22. Demo
  23. 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. 24. Thank you!

×