About this Book

The book "Practical Multiple-Page Apps with ASP.NET Core and Angular Elements - Building Modern Multiple-Page Web Applications Using ASP.NET Core Razor Pages, Angular Elements, WebPack, RxJS, and Mini-SPAs has just been published. This book follows the same style of my previous books on .NET and Web programming and emphasizes practical applications of the latest technolgies to build ultra modern multiple-page web applications. It will provide all the tools you need to develop professional, ultra-modern, responsive MPAs using ASP.NET Core Razor Pages and Angular Elements. I hope this book will be useful for .NET programmers, web developers, and students of all skill levels.

This book teaches you how to build a modern web site/application using a hybrid approach – the simplest being host one or more mini-SPAs within a larger multiple-page web application. It shows how to split a web application into functional parts, and convert each functional part into its own SPA. These mini-SPAs together form a complete multiple-page application. For each mini SPA, we use a simple JavaScript routing system to organize the states of the application and switch between different views by watching changes on the URL.

The technical stack for backend consists of operating system, web server, database, and programming logic. This book chooses ASP.NET Core Razor Pages and SQL Server as the backend framework. A Razor page consists of a Razor view and a code behind file. Each Razor page is self-contained with its own view and code organized together, resulting in a simpler app, which makes coding page-focused scenarios easier and more productive.

The front-end components enable the user's interaction with the web application. In this book, we choose TypeScript, npm, WebPack, RxJS, and Angular as our front-end technical stack. TypeScript is a modern JavaScript development language that provides optional static type checking, classes, and interfaces. It also offers advanced Intellisence, auto-completion, navigation, and refactoring, which makes code easier to read and understand. WebPack is a bundler and it comes in handy when you need to pack multiple assets together into a dependency graph. There is a rising tendency to use WebPack because it can fulfil nearly all tasks that you would perform through a task runner. RxJS is a library for reactive programming using observables, which make it easier to compose asynchronous or callback-based code. This book will explain how to use all of these technologies together to create a modern web application.

Angular is a popular front-end JavaScript framework. Even though it is used for SPA development, we can still take advantage of this framework in building modern multiple-page web applications, i.e., we can use Angular in a non-SPA way via Angular elements. Angular elements are Angular components packaged as custom elements, a web standard for defining new HTML elements in a framework-agnostic way. This book shows how to embed Angular elements into our modern MPA project without having to migrate an entire application to Angular.

This book also includes the other selected topics, including how to use Microsoft ML.NET to solve machine learning problems, such as classification, regression, and clustering; how to create various charts and graphics using ECharts; how to use SignalR to add real-time features to your web apps; and how to use dependency injection, how to create custom tag helpers and Razor Class Libraries in Razor Pages.

Table of Contents

    Introduction	                        1
        Why Second Edition?	                1
        Overview	                        1
        What this Book Includes	            3
        Is this Book for You?	            3
        What Do You Need to Use this Book?	4
        How this Book Is Organized	        4
        What is Left Out	                6
        Use Code Examples	                6
        Customer Support	                6

    1	C# Graphics Basics	                7
        1.1	Coordinate Systems          	7
            1.1.1	Default Coordinates	    7
            1.1.2	Custom Coordinates	    14
        1.2	Create ASP.NET Core Project	    17
        1.3	Examine Project Files	        20
            1.3.1	Pages Folder	        20
            1.3.2	wwwroot Folder	        20
            1.3.3	Other files	            20
        1.4	Create a New Razor Page	        20
            1.4.1	Razor Template	        21
            1.4.2	Model Binding	        22
        1.5	Tag Helpers	                    25
        1.6	Routing	                        26
        1.7	Security	                    26

    2	TypeScript and WebPack	            27
        2.1	Install TypeScript and Node.js	27
        2.2	Compiler Options for TypeScript	29
            2.2.1	Change TypeScript Compiler Parameters	29
            2.2.2	TypeScript Configuration File	30
        2.3	TypeScript Basics	            31
            2.3.1	Static Types	        32
            2.3.2	Interface	            33
            2.3.3	Class	                34
            2.3.4	Enum	                36
            2.3.5	Declaration	            36
            2.3.6	Module	                37
            2.3.7	ES2017 (ES8) Feature Support	39
        2.4	WebPack	                        40
            2.4.1	Install WebPack	        40
            2.4.2	Configure WebPack	    41
            2.4.3	Configuration Options	42
            2.4.4	WebPack Loaders	        44
            2.4.5	WebPack Plugins	        44
            2.4.6	Bundle Other Resources	45
            2.4.7	Library Bundling	    45
            2.4.8	Configuration File	    49
        2.5	Test WebPack	                51
            2.5.1	Web API Service	        51
            2.5.2	Web Service Application	52

    3	RxJS Basics	                        57
        3.1	Reactive Programming	        57
            3.1.1	Proactive vs Reactive	57
            3.1.2	Data Stream and Propagation	58
            3.1.3	Observer API	        59
        3.2	Create Data Streams	            60
            3.2.1	Streams from Existing Data	60
            3.2.2	Generate New Data	    61
        3.3	Operators	                    62
            3.3.1	Map vs flatMap	        62
            3.3.2	Filter Operator	        63
            3.3.3	Reduce vs Scan	        64
        3.4	Time in RxJS	                65
            3.4.1	Interval	            65
            3.4.2	Timer	                66
            3.4.3	Delay	                66
            3.4.4	Buffering	            67
        3.5	Combination Operators	        68
            .5.1	Merge Operator	        69
            3.5.2	Concat Operator	        70
            3.5.3	SwitchAll Operator	    70
            3.5.4	CombineLatest Operator	71
        3.6	Asynchronous Streams	        72

    4	Database and Web Services	        75
        4.1	Data Model	                    75
            4.1.1	Connection String	    75
            4.1.2	Model Data Types	    76
            4.1.3	Data Context	        77
            4.1.4	Initialize Database	    78
            4.1.5	Add Stock Tickers to Database	79
            4.1.6	Add Stock Prices to Database	80
            4.1.7	Check Database	        81
        4.2	ASP.NET Core Web Services	    83
            4.2.1	Create web services	    83
            4.2.2	Get Method	            86
            4.2.3	Post Method	            88
            4.2.4	Put Method	            89
            4.2.5	Delete Method	        89
        4.3	Data Model in Client Side	    89
            4.3.1	Model Interfaces	    90
            4.3.2	Repository with RxJS	90
        4.4	Access Web Service Data	        93
            4.4.1	Display Stock Data      94
            4.4.2	Display Stock Price Data	96
        4.5	CRUD Operations	                98
            4.5.1	Create Operation	    98
            4.5.2	Update Operation	    100
            4.5.3	Delete Operation	    103
            4.5.4	Save Stock Data to Database	104

    5	Angular Basics	                    111
        5.1	Create the Angular Project	    112
            5.1.1	Add a New Angular Project	112
            5.1.2	Update Angular	        113
        5.2	Project Structure	            115
        5.3	Configure Angular Project	    119
        5.4	Bootstrap and Angular Material	120
            5.4.1	Bootstrap	            120
            5.4.2	Bootstrap or Angular Material?	121
            5.4.3	Install Angular Material	122
            5.4.4	Import Material Modules	123
            5.4.5	Install ag-Grid	        124
        5.5	Structure of Angular App	    124
            5.5.1	App Entry Point	        124
            5.5.2	Root Module	            125
            5.5.3	Root Component	        126
            5.5.4	Routing and Navigation	127
            5.5.5	Main HTML Page	        128
        5.6	Data Binding	                129
            5.6.1	Interpolation Binding	129
            5.6.2	One-Way Binding	        133
            5.6.3	Event Binding	        135
            5.6.4	Two-Way Binding	        138
        5.7	Directives	                    141
            5.7.1	Structural Directives	141
            5.7.2	Attribute Directives	144
        5.8	Input and Output Properties	    147
            5.8.1	Multiple Components	    147
            5.8.2	Input Property	        149
            5.8.3	Output Property	        149

    6	Introduction to Angular Elements	153
        6.1	Add Angular Elements Support	153
            6.1.1	Add @angular/elements Package	153
            6.1.2	Add Other Packages	    155
        6.2	Angular Elements Example	    156
            6.2.1	Create Component	    156
            6.2.2	Create Custom Element	158
            6.2.3	Package Angular Elements for Development	159
            6.2.4	Package Angular Elements for Production	161
        6.3	More Custom-Element Examples	163
            6.3.1	Test Angular Material	163
            6.3.2	Test Bootstrap	        167
            6.3.3	Custom Element with Input	171
            6.3.4	Custom Element with Slot	172
            6.3.5	Custom Elements in TypeScript	174
        6.4	Angular Ivy	                    175

    7	Web Services in Angular Elements	177
        7.1	Repository Service in Angular	177
            7.1.1	Get Methods	            178
            7.1.2	Post Methods	        179
            7.1.3	Put Method	            180
            7.1.4	Delete Method	        180
        7.2	Access Web Service Data	        181
            7.2.1	Display Stock Data	    181
            7.2.2	Display Stock Price Data	183
        7.3	Perform CRUD Operations	        186
            7.3.1	Create Operation	    186
            7.3.2	Update Operation	    188
            7.3.3	Delete Operation	    191
            7.3.4	Add Stock Price Data to Database	197

    8	Chart and Graphics	                201
        8.1	Line Charts	                    202
            8.1.1	Install ECharts Package	202
            8.1.2	Simple Line Charts	    204
            8.1.3	Multiple-Line Charts	206
            8.1.4	Line Charts with Two Y Axes	209
        8.2	Specialized 2D Charts	        214
            8.2.1	Area Charts	            214
            8.2.2	Bar Charts	            220
            8.2.3	Pie Charts	            225
            8.2.4	Polar Charts	        229
        8.3	3D Charts and Graphics	        232
            8.3.1	3D Line Charts	        232
            8.3.2	3D Simple Surfaces	    237
            8.3.3	3D Parametric Surfaces	243
        8.4	Stock Charts	                251
            8.4.1	Candlestick Charts	    251
            8.4.2	Candlestick and Volume Charts	256
            8.4.3	Real-Time Stock Charts	260

    9	Real-Time Apps with SignalR	        267
        9.1	Chat App with SignalR	        267
            9.1.1	Add SignalR Client Library	267
            9.1.2	Create a SignalR Hub	268
            9.1.3	Configure SignalR	    268
            9.1.4	Create Chat App	        269
            9.1.5	Test Chat App	        272
        9.2	Whiteboard App with SignalR	    272
            9.2.1	Server-Side Code	    272
            9.2.2	Client-Side Code	    274
            9.2.3	Test Whiteboard App	    276
        9.3	Streaming App with SignalR	    276
            9.3.1	Server-Side Code	    276
            9.3.2	Client-Side Code	    279
            9.3.3	Test Streaming App	    280
        9.4	SignalR and Angular Elements	281
            9.4.1	Server-Side Code	    281
            9.4.2	SignalR Service in Angular	282
            9.4.3	Create Angular Element with SignalR	283
            9.4.4	Test Real-Time Stock Chart	288

    10	Machine Learning	                291
        10.1	Introduction to ML.NET	    291
            10.1.1	Main Features of ML.NET	292
            10.1.2	Code Workflow	        292
            10.1.3	Data Preparation	    293
                10.1.3.1	Filter Data	    294
                10.1.3.2	Replace Missing Data	294
                10.1.3.3	Data Normalization	294
                10.1.3.4	Categorical Data	295
                10.1.3.5	Text Data	    296
            10.1.4	Build Pipelines	        297
            10.1.5	Model Evaluation	    297
        10.2	Sentiment Analysis	        298
            10.2.1	Code-Behind	            298
            10.2.2	Prepare Data	        302
            10.2.3	Build and Train the Model	302
            10.2.4	Model Evaluation	    303
            10.2.5	Razor Page Code	        304
            10.2.6	Confusion Matrix	    306
        10.3	Yin-Yang Classification	    307
            10.3.1	Code-Behind	            307
            10.3.2	Razor Page Code	        311
            10.3.3	Generate Data for Decision Boundary	313
            10.3.4	Visualize Decision Boundary	316
        10.4	Multiclass Classification	320
            10.4.1	Code-Behind	            320
            10.4.2	Prepare Data	        323
            10.4.3	Build and Train the Model	324
            10.4.4	Model Evaluation	    325
            10.4.5	Model Prediction	    325
            10.4.6	Razor Page Code	        326
        10.5	Regression	                330
            10.5.1	Code-Behind	            330
            10.5.2	Prepare Data	        335
            10.5.3	Build and Train the Model	336
            10.5.4	Model Evaluation	    337
            10.5.5	Model Prediction	    338
            10.5.6	Visualize Predicted Results	338
            10.5.7	Razor Page Code	        340
        10.6	Clustering	                344
            10.6.1	Code-behind	            344
            10.6.2	Prepare Data	        347
            10.6.3	Build and Train the Model	348
            10.6.4	Model Evaluation and Prediction	348
            10.6.5	Visualize Predicted Results	349
            10.6.6	Razor Page Code	        350

    11	Mini SPAs	                        355
        11.1	Navigo Router	            355
            11.1.1	Installation	        355
            11.1.2	How to Use Navigo	    356
        11.2	Create Mini SPA	            357
            11.2.1	Razor Page	            357
            11.2.2	TypeScript Code	        357
            11.2.3	Test Mini SPA	        358
        11.3	Mini SPA with Angular Elements	360
            11.3.1	Mini SPA Pages	        360
            11.3.2	Razor Page	            361
            11.3.3	TypeScript Code	        361
            11.3.4	Test Mini SPA	        362

    12	Authentication and Authorization	365
        12.1	Identity in ASP.NET Core	365
            12.1.1	Installation	        365
            12.1.2	Identity User Entity	366
            12.1.3	Identity Database	    367
            12.1.4	Scaffold Identity	    370
            12.1.5	Code Adjustments	    373
            12.1.6	Layout Changes	        374
        12.2	Test Default Identity	    375
            12.2.1	User Registration	    376
            12.2.2	User Login	            378
            12.2.3	Two-Factor Authentication	379
        12.3	Authorization	            383
            12.3.1	Authorize a Page	    383
            12.3.2	Authorize a Folder	    384
            12.3.3	Anonymous Access	    384
            12.3.4	Test Authorization	    385
        12.4	Customize Identity	        386
            12.4.1	Replace Default Identity	386
            12.4.2	Customize Login Page	387

    13	Advanced Topics in Razor Pages	    391
        13.1	Dependency Injection	    391
            13.1.1	Simple DI Example	    391
            13.1.2	Service Lifetime	    394
            13.1.3	DI Lifetime Example	    395
        13.2	Custom Tag Helpers	        398
            13.2.1	How Tag Helpers Work	398
            13.2.2	HTML Helpers vs Tag Helpers	399
            13.2.3	Create Custom Tag Helpers	400
            13.2.4	Pager Tag Helper	    402
        13.3	Razor Class Libraries	    406
            13.3.1	Create a Razor Class Library	406
            13.3.2	Use Razor Class Library	408
            13.3.3	Override Razor Class Library	411
    
    Index	                                413
    

Introduction

        Overview
        MPA vs SPA
        Technical Stack for Modern MPA
        What This Book Includes
        Is This Book for You
        What Do You Need to Use This Book
        How This Book is Organized
        Using Code Examples

Overview

Welcome to Practical Multiple-Page Apps with ASP.NET Core and Angular Elements. This book will provide all the tools you need to develop ultra-modern multiple-page applications (MPAs) using ASP.NET Core Razor Pages, Angular elements, WebPack, RxJS, and mini-SPAs (Single-Page Applications). I hope that this book will be useful for web programmers, business developers, and students of all skill levels who are interested in web-application developments.

A web-based application is a software that can be accessed through the internet. The software and database are resided in a central server. It takes advantage of today’s technology to enhance the productivity and efficiency. Web or distributed applications are mostly used on client-server networks where the user’s computer accesses information from the server or cloud computing server. There are some obvious advantages of web applications over desktop applications. Web applications need to be installed only once, which can avoid the burden in deploying in each client machine and make software updates and maintenance much easier. They are platform independent, adaptable in mobile application, and can be accessed from anywhere in the world.

Here, I would like to point out the difference between the website and web application, even though they are not entirely exclusive and the difference is simply a matter of perspective. Websites are primarily informational and defined by their content. In this sense, https://www.cnn.com and http://www.espn.com are websites, not web applications. Web applications are primarily interactive, and allow users to perform actions. Google Gmail and Google Maps are examples of web applications. That is, a website consists of static content repository that is dealt out to all visitors, while a web application depends on interaction and requires user input and data processing.

MPA vs SPA

If you are thinking about creating your own web applications, you have probably heard that there are two main design patterns: multi-page application (MPA) and single-page application (SPA). MPA works in a more traditional way. It has slower speed because it needs to fetch pages from the server for each request. The main advantage of MPA is its simple search engine optimization (SEO) scheme. The architecture of MPA allows you to optimize every page for search engines. Developer can easily add the Meta tags for any page. Another advantage is that developing a multi-page application is much easier than SPA because MPA requires a smaller stack of technologies. MPA is more suitable for developing websites.

SPA is a web application that fits on a single web page with dynamic actions without the need to refresh the page. It is fast, as most resources like HTHL, CSS, and Scripts are only loaded once throughout the lifespan of the application. SPA allows you to simulate the work of a desktop application. The architecture of SPA is arranged in such a way that when you go to a new page, only a portion of the content is updated. Thus, there is no need to reload the same elements from the server.

SPA is highly decoupled between client-side and server, and the codes for both ends can be kept separately. SPA interacts with the server only through the web service (or web API) built by server-side developers to fetch and display data. On the other hand, MPA has a tight coupling of front-end and back-end. It is usually one big project, which will house all the codes together. The codes in MPA for both ends are often inter-dependent. SPA also simplifies mobile development as we can reuse the same backend for web application and native mobile application, while MPA usually requires separate code base for mobile application.

SPA is a good fit for web application development. However, building single-page applications is a complicated task. It can be challenge to integrate server-side and client-side code well or even just to choose a productive project setup in the first place. This means that SPA usually requires more development effort to build than MPA does.

The major disadvantage of SPA is search engine optimization (SEO). This is because SPA operates on JavaScript and downloads data on request from the client side. The URL does not really change and different pages do not have their unique URL addresses. It is hard to optimize these websites for search engine since most pages cannot be scanned by search bots. Only recently Google and Bing started indexing Ajax-based pages by executing JavaScript during crawling, and still many cases are being indexed incorrectly. While developing SPA, you need to handle SEO issues – probably by post-rendering your site in server-side, which creates static HTML snapshots for crawler’s use. This will require a solid investment in a proper infrastructure. The SEO issue will often limit SPA to “dashboard”-like applications.

Another issue with SPA is browser history. SPA does not save visitors’ jumps between states. This means that when visitors click the back button, they would not go back. A browser only takes them to the previous page, not to the previous state in the application. In order to solve this problem, you need to use HTML5 history API, which allows you to access to browser navigation history via JavaScript.

Technical Stack for Modern MPA

In real world, a modern and complicated web site is often built with a hybrid approach – the simplest being host one or more mini-SPA-like applications within a larger multiple-page web application.

The technical stack is a set of tools and frameworks that are used in development of a software product. In web development for modern MPAs, the technical stack consists of a very specific set of components that work together to create a functioning web application. Technical stack for web applications can be divided into two groups according to the aspects it concerns: backend and frontend.

The technical stack for backend or server-side consists of operating system, web server, database, and programming logic. Here are some of commonly used platforms:

• LAMP – Linux, Apache, MySQL, PHP/Perl/Python.
• .NET – Windows, IIS, SQL Server, C#/ASP.NET/ASP.NET Core MVC/ASP.NET Core Razor Pages.
• MEAN – Mongo DB, Express.js, AngularJS, Node.js.

In this book, we will choose ASP.NET Core Razor Pages as our backend framework. As we all known, there are two choices in ASP.NET Core web applications: MVC or Razor Pages. ASP.NET MVC is a complex framework that contains many concepts such as Route collection, ViewData, Lambda expression, custom route, Controller Action, etc., all of which tie the Model, View, and Controller. On the other hand, Razor Pages apps are more organized compared to MVC. In Razor Pages, we have a Razor view and a code behind file, similar to that the old ASP.NET WebForms did. Each page is self-contained with its own view and code organized together, resulting in a simpler app. Razor Pages make coding page-focused scenarios easier and more productive.

The front-end or client-side components enable the user’s interaction with the web application. The front-end stack for web applications includes

• Languages – HTML, CSS, JavaScript, TypeScript.
• Package Managements – npm, yarn.
• Bundle, Minify, Task Runners – Gulp, Grunt, WebPack, Browserify, Rullup, etc.
• JavaScript SPA frameworks – Angular, React, Vue, etc.
• HTTP Requests – Ajax, RxJS.

In this book, we will choose TypeScript, npm, WebPack, RxJS, and Angular as our front-end technical stack. The increasing complexity of JavaScript code leads to the definitions of new JavaScript specifications and toolsets to bring JavaScript from the level of a scripting language to that of modern object-oriented languages, such as C++, C#, and Java. TypeScript is a modern JavaScript development language. It is a superset of JavaScript, which compiles to JavaScript. TypeScript offers type annotations, which provide optional static type checking, classes, and interfaces. It also offers advanced Intellisence, auto-completion, navigation, and refactoring, which makes code easier to read and understand.

Currently, when starting a new web application project, building system setup is among the top priority tasks. We often use task runners, such as Gulp and Grunt, to automate tasks like static code analysis, test cases execution, etc. On the other hand, WebPack is a bundler and it comes in handy when you need to pack multiple assets together into a dependency graph. There is a rising tendency to use WebPack instead of Gulp and Grunt because WebPack can fulfil nearly all tasks that you would perform through a task runner; it comes with minification options and bundle source maps; it can serve as middleware via a custom server, namely webpack-dev-server, which supports both hot and live reloading.

RxJS is a library for reactive programming using observables, which make it easier to compose asynchronous or callback-based code. In practice, asynchronous stream such as timers, events, and promises can be processed much easier using RxJS. Dealing with multiple callbacks in JavaScript can be a daunting affair, especially because in JavaScript it is much harder to track down errors due to the dynamic nature of the language. Fortunately, using RxJS to make Ajax calls is quite straightforward.

Angular is a popular front-end JavaScript framework. Even though it is used for SPA development, we can still take advantage of this framework in building modern multiple-page web applications, i.e., we can use Angular in a non-SPA way via Angular elements. Angular elements are Angular components packaged as custom elements, a web standard for defining new HTML elements in a framework-agnostic way. In other words, whenever we create an Angular element, we actually create a new custom HTML element that can be used on any web page, even if that web page is non-SPA. That way, you can have Angular components displayed on a page that is created by ASP.NET Core. This means that we can embed Angular elements into non-SPA applications, such as ASP.NET Core MVC views or Razor pages, with some Angular magic. Using custom elements is a great way to get started with Angular without having to migrate an entire application to Angular.

When building a web MPA application, we can split it into functional parts, and convert each functional part into its own SPA and use normal browser navigation to navigate between them. These SPAs are typically called mini SPAs as many of them together form a complete multiple-page application. For each mini SPA, we use a simple JavaScript routing system to organize the states of the application and switch between different views by watching changes on the URL. When the document is reloaded or the URL is modified somehow, it will detect that change and render the view that is associated with the new URL.

What this Book Includes

This book and its sample code listings, which are available for download at my website at https://drxudotnet.com, provide you with

• A complete, in-depth instruction to ultra-modern web MPA development with ASP.NET Core Razor Page, and Angular Elements, WebPack, RxJS, and mini SPAs. After reading this book and running the example programs, you will be able to create modern multiple-page applications using the .NET technology and JavaScript framework.
• Ready-to-run example programs that allow you to explore the MPA web programming techniques and understand how a variety of technical stacks work together. You can modify the code examples or add new features to them to form the basis of your own MPA projects. The example code listings provided in this book will be a good start point that you can use directly in your own real-world MPA projects.
• Many classes and components in the sample code listings that you will find useful in your MPA development. These classes and components include Razor Pages basics, Razor Class Library creation, TypeScript and Webpack configurations, infrastructure for building Angular elements, RxJS workflow, and the integration of various parts together to form our final product – a modern MPA project. You can extract these classes and components and plug them into your own web applications.

Is this Book for You?

You do not have to be an experienced web developer or .NET programmer to use this book. I designed this book to be useful to people of all levels of .NET/web programming experience. In fact, I believe that if you have some prior experience with web or .NET development and programming language C++, Java, R, Python, VBA, C#, or JavaScript, you will be able to sit down in front of your computer, start up Microsoft Visual Studio, follow the examples provided in this book, and quickly become proficient with modern web application development. For those of you who are already experienced web developer or .NET programmers, I believe this book has much to offer as well. A great deal of the information in this book about .NET/web programming is not available in other tutorial and reference books. In addition, you can use most of the example programs in this book directly in your own real-world application development. This book will provide you with a level of detail, explanation, instruction, and sample program code that will enable you to do just about anything related to modern MPA development using ASP.NET Core, Angular Elements, and other technical stacks.

Perhaps you are a scientist, an engineer, a mathematician, or a student, rather than a professional web developer or .NET programmer; nevertheless, this book is still a good bet for you. In fact, my own background is in theoretical physics, a field involving extensive physical modeling, numerical calculations, and graphical representations of calculated data. I devoted my effort to this field for many years, starting from undergraduate up to PhD. My first computer experience was with FORTRAN. Later on, I had programming experience with Basic, C, C++, R, Python, JavaScript, and Matlab. I always tried to find an ideal development tool that would allow me not only to generate data easily (computation capability) but also to represent data graphically (graphics and chart power). The .NET Core and Microsoft Visual Studio development environment made it possible to develop distributed web applications. Ever since Microsoft .NET 1.0 came out, I have been in love with the C# language, and able to use this tool successfully to create powerful desktop and web applications.

Web programmers and .NET developers can use the majority of the example programs in this book routinely. Throughout the book, I emphasize the usefulness of web application development to real-world problems. If you follow the instructions presented in this book closely, you will easily be able to develop modern multiple-page web applications with various technical stacks, including Razor Pages, Razor Class Library, TypeScript, WebPack, RxJS, Angular Elements, and mini SPAs. At the same time, I will not spend too much time discussing the programming style, execution speed, and code optimization, because a plethora of books out there already deals with these topics. Most of the example programs you will find in this book omit error handlings, which makes the code easier to understand by focusing only on the key concepts and practical applications.

What Do You Need to Use this Book

You will need no special equipment to make the best use of this book and understand the algorithms. This book will take full advantage of open source frameworks and libraries. To run and modify the sample programs, you will need a computer capable of running either Windows 7, 8, or 10. The server-side software installed on your computer should include Visual Studio 2019 (Community version is fine), the .NET Core 3.0 SDK or higher, and SQL Server Express 2016 or higher. For the front end, you need to install Node.js version 12.4 or later, Angular 7 or later, and Angular 7 CLI or later.

If you have .NET Core 2.2 or 2.1 SDK, SQL Server Express 2014 or older versions, and Angular 6 or older version, you can also run most of the sample code with few modifications. Please remember, however, that this book is intended for .NET Core 3.0, SQL Server Express 2016, and Angular 7 and that all of the example programs were created and tested on this platform, so it is best to run the sample code on the same platform.

How the Book Is Organized

This book is organized into thirteen chapters, each of which covers a different topic about modern multiple-page web application using .NET Core Razor Pages and Angular Elements. The following summaries of each chapter should give you an overview of the book’s content:

Chapter 1, Introduction to ASP.NET Core Razor Pages
This chapter provides an overview of ASP.NET Core Razor Pages, which explains how to set up the tools and development environment required for building the back-end framework using Razor Pages. It also illustrate how to create Razor Page applications using examples.

Chapter 2, TypeScript and WebPack
This chapter provides a quick review of TypeScript and WebPack, which shows how to set up tools, packages, and development environment for TypeScript and WebPack to work in an ASP.NET Core Razor Page project.

Chapter 3, RxJS Basics
This chapter provides an introduction to RxJS that is a library for transforming, composing, and querying streams of data. We use various example to explains how RxJS allows you to work with asynchronous data streams with ease and how it allows to state what your code should do, without having to code every step to do it. This results in a more reliable and maintainable approach to building your Web applications.

Chapter 4, Database and Web Services
This chapter introduces the SQL Server and Entity Framework Core, which are built-in features and shipped as part of the core product of Visual Studio 2019. It shows you how to create simple database and how to interact with the data using RxJS via ASP.NET API web service.

Chapter 5, Angular Basics
This chapter provides a quick review of various features available in the Angular framework, including one- and two-way data binding, components, templates, routing, dependency injection, directives, and Inputs/Output decorators.

Chapter 6, Introduction to Angular Elements
This chapter explains the concept of Angular Elements that is a new package in Angular that help you publish Angular components as custom elements. It shows how to create Angular Elements and how to use them in our MPA development environment.

Chapter 7, Web Services in Angular Elements
This chapter introduces the HttpClient module and explains how to use it in Angular Elements to interact with the ASP.NET Core Web API and perform CRUD operations on database.

Chapter 8, Charts and Graphics
Data visualization plays a critical role in a modern web application. This chapter shows you how to use a client chart library called ECharts to create various charts and display the data from database via Angular Elements.

Chapter 9, Real-Time Apps with SignalR
This chapter show how to use SignalR to create real-time applications within both the Razor Page and Angular Elements using various examples, including a simple real-time chat, real-time whiteboard, streaming, and real-time stock chart.

Chapter 10, Machine Learning
This chapter discusses the advanced analysis techniques: machine learning. Machine-learning technique has become one of the most promising fields in various business applications. This chapter explains how to use Microsoft ML.NET package to solve various machine-learning problems, including binary classification, multiclass classification, regression, and clustering.

Chapter 11, Mini SPAs
This chapter shows how to split a multiple-page application into functional parts and convert each functional part into its own SPA. These SPAs are typically called mini SPAs as many of them together form a complete multiple-page application. It explains how to use a simple vanilla JavaScript router called Navigo to implement mini SPAs within our MPA project.

Chapter 12, Authentication and Authorization
This chapter explains how to add the ASP.NET Core Identity to our existing MPA project and how specific pages can be restricted to users who are registered and logged in to the application.

Chapter 13, Advanced Topics in Razor Pages
This chapter covers some advanced topics in Razor Pages, including the detailed explanation on dependency injection, custom tag helper, and Razor class Library.

Using Code Examples

You may use the code in this book in your own applications and documentation. You do not need to contact the author or the publisher for permission unless you are reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing the example code listings does require permission. Incorporating a significant amount of example code from this book into your applications and documentation also requires permission. Integrating the example code from this book into commercial products is not allowed without written permission of the author.