ASP. NET Core 8 and Angular : Full-Stack Web Development with ASP. NET Core 8 and Angular / Valerio De Sanctis.

Format:

Book

Author/Creator:

De Sanctis, Valerio, author.

Series:

Expert insight.

Expert insight

Language:

English

Subjects (All):

Application software--Development.

Application software.

JavaScript (Computer program language).

Web sites--Authoring programs.

Web sites.

Active server pages.

AngularJS (Software framework).

Physical Description:

1 online resource (805 pages)

Edition:

Sixth edition.

Place of Publication:

Birmingham : Packt Publishing, [2024]

Summary:

If you want to learn how to use ASP.NET Core with Angular effectively, this hands-on guide is for you. Improve the way you create, debug, and deploy web applications while keeping up to date with the latest developments in .NET 8 and modern Angular, including .NET Minimal APIs and the new Angular standalone API defaults. You’ll begin by setting up SQL Server 2022 and building a data model with Entity Framework Core. You’ll progress to fetching and displaying data, handling user input with Angular reactive forms, and implementing front-end and back-end validators for maximum effect. After that, you will perform advanced debugging and explore unit testing features with xUnit for .NET, and Jasmine and Karma for Angular. You’ll use Identity API endpoints in ASP.NET Core and functional route guards in Angular to add authentication and authorization to your apps. Finally, you’ll learn how to deploy to Windows, Linux, and Azure. By the end of this book, you will understand how to tie together the front-end and back-end to build and deploy secure and robust web applications.

Contents:

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

.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

Chapter 2: Getting Ready

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

Chapter 3: Looking Around

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

Chapter 4: Front-End and Back-End Interactions

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

Chapter 5: Data Model with Entity Framework Core

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

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

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?

Chapter 6: Fetching and Displaying Data

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

Adding filtering

Extending ApiResult (again)

CitiesComponent

CitiesComponent template (HTML) file

CitiesComponent style (SCSS) file

AngularMaterialModule

Performance considerations

Adding countries to the loop

ASP.NET

Angular

country.ts

countries.component.ts

countries.component.html

countries.component.scss

AppModule

NavComponent

Testing CountriesComponent

Chapter 7: Forms and Data Validation

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

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

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?

Chapter 8: Code Tweaks and Data Services

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

base-form.component.ts

Adding the number of cities

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

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

Chapter 9: Back-End and Front-End Debugging

Backend debugging

Windows or Linux?

The basics

Conditional breakpoints

Conditions

Actions

Testing the conditional breakpoint.

The Output window.

Notes:

Description based on publisher supplied metadata and other sources.

Description based on print version record.

ISBN:

9781805122104

180512210X

OCLC:

1424952476