Essential Angular for ASP.NET Core MVC 3 A Practical Guide to Successfully Using Both in Your Projects — Second Edition — Adam Freeman Essential Angular for ASP.NET Core MVC 3 A Practical Guide to Successfully Using Both in Your Projects Second Edition Adam Freeman Essential Angular for ASP.NET Core MVC 3: A Practical Guide to Successfully Using Both in Your Projects Adam Freeman London, UK ISBN-13 (pbk): 978-1-4842-5283-3 ISBN-13 (electronic): 978-1-4842-5284-0 https://doi.org/10.1007/978-1-4842-5284-0 Copyright © 2019 by Adam Freeman This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein. Managing Director, Apress Media LLC: Welmoed Spahr Acquisitions Editor: Joan Murray Development Editor: Laura Berendson Coordinating Editor: Mark Powers Cover designed by eStudioCalamar Cover image designed by Freepik (www.freepik.com) Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail [email protected], or visit www.springeronline.com. Apress Media, LLC is a California LLC and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation. For information on translations, please e-mail [email protected]; for reprint, paperback, or audio rights, please email [email protected]. Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Print and eBook Bulk Sales web page at www.apress.com/bulk-sales. Any source code or other supplementary material referenced by the author in this book is available to readers on GitHub via the book's product page, located at www.apress.com/9781484252833. For more detailed information, please visit www.apress.com/source-code. Printed on acid-free paper Dedicated to my lovely wife, Jacqui Griffyth. (And also to Peanut.) Table of Contents About the Author ���������������������������������������������������������������������������������������������������xiii About the Technical Reviewer ���������������������������������������������������������������������������������xv ■ Chapter 1: Understanding Angular and ASP�NET Core MVC �����������������������������������1 Who Is This Book For? ������������������������������������������������������������������������������������������������������1 What Does This Book Cover? ��������������������������������������������������������������������������������������������1 What Doesn’t This Book Cover? ���������������������������������������������������������������������������������������2 What Do You Need to Know? ��������������������������������������������������������������������������������������������2 Are There Lots of Examples? ��������������������������������������������������������������������������������������������2 Where Can You Get the Example Code? ���������������������������������������������������������������������������5 Where Can You Get Corrections for This Book? ����������������������������������������������������������������5 Contacting the Author �������������������������������������������������������������������������������������������������������5 Summary ��������������������������������������������������������������������������������������������������������������������������5 ■ Chapter 2: Getting Ready ���������������������������������������������������������������������������������������7 Getting Ready �������������������������������������������������������������������������������������������������������������������7 Installing �NET Core ��������������������������������������������������������������������������������������������������������������������������������8 Installing Node�js ������������������������������������������������������������������������������������������������������������������������������������8 Installing Git ��������������������������������������������������������������������������������������������������������������������������������������������9 Installing Visual Studio 2019 ����������������������������������������������������������������������������������������������������������������10 Installing Visual Studio Code ����������������������������������������������������������������������������������������������������������������10 Summary ������������������������������������������������������������������������������������������������������������������������14 v ■ Table of ConTenTs ■ Chapter 3: Creating the Project ���������������������������������������������������������������������������15 Preparing to Create a Project �����������������������������������������������������������������������������������������15 Creating the Angular Part of the Project �������������������������������������������������������������������������16 Starting the Angular Development Tools �����������������������������������������������������������������������������������������������17 Editing the Angular Project �������������������������������������������������������������������������������������������������������������������18 Understanding the Angular Toolchain ���������������������������������������������������������������������������������������������������20 Creating the ASP�NET Core MVC Part of the Project �������������������������������������������������������23 Preparing the Project for Visual Studio �������������������������������������������������������������������������������������������������25 Preparing to Build the ASP�NET Core MVC Application ��������������������������������������������������������������������������27 Building and Running the ASP�NET Core MVC Application ��������������������������������������������������������������������28 Understanding the ASP�NET Core MVC Toolchain ����������������������������������������������������������������������������������29 Connecting the Angular and ASP�NET Core Applications ������������������������������������������������32 Managing the Angular Server Through ASP�NET Core ���������������������������������������������������������������������������32 Using the ASP�NET Core MVC Proxy Feature �����������������������������������������������������������������������������������������35 Updating the Controller, View, and Layout ��������������������������������������������������������������������������������������������38 Summary ������������������������������������������������������������������������������������������������������������������������40 ■ Chapter 4: Creating the Data Model ��������������������������������������������������������������������41 Preparing for This Chapter ���������������������������������������������������������������������������������������������41 Starting the Data Model �������������������������������������������������������������������������������������������������43 Creating the ASP�NET Core MVC Data Model ����������������������������������������������������������������������������������������43 Starting the Angular Data Model ����������������������������������������������������������������������������������������������������������53 Understanding the TypeScript Data Model Classes ������������������������������������������������������������������������������55 Integrating the Angular Data Model ������������������������������������������������������������������������������������������������������59 Displaying the Data�������������������������������������������������������������������������������������������������������������������������������62 Reviewing the Application Structure ������������������������������������������������������������������������������65 Reviewing the ASP�NET Core MVC Application Structure ����������������������������������������������������������������������65 Reviewing the Angular Application Structure ���������������������������������������������������������������������������������������66 Summary ������������������������������������������������������������������������������������������������������������������������67 vi ■ Table of ConTenTs ■ Chapter 5: Creating a Web Service ����������������������������������������������������������������������69 Preparing for This Chapter ���������������������������������������������������������������������������������������������70 Introducing a Web Service ���������������������������������������������������������������������������������������������71 Understanding RESTful Web Services ��������������������������������������������������������������������������������������������������71 Creating the Web Service ���������������������������������������������������������������������������������������������������������������������72 Using the Web Service in the Angular Application ��������������������������������������������������������������������������������78 Loading Related Data ���������������������������������������������������������������������������������������������������������������������������84 Implementing the GET Method for Multiple Objects �������������������������������������������������������92 Implementing the Web Service Action Method �������������������������������������������������������������������������������������93 Querying Multiple Objects in the Angular Application ��������������������������������������������������������������������������95 Filtering the Data ����������������������������������������������������������������������������������������������������������������������������������99 Understanding the Structure of the Web Service ���������������������������������������������������������102 Summary ����������������������������������������������������������������������������������������������������������������������103 ■ Chapter 6: Completing the Web Service ������������������������������������������������������������105 Preparing for This Chapter �������������������������������������������������������������������������������������������105 Implementing the POST Method �����������������������������������������������������������������������������������106 Understanding the API Enhancements �����������������������������������������������������������������������������������������������106 Creating the Data Binding Classes �����������������������������������������������������������������������������������������������������107 Implementing the Web Service Action Methods ���������������������������������������������������������������������������������109 Creating Data Objects in the Angular Application �������������������������������������������������������������������������������113 Implementing the PUT Method �������������������������������������������������������������������������������������118 Implementing the Web Service Action Methods ���������������������������������������������������������������������������������119 Replacing Products in the Angular Application �����������������������������������������������������������������������������������120 Implementing the PATCH Method ���������������������������������������������������������������������������������124 Understanding JSON Patch�����������������������������������������������������������������������������������������������������������������124 Enhancing the Product Binding Target �����������������������������������������������������������������������������������������������125 Implementing the Web Service Action Method �����������������������������������������������������������������������������������126 Updating Objects in the Angular Application ��������������������������������������������������������������������������������������128 vii ■ Table of ConTenTs Implementing the DELETE Method �������������������������������������������������������������������������������132 Configuring the Database �������������������������������������������������������������������������������������������������������������������132 Implementing the Web Service Action Method �����������������������������������������������������������������������������������134 Deleting Objects in the Angular Application����������������������������������������������������������������������������������������135 Summary ����������������������������������������������������������������������������������������������������������������������138 ■ Chapter 7: Structuring an Angular Application �������������������������������������������������139 Preparing for This Chapter �������������������������������������������������������������������������������������������139 Using the Data Model for Component Cooperation ������������������������������������������������������141 Creating the Display Component ��������������������������������������������������������������������������������������������������������141 Creating the Filter Component ������������������������������������������������������������������������������������������������������������144 Applying the New Components ����������������������������������������������������������������������������������������������������������145 Understanding the Application Structure ��������������������������������������������������������������������������������������������146 Adding Another Component ����������������������������������������������������������������������������������������������������������������147 Understanding Angular Routing �����������������������������������������������������������������������������������152 Creating the Routing Configuration ����������������������������������������������������������������������������������������������������152 Applying the Routing Configuration ����������������������������������������������������������������������������������������������������154 Navigating Using Routes���������������������������������������������������������������������������������������������������������������������155 Improving Navigation ��������������������������������������������������������������������������������������������������������������������������157 Understanding the Application Structure ��������������������������������������������������������������������������������������������164 Summary ����������������������������������������������������������������������������������������������������������������������165 ■ Chapter 8: Creating the Store ����������������������������������������������������������������������������167 Preparing for This Chapter �������������������������������������������������������������������������������������������167 Starting the Product Selection Feature ������������������������������������������������������������������������169 Blocking Out the Feature Components �����������������������������������������������������������������������������������������������169 Configuring the Angular URL Routes ��������������������������������������������������������������������������������������������������175 Removing the Layout Header��������������������������������������������������������������������������������������������������������������176 Displaying the Product List�������������������������������������������������������������������������������������������177 Understanding the Product List Template Features ����������������������������������������������������������������������������178 viii ■ Table of ConTenTs Creating the Category Filter �����������������������������������������������������������������������������������������181 Enhancing the ASP�NET Core MVC Application ������������������������������������������������������������������������������������181 Receiving Category Data in the Angular Data Repository �������������������������������������������������������������������182 Defining a Navigation Service ������������������������������������������������������������������������������������������������������������184 Updating the Filter Component and Template ������������������������������������������������������������������������������������186 Creating the Pagination Controls ����������������������������������������������������������������������������������188 Updating the Routing Configuration ���������������������������������������������������������������������������������������������������188 Representing Pagination State �����������������������������������������������������������������������������������������������������������189 Updating the Navigation Service and Routing Configuration ��������������������������������������������������������������190 Updating the Pagination Button Component ���������������������������������������������������������������������������������������192 Paging the Product Data ���������������������������������������������������������������������������������������������������������������������193 Displaying Ratings ��������������������������������������������������������������������������������������������������������194 Adding the Font Awesome Package ���������������������������������������������������������������������������������������������������194 Updating the Rating Component and Template ����������������������������������������������������������������������������������195 Applying the Rating Component ���������������������������������������������������������������������������������������������������������197 Summary ����������������������������������������������������������������������������������������������������������������������198 ■ Chapter 9: Completing the Angular Store ����������������������������������������������������������199 Preparing for This Chapter �������������������������������������������������������������������������������������������199 Creating the Shopping Cart ������������������������������������������������������������������������������������������200 Extending the Angular Data Model �����������������������������������������������������������������������������������������������������200 Registering the Cart as a Service �������������������������������������������������������������������������������������������������������202 Wiring Up the Buttons �������������������������������������������������������������������������������������������������������������������������203 Creating the Cart Summary Component ���������������������������������������������������������������������������������������������203 Displaying the Cart Detail �������������������������������������������������������������������������������������������������������������������205 Storing Carts ����������������������������������������������������������������������������������������������������������������210 Extending the ASP�NET Core MVC Data Model ������������������������������������������������������������������������������������211 Creating the Cart Storage Web Service ����������������������������������������������������������������������������������������������211 Storing and Retrieving Cart Data ��������������������������������������������������������������������������������������������������������216 ix ■ Table of ConTenTs Creating the Checkout Process ������������������������������������������������������������������������������������219 Extending the ASP�NET Core MVC Data Model ������������������������������������������������������������������������������������220 Creating the ASP�NET Core MVC Web Service �������������������������������������������������������������������������������������222 Creating the Angular Checkout Process ���������������������������������������������������������������������������������������������224 Creating the Checkout Components ���������������������������������������������������������������������������������������������������227 Registering the Components and Creating the Routes �����������������������������������������������������������������������234 Storing Checkout Details as Session Data ������������������������������������������������������������������������������������������237 Summary ����������������������������������������������������������������������������������������������������������������������241 ■ Chapter 10: Using Angular with Blazor �������������������������������������������������������������243 Preparing for This Chapter �������������������������������������������������������������������������������������������243 Creating the Blazor Project �����������������������������������������������������������������������������������������������������������������244 Running the Angular and Blazor Applications �������������������������������������������������������������������������������������244 Understanding Blazor ���������������������������������������������������������������������������������������������������246 Understanding How Blazor Works ������������������������������������������������������������������������������������������������������247 Understanding the Limitations of Blazor ��������������������������������������������������������������������������������������������249 Serving Blazor Using ASP�NET Core MVC ����������������������������������������������������������������������250 Changing the Blazor Root URL ������������������������������������������������������������������������������������������������������������250 Displaying Blazor Components in an MVC Razor View �����������������������������������������������������������������������255 Using Angular and Blazor in the Same View ����������������������������������������������������������������258 Defining the Blazor Component ����������������������������������������������������������������������������������������������������������258 Configuring ASP�NET Core �������������������������������������������������������������������������������������������������������������������260 Updating the Angular Application �������������������������������������������������������������������������������������������������������262 Adding Interoperability Between Angular and Blazor ���������������������������������������������������266 Invoking an Angular Method from Blazor �������������������������������������������������������������������������������������������266 Invoking a Blazor Method from Angular ���������������������������������������������������������������������������������������������272 Summary ����������������������������������������������������������������������������������������������������������������������276 ■ Chapter 11: Creating Administration Features ��������������������������������������������������277 Preparing for This Chapter �������������������������������������������������������������������������������������������277 Adding Administration Features �����������������������������������������������������������������������������������279 Creating the Administration Components �������������������������������������������������������������������������������������������279 x