product iamge

ASP.NET Core 6 and Angular: Full-stack web development with ASP.NET 6 and Angular 13, 5th Edition

This document was uploaded by one of our users. The uploader already confirmed that they had the permission to publish it. If you are author/publisher or own the copyright of this documents, please report to us by using this DMCA report form.

Download
Search on Amazon

Simply click on the Download Book button.

Yes, Book downloads on Ebookily are 100% Free.

Sometimes the book is free on Amazon As well, so go ahead and hit "Search on Amazon"

Design, build and deploy robust web applications using ASP.NET 6, Angular 13, and Entity Framework Core

Key Features

  • The most up-to-date book that covers cutting-edge features released in ASP.NET Core 6 and Angular 13
  • 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 deployment

Book Description

Every full-stack ninja needs the tools to operate on front-end and back-end application development. This web app development book takes a hands-on, project-based approach to provide you with all the tools and techniques that web developers need to create, debug, and deploy efficient web applications using ASP.NET Core and Angular.

The fifth edition has been updated to cover advanced topics such as Minimal APIs, Web APIs with GraphQL, real-time updates with SignalR, and new features in .NET 6 and Angular 13.

You begin by building a data model with Entity Framework Core, alongside utilizing the Entity Core Fluent API and EntityTypeConfiguration class. You'll learn how to fetch and display data and handle user input with Angular reactive forms and front-end and back-end validators for maximum effect.

Later, you will perform advanced debugging and explore the unit testing features provided by xUnit.net (.NET 6) and Jasmine, as well as Karma for Angular. After adding authentication and authorization to your apps, you will explore progressive web applications, learning about their technical requirements, testing processes, and how to convert a standard web application to a PWA.

By the end of this web development book, you will understand how to tie together the front-end and back-end to build and deploy secure and robust web applications.

What you will learn

  • Use the new Visual Studio Standalone TypeScript Angular template
  • Implement and consume a Web API interface with ASP.NET Core
  • Set up an SQL database server using a local instance or a cloud datastore
  • Perform C# and TypeScript debugging using Visual Studio 2022
  • Create TDD and BDD unit tests using xUnit, Jasmine, and Karma
  • Perform DBMS structured logging using providers such as SeriLog
  • Deploy web apps to Azure App Service using IIS, Kestrel, and NGINX
  • Learn to develop fast and flexible Web APIs using GraphQL
  • Add real-time capabilities to Angular apps with ASP.NET Core SignalR

Who this book is for

This book is for experienced ASP.NET developers who already possess some familiarity with ASP.NET Core and Angular and are looking to learn how to use them effectively together.

The fully documented code samples (also available on GitHub) and the step-by-step implementation tutorials make this book easy to follow.

Table of Contents

  1. Introducing ASP.NET and Angular
  2. Getting Ready
  3. Looking Around
  4. Front-End and Back-End Interactions
  5. Data Model with Entity Framework Core
  6. Fetching and Displaying Data
  7. Forms and Data Validation
  8. Code Tweaks and Data Services
  9. Back-End and Front-End Debugging
  10. ASP.NET Core and Angular Unit Testing
  11. Authentication and Authorization
  12. Progressive Web Apps
  13. Beyond REST – Web API with GraphQL
  14. Real-Time Updates with SignalR
  15. Windows, Linux, and Azure Deployment

Author(s): Valerio De Sanctis
Edition: 5
Publisher: Packt Publishing
Year: 2022

Language: English
Commentary: True PDF
Pages: 780

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