ASP.NET Core 3 and Angular 9

Cover
Title Page
Copyright and Credits
About Packt
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
		What's new in Angular?
			GetAngular
			AngularJS
			Angular 2
			Angular 4
			Angular 5
			Angular 6
			Angular 7
			Angular 8
			Angular 9
		Reasons for choosing .NET Core and Angular
	A full-stack approach
	SPAs, NWAs, and PWAs
		Single-page application
		Native web application
		Progressive web application
		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 Core SDK
			Checking the SDK version
			Creating the .NET Core 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 .NET Core back-end
		Razor Pages
		Controllers
		Configuration files
			Program.cs
				Web host versus web server
			Startup.cs
			appsettings.json
	The Angular front-end
		Workspace
			angular.json
			package.json
				Upgrading (or downgrading) Angular
				Upgrading (or downgrading) the other packages
			tsconfig.json
			Other workspace-level files
		The /ClientApp/src/ folder
			The /app/ folder
				AppModule
				Server-side AppModule for SSR
				AppComponent
				Other components
		Testing the app
			HomeComponent
			NavMenuComponent
			CounterComponent
				The specs.ts file(s)
			Our first app test
	Getting to work
		Static file caching
			A blast from the past
			Back to the future
			Testing it out
				The strongly-typed approach(es)
		Client app cleanup
			Trimming down the Component list
			The AppModule source code
			Updating the NavMenu
	Summary
	Suggested topics
	References
Chapter 3: Front-end and Back-end Interactions
	Technical requirements
	Introducing .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
				About health check responses and HTTP status codes
			Configuring the output message
	Health checks in Angular
		Creating the Angular Component
			health-check.component.ts
				Imports and modules
				DI
				ngOnInit (and other lifecycle hooks)
				Constructor
				HttpClient
				Observables
				Interfaces
			health-check.component.html
			health-check.component.css
		Adding the Component to the Angular app
			AppModule
			NavMenuComponent
			Testing it out
	Summary
	Suggested topics
	References
Chapter 4: Data Model with Entity Framework Core
	Technical requirements
	The WorldCities web app
		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
			Model-First
				Pros
				Cons
			Database-First
				Pros
				Cons
			Code-First
				Pros
				Cons
			Making a choice
	Creating the entities
		Defining the entities
			The City entity
			Country
		Defining relationships
			Adding the Country property to the City entity class
			Adding the Cities property to the Country entity class
				Entity Framework Core loading pattern
	Getting a SQL Server
		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
		Database initialization strategies
		Updating the appsettings.json file
		Creating the database
			Updating Startup.cs
		Adding the initial migration
			Updating the database
			The "No executable found matching command dotnet-ef" error
			Understanding migrations
				Is data migration required?
	Populating the database
		Implementing SeedController
			Importing the Excel file
	Entity Controllers
		CitiesController
		CountriesController
	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
				The [hidden] attribute
			cities.component.css
			app.module.ts
			nav-component.html
	Serving data with Angular Material
		MatTableModule
		MatPaginatorModule
			Client-side paging
			Server-side paging
				CitiesController
				ApiResult
				CitiesComponent
		MatSortModule
			Extending ApiResult
			Installing System.Linq.Dynamic.Core
				What is LINQ?
				Linq.Dynamic.Core pros and cons
				Preventing SQL injections
			Updating CitiesController
			Updating the Angular app
				angular-material.module.ts
				cities.component.ts
				cities.component.html
		Adding filtering
			Extending ApiResult (again)
			CitiesController
			CitiesComponent
			CitiesComponent template (HTML) file
			CitiesComponent style (CSS) file
			AngularMaterialModule
	Adding the countries to the loop
		.NET Core
			CountriesController
				An odd JSON naming issue
		Angular
			country.ts
			countries.component.ts
			countries.component.html
			countries.component.css
			AppModule
			NavComponent
			Testing CountriesComponent
	Summary
	Suggested topics
		.NET Core
		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
			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
			Safe Navigation Operator
		Model-Driven validation
			Our first validators
		Server-side validation
			DupeCityValidator
				city-edit.component.ts
				CitiesController
				city-edit.component.html
				Testing it out
				Observables and RxJS operators
				Performance issues
	Introducing the FormBuilder
		Creating the CountryEditComponent
			country-edit.component.ts
				isDupeField validator
			IsDupeField server-side API
				An alternative approach using Linq.Dynamic
			country-edit.component.html
			country-edit.component.css
			AppModule
			countries.component.ts
		Testing the CountryEditComponent
	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
				[NotMapped] and [JsonIgnore] attributes
		Adding the country name
			CitiesController
			Angular front-end updates
	Data Services
		XMLHttpRequest versus Fetch (vs HttpClient)
			XMLHttpRequest
			Fetch
			HttpClient
		Building a Data Service
			Creating the BaseService
				TypeScript access modifiers
			Adding the common interface methods
				Type variables and generic types –  and 
				Why return Observables and not JSON?
			Creating the CityService
			Implementing the CityService
				AppModule
				CitiesComponent
				CityEditComponent
				Implementing loadCountries() and IsDupeCity() in CityService
			Creating the CountryService
				CountriesComponent
				CountryEditComponent
	Summary
	Suggested topics
	References
Chapter 8: 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
			Configuring the Output window
		Debugging EF Core
			The GetCountries() SQL query
				Getting the SQL code programmatically
				Implementing the ToSql() method
				Using the #if preprocessor
	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
				Testing the Activity Log
			Extending the Activity Log
		Client-side debugging
	Summary
	Suggested topics
	References
Chapter 9: ASP.NET Core and Angular Unit Testing
	Technical requirements
	.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
				Using the CLI
				Using the Visual Studio Test Explorer
			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
				Fake service class
				Extending and overriding
				Interface instance
				Spy
			Implementing the mock CityService
				Alternative implementation using the interface approach
			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
				The rise and fall of OpenID
				OpenID Connect
		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
				Updating the appSettings.Development.json file
			Revising SeedController
				Adding RoleManager and UserManager through DI
				Defining the CreateDefaultUser() unit test
				Implementing the CreateDefaultUsers() method
				Rerunning the unit test
			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
				Available Guards
			HttpInterceptors
			The authorization Components
				LoginMenuComponent
				LoginComponent
				LogoutComponent
			Testing registration and login
	Implementing the Auth API in the WorldCities app
		Importing the front-end Authorization APIs
			AppModule
			AppModule
			NavMenuComponent
		Adjusting the back-end code
			Installing the ASP.NET Core Identity UI package
				Customizing the default Identity UI
			Mapping Razor Pages to EndpointMiddleware
			Securing the back-end action methods
		Testing login and registration
	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 .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
				Updating the Startup.cs file
				Publishing 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 isonline/isoffline 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-Request Resource Sharing
	Testing the PWA capabilities
		Using Visual Studio and IIS Express
			Creating a Publish Profile
			Copying the CLI-generated files
			Testing out our PWAs
				Installing the PWA
		Alternative testing ways
			Serving our PWA using http-server
	Summary
	Suggested topics
	References
Chapter 12: Windows and Linux Deployment
	Technical requirements
	Getting ready for production
		.NET Core deployment tips
			The launchSettings.json file
			Development, staging, and production environments
			Rule(s) of thumb
			Setting the environment in production
			ASP.NET Core deployment modes
				Framework-dependent deployment pros and cons
				Self-contained deployment pros and cons
				Framework-dependent executable pros and cons
		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
			Setting the inbound security rules
		Configuring the VM
			Adding the IIS web server
			Installing the ASP.NET Core Windows hosting bundle
				Restarting IIS following ASP.NET Core runtime installation
		Publishing and deploying the HealthCities app
			Folder publish profile
			FTP publish profile
			Azure Virtual Machine publish profile
		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 HOST files
			Testing the app with Google Chrome
	Linux deployment
		Creating a Linux CentOS VM on MS Azure
			Add and configure the CentOS 7.7 VM
			Setting the inbound security rules
		Configuring the Linux VM
			Connecting to the VM
			Installing the ASP.NET runtime
			Installing Nginx
				Starting up Nginx
				Checking the HTTP connection
			Opening the 443 TCP port
				firewalld
				ufw
		Adapting the WorldCities app
			Adding the forwarded headers middleware
			Checking the database connection string
		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
				Why are we not serving the web app with Kestrel directly?
			Configuring the Nginx reverse proxy
				Updating the nginx.conf file
		Testing the WorldCities application
			Update the testing machine's HOST files
			Testing the app with Google Chrome
			Troubleshooting
	Summary
	Suggested topics
	References
Other Books You May Enjoy
Index