ASP.NET Core 5 and Angular

Cover
Copyright
Packt Page
Contributors
Table of Contents
Preface
Chapter 1: Getting Ready
	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
		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
		Reasons for choosing .NET and Angular
	A full-stack approach
	MPAs, SPAs, PWAs, and NWAs
		Multi-page applications
		Single-page applications
		Progressive web applications
		Native web applications
		Product owner expectations
	A sample 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
			Installing the .NET 5 SDK
			Checking the SDK version
			Creating the .NET and Angular project
			Opening the new project in Visual Studio
			Performing a test run
	Summary
	Suggested topics
	References
Chapter 2: Looking Around
	Technical requirements
	Solution overview
	The ASP.NET back-end
		Razor Pages
			Advantages of using Razor Pages
		Controllers
			Advantages of using Controllers
			WeatherForecastController
		Configuration files
			Program.cs
			Startup.cs
			appsettings.json
	The Angular front-end
		Workspace
			angular.json
			package.json
			tsconfig.json
			Other workspace-level files
		The /ClientApp/src/ folder
			The /app/ folder
		Testing the app
			HomeComponent
			NavMenuComponent
			CounterComponent
			Our first app test
	Creating a new app with the Angular CLI
		Installing the Angular CLI
		Creating a new Angular app
		Comparing the Angular apps
		Updating the Startup.cs file
		Testing the NG Angular app
	Getting to work
		Static file caching
			How the HTTP cache works
			Improving our caching strategy
		Client app cleanup
			Trimming down the component list
			The AppModule source code
			Adding the AppRoutingModule
			Updating the NavMenu
	Summary
	Suggested topics
	References
Chapter 3: 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 to the pipeline
		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
			Creating components using the Angular CLI
			health-check.component.ts
			health-check.component.html
			health-check.component.css
		Adding the component to the Angular app
			AppModule
			AppRoutingModule
			NavMenuComponent
			Testing it out
	Summary
	Suggested topics
	References
Chapter 4: Data Model with Entity Framework Core
	Technical requirements
	The WorldCities web app
		Styling and CSS basics
		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
		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
	Getting a SQL Server instance
		Installing SQL Server 2019
		Creating a SQL Database on Azure
			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 Startup.cs
		Adding the initial migration
			Using the dotnet CLI
			Using the Package Manager Console
			Understanding migrations
	Populating the database
		Implementing SeedController
			Importing the Excel file
	Entity controllers
		CitiesController
		CountriesController
		Testing it out
	Summary
	Suggested topics
	References
Chapter 5: 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.css
			app.module.ts
			app-routing.module.ts
			nav-component.html
	Serving data with Angular Material
		MatTableModule
		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 (CSS) file
			AngularMaterialModule
			Performance considerations
	Adding the countries to the loop
		ASP.NET
			CountriesController
		Angular
			country.ts
			countries.component.ts
			countries.component.html
			countries.component.css
			AppModule
			AppRoutingModule
			NavComponent
			Testing CountriesComponent
	Summary
	Suggested topics
		ASP.NET
		Angular
	References
Chapter 6: 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.css
		Adding the navigation link
			app.module.ts
			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
			The Safe Navigation Operator
		Model-driven validation
			Our first 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.css
			AppModule
			AppRoutingModule
			countries.component.html
		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 7: Code Tweaks and Data Services
	Technical requirements
	Optimizations and tweaks
		Template improvements
			Form validation shortcuts
		Class inheritance
			Implementing a BaseFormComponent
			Extending CityEditComponent
			Extending CountryEditComponent
	Bug fixes and improvements
		Validating lat and lon
			city-edit.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 the CityService
			Implementing the CityService
			Creating the CountryService
	Summary
	Suggested topics
	References
Chapter 8: Backend and Frontend Debugging
	Technical requirements
	Back-end debugging
		Windows or Linux?
		The basics
		Conditional breakpoints
			Conditions
			Actions
			Testing the conditional breakpoint
		The Output window
			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 9: ASP.NET Core and Angular Unit Testing
	Technical requirements
	ASP.NET Core unit tests
		Creating the WorldCities.Test project
			Moq
			Microsoft.EntityFramework.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 10: Authentication and Authorization
	Technical requirements
	To auth, or not to auth
		Authentication
			Third-party authentication
		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
			Adjusting our unit tests
			Configuring the ASP.NET Core Identity middleware
			Configuring IdentityServer
			Revising SeedController
			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
	Authentication methods
		Sessions
		Tokens
		Signatures
		Two-factor
		Conclusions
	Implementing authentication in Angular
		Creating the AuthSample project
			Troubleshooting the AuthSample project
		Exploring the Angular authorization APIs
			Route Guards
			HttpInterceptor
			The authorization components
			Testing registration and login
	Implementing the auth API in the WorldCities app
		Importing the front-end authorization APIs
			api-authorization.constants
			AppModule
			AppRoutingModule
			NavMenuComponent
		Adjusting the back-end code
			Installing the ASP.NET Core Identity UI package
			Mapping Razor Pages to EndpointMiddleware
			Securing the back-end action methods
		Testing login and registration
	Adding an email sending service
		Transactional email API using SendGrid
			Create a SendGrid account
			Get the Web API key
			Install the SendGrid NuGet package
			Verify the integration
			Implement the IEmailSender interface
			Scaffold the Identity pages
			Disable link-based account verification
			Test the email-based account verification
		External SMTP server using MailKit
			Install the MailKit NuGet package
			Set up the SMTP settings
			Implement the IEmailSender interface
			Startup class
	Summary
	Suggested topics
	References
Chapter 11: Progressive Web Apps
	Technical requirements
	PWA – distinctive features
		Secure origin
		Offline loading and Web App Manifest
			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 ng-connection-service npm package
			Installing ng-connection-service
			Updating the app.component.ts file
			Removing the isOnline.txt static file from the cache
			Installing the ng-connection-service via npm (alternate route)
			Updating the app.component.html file
		Cross-Origin Resource Sharing
	Testing the PWA capabilities
		Compiling the app with the Angular CLI
			Updating the Startup.cs file
		Compiling the app with Visual Studio
			Creating a publish profile
			Copying the CLI-generated files
			Updating the Startup.cs file
		Testing out our PWAs
		Alternative testing methods
			Serving our PWA using http-server
	Summary
	Suggested topics
	References
Chapter 12: Windows, Linux, and Azure Deployment
	Technical requirements
	Getting ready for production
		ASP.NET Core deployment tips
			The launchSettings.json file
			Development, staging, and production environments
			Rule(s) of thumb
			Setting the environment in production
			.NET 5 deployment modes
		Angular deployment tips
			ng serve, ng build, and the package.json file
			Differential loading
			The angular.json configuration file
			Automatic deployment
			CORS policy
	Windows deployment
		Creating a Windows Server VM on MS Azure
			Accessing the MS Azure portal
			Adding and configuring a new VM
			Configuring a DNS name label
			Setting the inbound security rules
		Configuring the VM
			Adding the IIS web server
			Installing the ASP.NET Core Windows hosting bundle
		Publishing and deploying the HealthCheck app
			Folder publish profile
			FTP publish profile
			Azure Virtual Machine publish profile
			Alternative method using the IIS Web Deploy Publishing feature
		Configuring IIS
			Adding an SSL certificate
			Adding a new IIS website entry
			Configuring the IIS application pool
		Testing the HealthCheck web application
			Updating the testing machine's HOSTS files
			Testing the app
	Linux deployment
		Creating a Linux CentOS VM on MS Azure
			Add and configure the Linux CentOS 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
		Adapting the WorldCities app
			Adding the forwarded headers middleware
			Checking the database connection string
			Creating the appsettings.Production.json file
		Publishing and deploying the WorldCities app
			Creating the /var/www folder
			Adding permissions
			Copying the WorldCities publish folder
		Configuring Kestrel and Nginx
			Creating the self-signed SSL certificate
			Configuring the Kestrel service
			Configuring the Nginx reverse proxy
		Testing the WorldCities application
			Update the testing machine's HOSTS files
			Testing the app
			Troubleshooting
	Azure App Service deployment
		Creating the Web App instance
		Publishing the Web App
	Summary
	Suggested topics
	References
Other Books You May Enjoy
Index