ASP.NET Core 3 and Angular 9 - Third Edition by Valerio De Sanctis -- Read -- Imperial Library of Trantor

Index

Title Page Copyright and Credits

ASP.NET Core 3 and Angular 9 Third Edition

About Packt

Why subscribe?

Contributors

About the author About the reviewers Packt is searching for authors like you

Preface

Who this book is for What this book covers To get the most out of this book

Download the example code files Download the color images Conventions used

Get in touch

Reviews

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

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

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

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

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

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

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 – <T> and <any> 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

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

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

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

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

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

Leave a review - let other readers know what you think

← Prev
Back
Next →

← Prev
Back
Next →