ASP.NET Core 2 and Angular 5: Full-Stack Web Development with .NET Core and Angu电子书

Title Page

Copyright

ASP.NET Core 2 and Angular 5

Credits

About the Author

About the Reviewers

www.PacktPub.com

Why subscribe?

Customer Feedback

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

Getting Ready

Two players, one goal

The ASP.NET core revolution

What's new in Angular?

A full-stack approach

Single-Page Application

Common features of a competitive SPA

Product Owner expectations

A sample Single-Page Application project

The vision

Not your usual "Hello World!"

Introducing TestMakerFree

Core features and requirements

Preparing the workspace

Disclaimer-Do (not) try this at home

The broken code myth

Stay hungry, stay foolish, yet be responsible as well

Versions and builds

Setting up the project

Alternative setup using the command line

Test run

Looking around

The configuration files

Program.cs

Startup.cs

The appsettings.json file

The package.json file

Upgrading (or downgrading) Angular

Upgrading (or downgrading) the other packages

The tsconfig.json file

The webpack configuration files

Updating the webpack.config.js file

Patching the webpack.config.vendor.js file

Why use a dynamic module bundler?

Refreshing the Webpack-generated files

The server-side code

Controllers/HomeController.cs

Controllers/SampleDataController.cs

The /Views/ folder

The client-side code

The /ClientApp/app/ folder

Getting to work

Static file caching

A blast from the past

Back to the future

Testing it up

The strongly-typed approach(es)

Client app cleanup

Trimming down the component list

The AppModule class(es)

Updating the NavMenu

References

Suggested topics

Summary

Backend with .NET Core

The data flow

The role of ViewModel

Our first ViewModel

QuizViewModel

QuizController

Adding more action methods

ByTitle()

Random()

Testing it up

Adding other controllers

QuestionViewModel

QuestionController

AnswerViewModel

AnswerController

ResultViewModel

ResultController

Understanding routes

Defining routing

Routing through the ages

Handling routes in .NET Core

Three choices to route them all

Adding more routes

The Dummy Data Provider

Dealing with single entries

Suggested topics

Summary

Frontend with Angular

Navigation pattern

Master/detail binding

The Quiz client-side interface

The QuizList component

The new Angular HttpClient

A match against the old standard

How to install it

How to use it

Dependency Injection

Get and subscribe

The onSelect() method

The template file

The Stylesheet file

Adding the component

The AppModule file(s)

The HomeComponent template

Testing it up

The QuizComponent class

Adding the Component files

Adding the component

Testing it up

Adding additional lists

Multiple components instances

Testing and debugging

The OnInit interface and lifecycle hooks

Implementing ngOnInit

Testing it up

Two-way data binding

Disabling two-way data binding

Client-side routing

PathLocationStrategy versus HashLocationStrategy

Refactoring our app

Registering a new Route

Upgrading the QuizComponent

Getting the ID parameter

Adding the HttpClient

Fetching the data

Updating the QuizListComponent

Master/Detail Routing test

Adding new components

AboutComponent

LoginComponent

PageNotFoundComponent

Updating the AppModule

Full-Scale test

Suggested topics

Summary

Data Model with Entity Framework Core

Getting ready

Installing Entity Framework Core

Data Modeling approaches

Model-First

Database-First

Code-First

Pros

Cons

Taking a choice

Creating Entities

ApplicationUser

Quiz

Question

Answer

Result

Defining relationships

The one-to-many EF Lazy-Load pattern

Setting up the DbContext

Database initialization strategies

Choosing the Database Engine

Updating the appsettings.json file

Creating the Database

Updating Startup.cs

Adding the Initial Migration

The "No executable found matching command dotnet-ef" error

Understanding Migrations

Implementing a Data Seed strategy

Creating a DbSeeder class

Adding the DbSeeder to Startup.cs

Seeding the Database

Updating the QuizController

Introducing Mapster

Installation

Basic usage

Updating the QuizController

Testing the Data Provider

Suggested topics

Summary

Client-Server Interactions

Add, update, and delete quizzes

Updating QuizController

Adapting the client

Adding QuizEditComponent

Activating the Edit mode

Event handlers versus router links

Adding the Edit route

Implementing the Delete feature

A word on Observables

First client-server test

The client-server workflow

Questions, answers, and results

Server-side tasks

QuestionController

AnswerController

ResultController

BaseApiController

Implementing BaseApiController

Client-side tasks

Adding the interfaces

QuestionListComponent

Introducing ngOnChanges()

Why bother?

The template file

Adding the references

QuestionEditComponent

References and routes

AnswerListComponent

AnswerEditComponent

The template file

References and routes

ResultListComponent

Reference and routes

ResultEditComponent

Full-scale test

Suggested topics

Summary

Style Sheets and UI Layout

How bad is it, doc?

Introducing LESS

Style sheet languages

CSS

CSS code sample

What is LESS and why use it?

Variables

Import directives

Nested selectors

Mixins

Extend pseudo-class

LESS docs and support

SASS, Stylus, and other alternatives

Implementing LESS

Installing LESS compiler

Compiling LESS files with Webpack

DIY versus framework-based styling

Do-it-yourself approach

Pros

Cons

Framework-based approach

Pros

Cons

Conclusions

Working with Bootstrap

Changing the theme

Rebuild the Webpack vendor config file

Delete the /wwwroot/dist/ folder

Update the .csproj file

Create the update-webpack.bat file

Testing the new theme

Revising the UI structure

AppComponent

NavMenuComponent

QuizSearchComponent

Registering QuizSearchComponent

The logo SVG file

A quick test

Styling the components

CSS encapsulation

Native encapsulation using Shadow DOM

Disable encapsulation

HomeComponent

QuizListComponent

Another UI test

QuizComponent

Testing it up

QuizEditComponent

Question, answer, and result components

Buttons and icons

Tables and DIVs

Forms and inputs

Full-scale layout test

Suggested topics

Summary

Forms and Data Validation

Data validation

Forms in Angular

Template-Driven forms

The pros

The cons

Model-Driven/Reactive forms

Our first Reactive form

Adding ReactiveFormsModule

Updating QuizEditComponent

Adding validators

Adding shortcuts

Upgrading components

QuestionEditComponent

AnswerEditComponent

ResultEditComponent

Debugging and testing

A look at the Form Model

The pipe operator

Reacting to changes

Observing the Observable

Extending the activity log

Client-side debugging

Forms unit testing

Suggested topics

Summary

Authentication and Authorization

To auth, or not to auth

Authentication

Third-party authentication

The rise and fall of OpenID

OpenID Connect

Authorization

Third-party authorization

Proprietary versus third-party

Proprietary auth with .NET Core

Setting up the .NET Core Identity

Configuring the Identity service

Extending the ApplicationUser

Upgrading the DbContext

Revising the DbSeeder

A word on async tasks, awaits, and deadlocks

Updating the database

Adding the identity migration

Applying the migration

Option #1 - update

Option #2 - drop and recreate

Seeding the data

Authentication methods

Sessions

Tokens

Signatures

Two-factor

Conclusions

Implementing JWT authentication

Add the auth service to the .NET Core Startup class

Updating the AppSettings files

The TokenController

Upgrading the BaseApiController

Reflecting the upgrade on the affected controllers

Adding the TokenController

The TokenRequestViewModel

The TokenResponseViewModel

Testing with Postman

Angular login form

The TokenResponse interface

The AuthService class

Updating the AppModule

The new LoginComponent

First login test

Adding the token to the HTTP request header

The AuthInterceptor class

Adding the HttpInterceptor in the AppModule

Enforcing authorization

Adapting the client

NavMenuComponent

QuizComponent

Shielding the server

Retrieving the current user ID

Client-server auth test

Suggested topics

Summary

Advanced Topics

Token expiration and refresh tokens

What's a refresh token?

Server-side tasks

Adding the token entity

Upgrading the user entity

Upgrading ApplicationDbContext

Applying the EF core migration

Implementing the refresh token

Upgrading TokenResponseViewModel

Upgrading TokenRequestViewModel

Upgrading TokenController

Client-side tasks

Updating the TokenResponse interface

Upgrading AuthService

Adding AuthResponseInterceptor

Add the AuthResponseInterceptor in the AppModule

Testing it up

New user registration

Server-side tasks

UserController

UserViewModel

Client-side tasks

The user interface

RegisterComponent

Custom validator

Template and style sheet files

AppModule

LoginComponent

NavMenu

Testing it up

Third-party authentication

OAuth2 authorization flow

Implicit flow versus explicit flow

Implicit flow pros and cons

Explicit flow pros and cons

Conclusions

Logging in with Facebook

Creating the Facebook app

Implicit flow

Updating TokenController

Adding the GenerateRandomPassword() method

Adding LoginFacebookComponent

Understanding zones

Adding the template file

Updating AppModule

Linking LoginFacebookComponent

Testing it up

Explicit flow

Installing the Authentication.Facebook package

Setting up the Facebook Authentication service

Updating the appsettings.json file

Upgrading TokenController

The ExternalLogin method

Adding SignInManager

The ExternalLoginCallback method

The LoginExternalProvider component

Updating AppModule

Linking LoginFacebookComponent

Testing it up

Suggested topics

Summary

Finalization and Deployment

Switching to SQL Server

Installing SQL Server 2017 Express

Installing SQL Server Management Studio

Configuring the database

Changing the authentication mode

Adding the TestMakerFree database

Adding the TestMakerFree login

Mapping the login to the database

Adding a SQL Server connection string

Working with the Connection Strings

Adding production URL to External Providers

Updating the launchSettings.json file

Publishing our native web application

Creating a Publish profile

FTP Publish Profile

Folder Publish Profile

Publishing our web app

Configuring the web server and IIS

Installing the ASP.NET Core module for IIS

Adding the website

Configuring the Application Pool

Firing up the engine

Troubleshooting

Browser output message

The Web.Config file

Event Viewer

ASP.NET Core Module logging

The Kestrel test

Kestrel Test from Visual Studio

Disable server-side rendering

Suggested topics

Summary