Practical Multiple-Page Apps with ASP.NET Core and Angular Elements
ISBN: 9781080437009, Publish Date: 2019
Paperback: $69.99Buy on Amazon
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.
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.
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
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
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.
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
- Package Managements – npm, yarn.
- Bundle, Minify, Task Runners – Gulp, Grunt, WebPack, Browserify, Rullup, etc.
- HTTP Requests – Ajax, RxJS.
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.
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
- 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?
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
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.