Book Image

ASP.NET Core 6 and Angular - Fifth Edition

By : Valerio De Sanctis
Book Image

ASP.NET Core 6 and Angular - Fifth Edition

By: Valerio De Sanctis

Overview of this book

Every full-stack ninja needs the tools to operate on front-end and back-end application development. This web app development book takes a hands-on, project-based approach to provide you with all the tools and techniques that web developers need to create, debug, and deploy efficient web applications using ASP.NET Core and Angular. The fifth edition has been updated to cover advanced topics such as Minimal APIs, Web APIs with GraphQL, real-time updates with SignalR, and new features in .NET 6 and Angular 13. You begin by building a data model with Entity Framework Core, alongside utilizing the Entity Core Fluent API and EntityTypeConfiguration class. You'll learn how to fetch and display data and handle user input with Angular reactive forms and front-end and back-end validators for maximum effect. Later, you will perform advanced debugging and explore the unit testing features provided by xUnit.net (.NET 6) and Jasmine, as well as Karma for Angular. After adding authentication and authorization to your apps, you will explore progressive web applications, learning about their technical requirements, testing processes, and how to convert a standard web application to a PWA. By the end of this web development book, you will understand how to tie together the front-end and back-end to build and deploy secure and robust web applications.
Table of Contents (18 chapters)
16
Other Books You May Enjoy
17
Index

Testing it all

It’s finally time to test all we have done so far.

Launch the two projects in Debug mode and, from the Angular app, navigate to the HealthCheckComponent.

We should see no UI differences up to this point, since we’re still performing the initial HTTP call to fetch the health checks data: however, if we take a look at the browser’s console, we can already see the console.log entries showing that the connection with the Hub has been established successfully, as shown in the following screenshot:

Immagine che contiene testo  Descrizione generata automaticamente

Figure 14.1: SignalR connection started

Now we can test if the server-initiated update works as expected. To do that, open a different browser (or tab) and navigate to the following URLs:

https://localhost:40443/api/broadcast/update

https://localhost:40443/api/broadcast/update2

As we already know, the former endpoint is handled by the BroadcastController and the latter using the Minimal API. However, both of them should produce...