ASP.NET Core 8 and Angular: Full-stack web development with ASP.NET Core 8 and Angular, 6th Edition [6 ed.] 9781805129936

Table of contents :
Cover
Copyright
Contributors
Table of Contents
Preface
Chapter 1: 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
Chapter 2: 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
Chapter 3: 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
Chapter 4: 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
Chapter 5: 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
Chapter 6: 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
Chapter 7: 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
Chapter 8: 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
Chapter 9: 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
Chapter 10: 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
Chapter 11: 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
Chapter 12: 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
Chapter 13: 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
Chapter 14: 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
Chapter 15: 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
Why subscribe?
Other Books You May Enjoy
Index