Building Applications with Angular, ASP.NET Core, and Entity Framework Core

Building Applications with Angular, ASP.NET Core, and Entity Framework Core

3h 34mIntermediate2019-04-05

Authors

Alexander Zanfir

Alexander Zanfir

President of SocialPlay Inc.

Course details

Creating a complete full-stack application requires integrating multiple components. The front-end piece must talk smoothly to the server, and within the server, you'll need multiple layers: one to talk with the client, and one to store information on the server. This course teaches integration through the perspective of a quiz project, with instructor Alexander Zanfir showing how to use Angular, ASP.NET Core, and Entity Framework Core to develop a full-stack application. Alexander explains how to display and edit data in Angular with ASP.NET Core, create forms, navigate to different views, and more.

Learning objectives
Creating and configuring the Angular project
Creating forms with Angular
Creating get and post routes in an ASP.NET Core controller
Updating Angular service to post to API
Persistence with Entity Framework
Displaying and editing data in Angular with ASP.NET Core
Navigating to different views in Angular
Associations between entities with Angular and Entity Framework
Setting up Identity Framework

Skills covered

Entity FrameworkASP.NET CoreAngularBack-End Web DevelopmentFull-Stack Web DevelopmentDatabase DevelopmentFront-End Web DevelopmentDatabase ManagementWeb DevelopmentOpen SourceMicrosoftSoftware DevelopmentDeep Dive (X:Y)

Concepts

Introduction

  • Welcome
  • Using the exercise files

Infrastructure

  • Demo application overview
  • Architectural overview
  • Download and install ASP.NET Core
  • Creating and configuring the Angular project

Creating Forms with Angular

  • Our first Angular component
  • New question layout
  • New question functionality
  • Angular service

Creating Get and Post Routes in an ASP.NET Core Controller

  • Create a post route
  • Update Angular service to post to API
  • Create a get route

Persistence with Entity Framework

  • Save questions with Entity Framework
  • Add answers to a question in Angular
  • Add answers to a question in ASP.NET

Displaying and Editing Data in Angular with ASP.NET Core

  • Show questions component in Angular
  • Edit question route in ASP.NET
  • Edit question component in Angular
  • Edit question service in Angular

Navigating to Different Views in Angular

  • Add the Angular Router
  • Navigate between posting and displaying questions

Associations between Entities with Angular and Entity Framework

  • Create a quiz in Angular
  • Post quiz to back end
  • Challenge - Displaying quizzes
  • Solution - Displaying quizzes
  • Loading questions from quiz
  • Associate quiz to questions
  • Showing only quiz owned questions
  • Challenge - Quiz ID check
  • Solution - Quiz ID check

Authentication with Identify Framework and Tokens

  • Set up Identity Framework
  • Register from Angular
  • Reactive forms with FormBuilder
  • Save token in the browser
  • Pass token with Angular requests
  • Auth token middleware in ASP.NET
  • Associate user with quiz and question
  • Logging in
  • Logging out

Putting it All Together

  • Quiz playlist
  • Quiz play component
  • Quiz score dialog
  • Final touches

Conclusion

  • Next steps
80,000 Toman