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