Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

11,186 views

Published on

Technical presentation given by Laurent Duveau at the .NET BC meetup in Vancouver on April 25, 2018.

https://www.meetup.com/NET-User-Group-of-BC/events/249548701/

Published in: Technology
  • Hello :) I have big problem with update from this SPA (5.1 Angular) to 6.0.3 I gets some more error in run after dotnet build and dotnet run :'(
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Merci Laurent
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 LAURENT DUVEAU APRIL 25TH, 2018
  2. 2. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018 Vancouver FTW!
  3. 3. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018 BCIT - March 15, 2017
  4. 4. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018 Laurent Duveau @LaurentDuveau Microsoft MVP in Montreal Founder of the Angular Academy 2-day Angular Classroom Training 101 classes in 2 years! Montreal, Quebec, Toronto, Ottawa , Vancouver, Calgary, Winnipeg, London, Copenhagen, Helsinki…
  5. 5. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018 Stack Overflow Dev Survey 2018
  6. 6. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018 Agenda Overview of ASP.NET Core + Angular in VS2017 Coding an App! Update to Angular 6 QnA
  7. 7. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 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
  8. 8. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018 Setup Visual Studio and Visual Studio “Preview” can be installed side-by-side. = VS2017 PreviewVS2017
  9. 9. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018 Roadmap https://github.com/dotnet/corefx/milestone/12 https://github.com/dotnet/core/blob/master/roadmap.md
  10. 10. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018 New ASP.NET Core + Angular Project template
  11. 11. New ASP.NET Core + Angular Project template ASP.NET CORE 2.0 ASP.NET CORE 2.1 (PREVIEW) 11 Where is my View?? Angular ASP.NET MVC API Controller Angular CLI Project!
  12. 12. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 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.
  13. 13. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018 Architecture ASP.NET Core Web API (RESTFUL) Server side Client side Database HTML + Js
  14. 14. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 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
  15. 15. Demo
  16. 16. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 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
  17. 17. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 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 you can customize this… Run and build your ASP.NET Core server app independently from the Angular CLI app.
  18. 18. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 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");
  19. 19. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018 Angular Core Concepts Components Modules Dependency Injection Language (TypeScript) Services Data Binding Decorators Routing
  20. 20. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018 Building SPAs with Components Header Component Menu Component Footer Component List ComponentGrid Component
  21. 21. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018 What is a Component?
  22. 22. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018 What is a Component? A component is a reusable object Made up of: HTML Template Code (ts class)
  23. 23. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018 Map Update App DetailsList ProductsMenu Contact Your app is a tree of Components
  24. 24. Demo
  25. 25. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018 Update to Angular 6! Using Angular CLI! ng update
  26. 26. Demo
  27. 27. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018 Angular classroom training
  28. 28. Thank you!

×