ASP.NET Core 6 and Angular: Full-stack web development with ASP.NET 6 and Angular 13

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
	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
	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 6 SDK
			Checking the SDK version
			Installing Node.js and Angular CLI
			Creating the .NET and Angular 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
			Second testing attempt
	Getting to work
		Changing the API endpoints
			Implementing the baseUrl property
		Refactoring the Angular app
			Adding HomeComponent
			Adding FetchDataComponent
			Adding the navigation menu
			Updating the AppComponent
			Adding 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 HealthChecks 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 2019
		Installing the DB 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 DB 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
	Back-end 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
	Front-end 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
		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 WorldCitiesAPI.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 .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
	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
		The ASP.NET Core PWA middleware alternative
	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 event
		Option 2 – the Navigator.onLine property
			Downsides of the JavaScript approaches
		Option 3 – the angular-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
	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
			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.prod.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 and HealthCheckAPI
			Introducing Visual Studio publish profiles
			Folder publish profile
			FTP publish profile
			Azure Virtual Machine publish profile
		Configuring IIS
			Adding the HealthCheck website entry
			Adding the HealthCheckAPI website entry
			A note on TLS/SSL certificates
			Configuring the IIS application pool
			Adding the .webmanifest MIME Type
		Testing HealthCheck and HealthCheckAPI
			Testing the app
	Linux deployment
		Creating a Linux CentOS 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 and WorldCitiesAPI
			Building the Angular app
			Building the WorldCitiesAPI app
			Deploying the files to the Linux VM
			Configuring Kestrel and Nginx
		Testing WorldCities and WorldCitiesAPI
			Testing the app
			Troubleshooting
	Azure App Service deployment
		Creating the App Service instances
			Adding the HealthCheck App Service
			Adding the HealthCheckAPI App Service
		Adapting our apps for App Service
		Publishing our apps to App Service
			Publishing the Angular app
			Publishing the ASP.NET Core project
		Testing HealthCheck and HealthCheckAPI
	Summary
	Suggested topics
	References
Other Books You May Enjoy
Index