Preface

ASP.NET Core is a free and open-source modular web framework developed by Microsoft that runs on top of the full .NET Framework (Windows) or .NET Core (cross-platform). It has been made specifically for building efficient HTTP services that can be reached and consumed by a massive range of clients, including web browsers, mobile devices, smart TVs, web-based home automation tools, and more.

Angular is the successor of AngularJS, a world-renowned development framework born with the aim of providing the coder with the toolbox that is needed to build reactive and cross-platform web-based apps that are optimized for desktop and mobile. It features a structure-rich template approach based upon a natural, easy-to-write, and readable syntax.

Technically, these two frameworks have little or nothing in common: ASP.NET Core is mostly focused on the server-side part of the web development stack, while Angular is dedicated to covering all the client-side aspects of web applications, such as the User Interface (UI) and User Experience (UX). However, both of them came into being because of a common vision shared by their respective creators: the HTTP protocol is not limited to serving web pages; it can also be used as a viable platform upon which to build web-based APIs to effectively send and receive data. This is the notion that slowly made its way through the first 20 years of the World Wide Web’s life and is now an undeniable, widely acknowledged statement and also a fundamental pillar of almost every modern web development approach.

As for the reasons behind this perspective switch, there are plenty of good ones, the most important of them being related to the intrinsic characteristics of the HTTP protocol: it’s rather simple to use, and flexible enough to match most of the development needs of the ever-changing environment that the World Wide Web happens to be in. This is not to mention how universal it has become nowadays: almost any platform that we can think of has an HTTP library, so HTTP services can reach a broad range of clients, including desktop and mobile browsers, IoT devices, desktop applications, video games, and so on.

The main purpose of this book is to bring together the latest versions of ASP.NET Core and Angular within a single development stack to demonstrate how they can be used to create high-performance web applications and services that can be used seamlessly by any clients.

Who this book is for

This book is for intermediate and experienced developers who already know about ASP.NET Core and Angular and are looking to learn more about them and understand how to use them together to create a production-ready Single-Page Application (SPA) or Progressive Web Application (PWA) using SQL Server and Entity Framework Core.

However, the fully documented code samples (also available on GitHub) and the step-by-step implementation tutorials make this book easy to understand even for beginners and developers who are just getting started.

What this book covers

Chapter 1, Introducing ASP.NET and Angular, introduces some of the basic concepts of the frameworks that we are going to use throughout the book, as well as the various kinds of web applications that can be created (SPAs, PWAs, native web apps, and more).

Chapter 2, Getting Ready, explains how to create the ASP.NET Core projects that will be used for the rest of the book using the templates provided by Visual Studio for both the back-end (ASP.NET Core Web API) and the front-end (Standalone Angular App).

Chapter 3, Looking Around, is a detailed overview of the various back-end and front-end elements provided by the .NET Core and Angular template shipped with Visual Studio, backed up with some high-level explanations of how they can work together in a typical HTTP request-response cycle.

Chapter 4, Front-End and Back-End Interactions, provides a comprehensive tutorial for building a sample ASP.NET Core and Angular app that provides diagnostic info to the end user by querying health check middleware using a Bootstrap-based Angular client.

Chapter 5, Data Model with Entity Framework Core, constitutes a journey through Entity Framework Core and its capabilities as an Object-Relational Mapping (ORM) framework, from SQL database deployment (cloud-based and/or local instance) to data model design, including various techniques to read and write data from back-end controllers.

Chapter 6, Fetching and Displaying Data, covers how to expose Entity Framework Core data using the ASP.NET Core back-end web API, consume that data with Angular, and then show it to end users using the front-end UI.

Chapter 7, Forms and Data Validation, details how to implement the HTTP PUT and POST methods in back-end web APIs in order to perform insert and update operations with Angular, along with server-side and client-side data validation.

Chapter 8, Code Tweaks and Data Services, explores some useful refactoring and improvements to strengthen your app’s source code and includes an in-depth analysis of Angular’s data services to understand why and how to use them.

Chapter 9, Back-End and Front-End Debugging, looks at how to properly debug the back-end and front-end stacks of a typical web application using the various debugging tools provided by Visual Studio to their full extent.

Chapter 10, ASP.NET Core and Angular Unit Testing, comprises a detailed review of the Test-Driven Development (TDD) and Behavior-Driven Development (BDD) development practices and goes into how to define, implement, and perform back-end and front-end unit tests using xUnit, Jasmine, and Karma.

Chapter 11, Authentication and Authorization, gives you a high-level introduction to the concepts of authentication and authorization and presents a narrow lineup of some of the various techniques, methodologies, and approaches to properly implementing proprietary or third-party user identity systems. A practical example of a working ASP.NET Core and Angular authentication mechanism based upon ASP.NET Identity and IdentityServer4 is included.

Chapter 12, Progressive Web Apps, delves into how to convert an existing SPA into a PWA using service workers, manifest files, and offline caching features.

Chapter 13, Beyond REST – Web API with GraphQL, introduces the concept of the GraphQL query language, explains its pros and cons, and shows how to implement a GraphQL-based API using HotChocolate (for the back-end) and Apollo Angular (for the front-end).

Chapter 14, Real-Time Updates with SignalR, is dedicated to SignalR, a free and open-source library that can be used to send asynchronous notifications to client-side web applications, and explains how to implement it in ASP.NET Core and Angular.

Chapter 15, Windows, Linux, and Azure Deployment, teaches you how to deploy the ASP.NET and Angular apps created in the previous chapters and publish them in a cloud-based environment using a Windows Server 2019 or a Linux CentOS virtual machine, as well as covering Azure App Service deployment.

To get the most out of this book

These are the software packages (and relevant version numbers) used to write this book and test the source code:

• Visual Studio 2022 Community Edition 17.0.4 with the optional ASP.NET and web development workload (it can be selected from the Workloads section within the Visual Studio installer app)
• Microsoft .NET 6 SDK 6.0.101
• TypeScript 4.3
• NuGet package manager 6.0
• Node.js 14.15.0 (we strongly suggest installing it using Node Version Manager, also known as nvm)
• Angular 13.0.1

For deployment on Windows:

• Internet Information Services (IIS) (Windows Server)
• ASP.NET Core Runtime 5 and Windows Hosting Bundle Installer for Win64 (ASP.NET official website)

For deployment on Linux:

• ASP.NET Core Runtime 5 for Linux (YUM package manager)
• .NET 5 CLR for Linux (YUM package manager)
• Nginx HTTP Server (YUM package manager)

Download the example code files

The code bundle for the book is hosted on GitHub at https://github.com/PacktPublishing/ASP.NET-Core-6-and-Angular. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Download the color images

We also provide a PDF file that has color images of the screenshots/diagrams used in this book. You can download it here: https://static.packt-cdn.com/downloads/9781803239705_ColorImages.pdf.

Conventions used

There are a number of text conventions used throughout this book:

CodeInText: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. For example: “Navigate to the /ClientApp/src/app/cities folder.”

A block of code is set as follows:

<mat-form-field [hidden]="!cities">
<input matInput (keyup)="loadData($event.target.value)"
placeholder="Filter by name (or part of it)...">
</mat-form-field>

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are highlighted:

import { FormGroup, FormControl } from '@angular/forms';
class ModelFormComponent implements OnInit {
    form: FormGroup;
    ngOnInit() {
        this.form = new FormGroup({
            title: new FormControl()
        });
    }
}

Any command-line input or output is written as follows:

> dotnet new angular -o HealthCheck

Bold: Indicates a new term, an important word, or words that you see on screen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: “A simple Add a new City button will fix both these issues at once.”

Get in touch

Feedback from our readers is always welcome.

General feedback: Email [email protected], and mention the book’s title in the subject of your message. If you have questions about any aspect of this book, please email us at [email protected].

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book we would be grateful if you would report this to us. Please visit, http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.

Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit http://authors.packtpub.com.