ASP.NET Core 8 and Angular: Full-Stack Web Development With ASP.NET Core 8 and Angular 9781805129936

Table of contents :
Preface
Who this book is for
What this book covers
To get the most out of this book
Get in touch
Share your thoughts
Download a free PDF copy of this book
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Other Books You May Enjoy
Index

Polecaj historie

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

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

1,907 218 29MB Read more

Building real life web apps with Angular 14 and ASP.NET Core 6 9798356611087

1,903 224 1MB Read more

Building real life web apps with Angular 14 and ASP.NET Core 6

This book aims to help readers learn Angular 14 and ASP.NET Core 6 by developing a real-life project. Readers will get a

762 159 420KB Read more

ASP.NET Core 5 and Angular: Full-stack web development with .NET 5 and Angular 11, 4th Edition [4 ed.] 1800560338, 9781800560338

Build robust modern web applications using .NET 5, Entity Framework Core, and Angular 11 Key FeaturesUpdated with the la

7,534 2,231 20MB Read more

ASP.NET Core 5 and Angular [4 ed.] 9781800560338, 1800560338

Learning full-stack development calls for knowledge of both front-end and back-end web development. ASP.NET Core 5 and A

2,520 598 19MB Read more

ASP.NET Core 3 and Angular 9 [3 ed.] 9781789612165

4,102 1,208 13MB Read more

ASP.NET Core and Angular 2: create powerful applications for the modern web 9781786465689, 178646568X

Create powerful applications for the modern web About This Book Build a complete single page application with two of the

1,165 227 10MB Read more

aspnet-mvc5-getting-started

1,140 231 4MB Read more

Web前端开发 使用ASP.NET Core、Angular和Bootstrap: 使用ASP.NET 9787302515296

本书涵盖最前沿的Web前端开发技术,演示了如何在ASP.NET MVC 6框架中将它们融为一体,恰当地解决Web前端开发中遇到的各种问题.内容包括:Web前端开发概述,ASP.NET MVC 6框架,路由与绑定技术,Angular JS开发

144 50 41MB Read more

Angular Development with Typescript [2nd ed.]

3,369 645 9MB Read more