ASP.NET Core 8 and Angular: Full-Stack Web Development With ASP.NET Core 8 and Angular

Build robust, scalable web applications using ASP.NET Core 8, Angular, and Entity Framework Core Key Features Combine ASP.NET Core and Angular to build highly versatile web applications Create a production-ready Single-Page Application (SPA) or Progressive Web Application (PWA) Adopt a full-stack approach to handle data management, API documentation, Web APIs, end-to-end testing, security, and deploymentBook Description If you want to learn how to use ASP.NET Core with Angular effectively, this hands-on guide is for you. Improve the way you create, debug, and deploy web applications while keeping up to date with the latest developments in .NET 8 and modern Angular, including .NET Minimal APIs and the new Angular standalone API defaults. You’ll begin by setting up SQL Server 2022 and building a data model with Entity Framework Core. You’ll progress to fetching and displaying data, handling user input with Angular reactive forms, and implementing front-end and back-end validators for maximum effect. After that, you will perform advanced debugging and explore unit testing features with xUnit for .NET, and Jasmine and Karma for Angular. You’ll use Identity API endpoints in ASP.NET Core and functional route guards in Angular to add authentication and authorization to your apps. Finally, you’ll learn how to deploy to Windows, Linux, and Azure. By the end of this book, you will understand how to tie together the front-end and back-end to build and deploy secure and robust web applications. Preface Who this book is for What this book covers To get the most out of this book Get in touch Share your thoughts Download a free PDF copy of this book Introducing ASP.NET and Angular Technical requirements Two players, one goal The ASP.NET Core revolution ASP.NET Core 1.x ASP.NET Core 2.x ASP.NET Core 3.x .NET 5 .NET 6 .NET 7 .NET 8 What’s new in Angular? GetAngular AngularJS Angular 2 Angular 4 Angular 5 Angular 6 Angular 7 Angular 8 Angular 9 Angular 10 Angular 11 Angular 12 Angular 13 Angular 14 Angular 15 Angular 16 Angular 17 Reasons for choosing .NET and Angular Summary Suggested topics References Getting Ready Technical requirements A full-stack approach MPAs, SPAs, PWAs, and NWAs Multi-page applications Single-page applications Progressive web applications Native web applications Product owner expectations An example SPA project Not your usual Hello World! Preparing the workspace Disclaimer — do (not) try this at home The broken code myth Stay hungry, stay foolish, yet be responsible as well Setting up the project(s) Installing the .NET 8 SDK Checking the SDK version Installing Node.js and the Angular CLI Creating the Angular and ASP.NET Core project Performing a test run Troubleshooting Architecture overview Summary Suggested topics References Looking Around Technical requirements Solution overview The ASP.NET back-end Configuration files Program.cs appsettings.json Controllers WeatherForecastController Introducing OpenAPI (Swagger) The Angular front-end The root files angular.json package.json tsconfig.json Other workspace-level files The /src/ folder The /src/app/ folder Our first test run First testing attempt Getting to work Changing the API endpoints Implementing a baseUrl property Refactoring the Angular app Adding HomeComponent Adding FetchDataComponent Adding the navigation menu Updating the AppComponent Updating the AppRoutingModule Finishing touches Test run Summary Suggested topics References Front-End and Back-End Interactions Technical requirements Introducing ASP.NET Core health checks Adding the HealthCheck middleware Adding an Internet Control Message Protocol (ICMP) check Possible outcomes Creating an ICMPHealthCheck class Adding the ICMPHealthCheck Improving the ICMPHealthCheck class Adding parameters and response messages Updating the middleware setup Implementing a custom output message Configuring the output message Health checks in Angular Creating the Angular component health-check.component.ts health-check.component.html health-check.component.css Adding the component to the Angular app AppRoutingModule NavMenuComponent Testing it out Restyling the UI Introducing Angular Material Installing Angular Material Adding a MatToolbar Updating the AppModule Updating the NavMenuComponent HTML template First test run Playing with (S)CSS Introducing Sass Replacing CSS with Sass Restyling the tables Summary Suggested topics References Data Model with Entity Framework Core Technical requirements The WorldCities web app Updating the ASP.NET Core app Updating the Angular app Minimal UI restyling Reasons to use a data server The data source The data model Introducing Entity Framework Core Installing Entity Framework Core The SQL Server Data Provider DBMS licensing models What about Linux? SQL Server alternatives Data modeling approaches Code-First Database-First Making a choice Creating the entities Defining the entities The City entity The Country entity Should we (still) use #region blocks? Defining relationships Adding the Country property to the City entity class Adding the Cities property to the Country entity class Defining the database table names Defining indexes Getting a SQL Server instance Installing SQL Server 2022 Installing the database management tool(s) Creating a SQL database on Azure SQL Database SQL Managed Instance SQL virtual machine Making a choice Setting up a SQL database Configuring the instance Configuring the database Creating the WorldCities database Adding the WorldCities login Mapping the login to the database Creating the database using Code-First Setting up the DbContext Entity type configuration methods Data annotations Fluent API EntityTypeConfiguration classes Making a choice Database initialization strategies Updating the appsettings.json file Securing the connection string Introducing Secrets Storage Adding the secrets.json file Working with the secrets.json file Creating the database Updating Program.cs Adding the initial migration Using the dotnet CLI Using the Package Manager Console Checking the autogenerated database tables Understanding migrations Populating the database Implement SeedController Import the Excel file Entity controllers CitiesController CountriesController Should we really use entities? Testing it out Summary Suggested topics References Fetching and Displaying Data Technical requirements Fetching data Requests and responses JSON conventions and defaults A (very) long list city.ts cities.component.ts cities.component.html cities.component.scss app-routing.module.ts nav-component.html Serving data with Angular Material Adding AngularMaterialModule Introducing MatTable Updating AngularMaterialModule Updating CitiesComponent Adding pagination with MatPaginatorModule Client-side paging Server-side paging Adding sorting with MatSortModule Extending ApiResult Installing System.Linq.Dynamic.Core Updating CitiesController Updating the Angular app Adding filtering Extending ApiResult (again) CitiesController CitiesComponent CitiesComponent template (HTML) file CitiesComponent style (SCSS) file AngularMaterialModule Performance considerations Adding countries to the loop ASP.NET CountriesController Angular country.ts countries.component.ts countries.component.html countries.component.scss AppModule AppRoutingModule NavComponent Testing CountriesComponent Summary Suggested topics ASP.NET Angular References Forms and Data Validation Technical requirements Exploring Angular forms Forms in Angular Reasons to use forms Template-driven forms The pros The cons Model-driven/Reactive Forms Building our first Reactive Form ReactiveFormsModule CityEditComponent city-edit.component.ts city-edit.component.html city-edit.component.scss Adding the navigation link app-routing.module.ts cities.component.html Adding a new city Extending the CityEditComponent Adding the “Add a new City” button Adding a new route HTML select Angular Material select (MatSelectModule) Understanding data validation Template-driven validation Model-driven validation Our first validators Testing the validators Server-side validation DupeCityValidator Introducing the FormBuilder Creating the CountryEditComponent country-edit.component.ts The IsDupeField server-side API country-edit.component.html country-edit.component.scss AppRoutingModule CountriesComponent Testing the CountryEditComponent Improving the filter behavior Throttling and debouncing Definitions Why would we want to throttle or debounce our code? Debouncing calls to the back-end Updating the CitiesComponent Updating the CountriesComponent What about throttling? Summary Suggested topics References Code Tweaks and Data Services Technical requirements Optimizations and tweaks Template improvements Form validation shortcuts Class inheritance Implementing a BaseFormComponent Extending CountryEditComponent Extending CityEditComponent Bug fixes and improvements Validating lat and lon city-edit.component.ts base-form.component.ts city-edit.component.html Adding the number of cities CountriesController Creating the CountryDTO class Angular front-end updates DTO classes – should we really use them? Separation of concerns Security considerations DTO classes versus anonymous types Securing entities Final thoughts Adding the country name CitiesController Angular front-end updates Data services XMLHttpRequest versus Fetch (versus HttpClient) XMLHttpRequest Fetch HttpClient Building a data service Creating the BaseService Adding the common interface methods Creating CityService Implementing CityService Creating CountryService Summary Suggested topics References Back-End and Front-End Debugging Technical requirements Backend debugging Windows or Linux? The basics Conditional breakpoints Conditions Actions Testing the conditional breakpoint The Output window LogLevel types Testing the LogLevel Configuring the Output window Debugging EF Core The GetCountries() SQL query Frontend debugging Visual Studio JavaScript debugging JavaScript source maps Browser developer tools Angular form debugging A look at the Form Model The pipe operator Reacting to changes The activity log Client-side debugging Unsubscribing the Observables The unsubscribe() method The takeUntil() operator Other viable alternatives Should we always unsubscribe? Application logging Introducing ASP.NET Core logging Database Management System (DBMS) structured logging with Serilog Installing the NuGet packages Configuring Serilog Logging HTTP requests Accessing the logs Summary Suggested topics References ASP.NET Core and Angular Unit Testing Technical requirements ASP.NET Core unit tests Creating the WorldCities.Server.Tests project Moq Microsoft.EntityFrameworkCore.InMemory Adding the WorldCities dependency reference Our first test Arrange Act Assert Executing the test Debugging tests Test-driven development Behavior-driven development Angular unit tests General concepts Introducing the TestBed interface Testing with Jasmine Our first Angular test suite The import section The describe and beforeEach sections Adding a mock CityService Implementing the mock CityService Configuring the fixture and the component Creating the title test Creating the cities tests Running the test suite Summary Suggested topics References Authentication and Authorization Technical requirements To auth, or not to auth? Authentication Authentication methods Third-party authentication Authorization Proprietary authorization Third-party authorization Proprietary versus third-party Proprietary auth with ASP.NET Core The ASP.NET Core Identity model Entity types Setting up ASP.NET Core Identity Adding the NuGet packages Creating ApplicationUser Extending ApplicationDbContext Configuring the ASP.NET Core Identity service Implementing AccountController Configuring JwtBearerMiddleware Updating SeedController Securing the action methods A word on async tasks, awaits, and deadlocks Updating the database Adding identity migration Applying the migration Updating the existing data model Dropping and recreating the data model from scratch Seeding the data Implementing authentication in Angular Adding the LoginRequest interface Adding the LoginResult interface Implementing AuthService Creating LoginComponent login.component.ts login.component.html login.component.scss Updating AppRoutingModule Updating NavMenuComponent Testing LoginComponent Adding the authStatus observable Updating the UI Testing the observable HttpInterceptors Implementing AuthInterceptor Updating AppModule Testing HttpInterceptor Route Guards Available guards Implementing AuthGuard Updating AppRoutingModule Testing AuthGuard Finishing touches Identity API endpoints Activating the Identity API endpoints Testing the endpoints Should we use the Identity API endpoints? Summary Suggested topics References Progressive Web Apps Technical requirements PWA distinctive features Secure origin Offline loading Service workers versus HttpInterceptors Introducing @angular/service-worker Implementing the PWA requirements Manual installation Adding the @angular/service-worker npm package Updating the angular.json file Importing ServiceWorkerModule Updating the index.html file Adding the Web App Manifest file Adding the favicon Adding the ngsw-config.json file Automatic installation The Angular PNG icon set Handling the offline status Option 1 – the window’s ononline/onoffline events Option 2 – the navigator.onLine property Downsides of the JavaScript approaches Option 3 – the ng-connection-service npm package Installing the service Updating the AppModule file Updating the AppComponent Adding the api/heartbeat endpoint Introducing Minimal APIs Cross-Origin Resource Sharing Implementing CORS Testing the PWA capabilities Compiling the app Installing http-server Testing out our PWAs Installing the PWA Summary Suggested topics References Beyond REST – Web API with GraphQL Technical requirements GraphQL versus REST REST Guiding constraints Drawbacks GraphQL Advantages over REST Limitations Implementing GraphQL Adding GraphQL to ASP.NET Core Installing HotChocolate Testing the GraphQL schema Adding GraphQL to Angular Installing Apollo Angular Refactoring CityService Refactoring CountryService Summary Suggested topics References Real-Time Updates with SignalR Technical requirements Real-time HTTP and server push Introducing SignalR Hubs Protocols Connections, users, and groups Implementing SignalR Setting up SignalR in ASP.NET Core Creating the HealthCheckHub Setting up services and middleware Adding the broadcast message Installing SignalR in Angular Adding the npm package Implementing the HealthCheckService Adding WebSocket support to Angular proxy Refactoring the HealthCheckComponent Testing it all Client-initiated events Updating the HealthCheckHub Updating the HealthCheckService Updating the HealthCheckComponent Testing the new feature Summary Suggested topics References Windows, Linux, and Azure Deployment Technical requirements Getting ready for production Configuring the endpoints Tweaking the HOSTS file Other viable alternatives ASP.NET Core deployment tips The launchSettings.json file Runtime environments .NET deployment modes Angular deployment tips ng serve, ng build, and the package.json file Differential loading The angular.json configuration file(s) Updating the environment.ts file(s) Automatic deployment Windows deployment Creating a Windows Server VM on MS Azure Accessing the MS Azure portal Adding a new Windows VM Configuring a DNS name label Setting the inbound security rules Configuring the Windows VM Adding the IIS web server Installing the ASP.NET Core Windows hosting bundle Publishing healthcheck.client and HealthCheck.Server Introducing Visual Studio publish profiles Folder publish profile FTP publish profile Azure Virtual Machine publish profile Configuring IIS Adding the healthcheck.client website entry Adding the HealthCheck.Server website entry A note on TLS/SSL certificates Configuring the IIS application pool Adding the .webmanifest MIME type Testing healthcheck.client and HealthCheck.Server Testing the app Linux deployment Creating a Linux VM on MS Azure Adding a new Linux VM Configuring a DNS name label Setting the inbound security rules Configuring the Linux VM Connecting to the VM Installing the ASP.NET Core Runtime Installing Nginx Opening the 80 and 443 TCP ports Publishing worldcities.client and WorldCities.Server Building the Angular app Building the WorldCities.Server app Deploying the files to the Linux VM Configuring Kestrel and Nginx Testing WorldCities and WorldCities.Server Testing the app Troubleshooting Azure App Service deployment Creating the App Service instances Adding the healthcheck.client Static Web App Adding the HealthCheck.Server Web App Adapting our apps for App Service Publishing our apps to App Service Publishing the Angular app Publishing the ASP.NET Core project Testing healthcheck.client and HealthCheck.Server Summary Suggested topics References Other Books You May Enjoy Index