ASP.NET Core 3 and Angular 9

724 Pages·2020·13.136 MB·English

by  Valerio De Sanctis

ASP.NET Core 3 and
Angular 9
Third Edition
Full stack web development with .NET Core 3.1
and Angular 9
Valerio De Sanctis
BIRMINGHAM - MUMBAI
ASP.NET Core 3 and Angular 9
Third Edition
Copyright © 2020 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in
any form or by any means, without the prior written permission of the publisher, except in the case of brief
quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information
presented. However, the information contained in this book is sold without warranty, either express or
implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any
damages caused or alleged to have been caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products
mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the
accuracy of this information.
Commissioning Editor: Ashwin Nair
Acquisition Editor: Larissa Pinto
Content Development Editor: Aamir Ahmed
Senior Editor: Hayden Edwards
Technical Editor: Sachin Sunilkumar
Copy Editor: Safis Editing
Project Coordinator: Kinjal Bari
Proofreader: Safis Editing
Indexer: Priyanka Dhadke
Production Designer: Arvindkumar Gupta
First published: October 2016
Second edition: November 2017
Third edition: February 2020
Production reference: 1130220
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham
B3 2PB, UK.
ISBN 978-1-78961-216-5
www.packt.com
Packt.com
Subscribe to our online digital library for full access to over 7,000 books and videos,
as well as industry leading tools to help you plan your personal development and
advance your career. For more information, please visit our website.
Why subscribe?
Spend less time learning and more time coding with practical eBooks and
Videos from over 4,000 industry professionals
Improve your learning with Skill Plans built especially for you
Get a free eBook or video every month
Fully searchable for easy access to vital information
Copy and paste, print, and bookmark content
Did you know that Packt offers eBook versions of every book published, with PDF
and ePub files available? You can upgrade to the eBook version at www.packt.com and
as a print book customer, you are entitled to a discount on the eBook copy. Get in
touch with us at [email protected] for more details.
At www.packt.com, you can also read a collection of free technical articles, sign up for
a range of free newsletters, and receive exclusive discounts and offers on Packt books
and eBooks.
Contributors
About the author
Valerio De Sanctis is a skilled IT professional with more than 15 years of experience
in lead programming, web-based development, and project management using
ASP.NET, PHP, and Java. He has held senior positions at a range of financial and
insurance companies, most recently serving as Chief Technology Officer, Chief
Security Officer, and Chief Operating Officer at a leading after-sales and IT service
provider for multiple top-tier life and non-life insurance groups.
During the course of his career, Valerio has helped many private organizations to
implement and maintain .NET based solutions, working side by side with many IT
industry experts and leading several frontend, backend, and UX development teams.
He designed the architecture and actively oversaw the development of a wide
number of corporate-level web application projects for high-profile clients, customers,
and partners, including the London Stock Exchange Group, Zurich Insurance Group,
Allianz, Generali, Harmonie Mutuelle, Honda Motor, FCA Group, Luxottica, ANSA,
Saipem, ENI, Enel, Terna, Banzai Media, Virgilio.it, Repubblica.it, and Corriere.it.
He is an active member of the Stack Exchange network, providing advice and tips for
.NET, JavaScript, HTML5, and web-related topics on the StackOverflow, ServerFault,
and SuperUser communities. Most of his projects and code samples are available
under open source licenses on GitHub, BitBucket, NPM, CocoaPods, JQuery Plugin
Registry, and WordPress Plugin Repository. He's also a Microsoft Most Valuable
Professional (MVP) for Developer Technologies, an annual award that recognizes
exceptional technology community leaders worldwide who actively share their high-
quality, real-world expertise with users and Microsoft.
Since 2014, he has operated an IT-oriented, web-focused blog at
www.ryadel.com, featuring news, reviews, code samples, and guides designed to
help developers and tech enthusiasts from all around the world. He has written
various books on web development, many of which have become best-sellers on
Amazon, with tens of thousands of copies sold worldwide.
You can reach him on LinkedIn at https:/​/​www.​linkedin.​com/​in/​darkseal/​
About the reviewers
Anand Narayanaswamy works as a freelance writer and reviewer based in
Thiruvananthapuram. He has had articles published in leading print magazines and
on online tech portals. He was the recipient of the Microsoft MVP award from 2002 to
2011. He is currently a Windows Insider MVP and also part of the prestigious
ASPInsiders group.
Anand has also worked as a technical editor and reviewer for several publishers and
authored Community Server Quickly for Packt Publishing. He has contributed content
for Digit Magazine and Manorama Year Book.
Anand works as an Unacademy educator and also runs his own blogs – Netans and
Learnxpress. He is active on social media and can be reached at @visualanand on
Twitter and @netanstech on Instagram.
I would like to thank God for giving me the power to work daily. I would also like to
thank Amrita Venugopal, Kinjal Bari, and Manthan Patel for their excellent
support and patience. The manner in which Packt editors handle reviewers from the
start of a project is highly impressive. I am also grateful to my father, mother, and
brother for their constant support and encouragement.
Santosh Yadav is from Pune, India, and holds a bachelor's degree in computing. He
has more than 11 years' experience as a developer, and has worked with multiple
technologies, including .NET, Node.js, and Angular. He is a Google Developer Expert
in Angular and web technologies. He is the author of the ng deploy library for Netlify
and a writer for Angular In Depth. He is also a speaker and organizer for the Pune
Tech Meetup, and a contributor to projects including Angular and NgRx.
Packt is searching for authors like you
If you're interested in becoming an author for Packt, please visit
authors.packtpub.com and apply today. We have worked with thousands of
developers and tech professionals, just like you, to help them share their insight with
the global tech community. You can make a general application, apply for a specific
hot topic that we are recruiting an author for, or submit your own idea.
Table of Contents
Preface 1
Chapter 1: Getting Ready 8
Technical requirements 9
Two players, one goal 9
The ASP.NET Core revolution 10
ASP.NET Core 1.x 11
ASP.NET Core 2.x 12
ASP.NET Core 3.x 15
What's new in Angular? 17
GetAngular 17
AngularJS 18
Angular 2 19
Angular 4 21
Angular 5 22
Angular 6 23
Angular 7 23
Angular 8 25
Angular 9 26
Reasons for choosing .NET Core and Angular 27
A full-stack approach 29
SPAs, NWAs, and PWAs 30
Single-page application 31
Native web application 32
Progressive web application 32
Product owner expectations 35
A sample SPA project 37
Not your usual Hello World! 38
Preparing the workspace 38
Disclaimer – do (not) try this at home 39
The broken code myth 39
Stay hungry, stay foolish, yet be responsible as well 41
Setting up the project 42
Installing the .NET Core SDK 42
Checking the SDK version 43
Creating the .NET Core and Angular project 44
Opening the new project in Visual Studio 44
Performing a test run 47
Summary 48
Suggested topics 49
References 49
Table of Contents
Chapter 2: Looking Around 52
Technical requirements 53
Solution overview 53
The .NET Core back-end 54
Razor Pages 55
Controllers 55
Configuration files 57
Program.cs 57
Web host versus web server 58
Startup.cs 60
appsettings.json 66
The Angular front-end 67
Workspace 68
angular.json 68
package.json 69
Upgrading (or downgrading) Angular 70
Upgrading (or downgrading) the other packages 72
tsconfig.json 74
Other workspace-level files 76
The /ClientApp/src/ folder 76
The /app/ folder 78
AppModule 78
Server-side AppModule for SSR 79
AppComponent 80
Other components 80
Testing the app 81
HomeComponent 81
NavMenuComponent 82
CounterComponent 83
The specs.ts file(s) 84
Our first app test 84
Getting to work 86
Static file caching 86
A blast from the past 87
Back to the future 88
Testing it out 90
The strongly-typed approach(es) 92
Client app cleanup 93
Trimming down the Component list 93
The AppModule source code 96
Updating the NavMenu 96
Summary 99
Suggested topics 100
References 100
Chapter 3: Front-end and Back-end Interactions 101
Technical requirements 102
Introducing .NET Core health checks 102
[ ii ]
Table of Contents
Adding the HealthChecks middleware 103
Adding an Internet Control Message Protocol (ICMP) check 105
Possible outcomes 106
Creating an ICMPHealthCheck class 106
Adding the ICMPHealthCheck to the pipeline 108
Improving the ICMPHealthCheck class 109
Adding parameters and response messages 109
Updating the middleware setup 111
Implementing a custom output message 112
About health check responses and HTTP status codes 114
Configuring the output message 114
Health checks in Angular 115
Creating the Angular Component 116
health-check.component.ts 117
Imports and modules 118
DI 121
ngOnInit (and other lifecycle hooks) 122
Constructor 124
HttpClient 125
Observables 127
Interfaces 128
health-check.component.html 129
health-check.component.css 131
Adding the Component to the Angular app 132
AppModule 132
NavMenuComponent 133
Testing it out 134
Summary 134
Suggested topics 135
References 135
Chapter 4: Data Model with Entity Framework Core 137
Technical requirements 138
The WorldCities web app 138
Reasons to use a Data Server 140
The data source 142
The data model 144
Introducing Entity Framework Core 144
Installing Entity Framework Core 146
The SQL Server Data Provider 148
DBMS licensing models 148
What about Linux? 149
SQL Server alternatives 149
Data modeling approaches 149
Model-First 150
Pros 150
Cons 151
Database-First 151
Pros 152
[ iii ]