ASP.NET Core 2 and Angular 5 : full-stack web development with .NET Core and Angular / Valerio De Sanctis.

Format:

Book

Author/Creator:

De Sanctis, Valerio, author.

Language:

English

Subjects (All):

AngularJS (Software framework).

Internet programming.

Physical Description:

1 online resource (1 volume) : illustrations

Edition:

1st edition

Other Title:

ASP.NET Core two and Angular five

Place of Publication:

Birmingham, England ; Mumbai, [India] : Packt, 2017.

System Details:

text file

Summary:

Develop a simple, yet fully-functional modern web application using ASP.NET Core MVC, Entity Framework and Angular 5. About This Book Based on the best-selling book ASP.NET Core and Angular 2 Easily build a complete single page application with two of the most impressive frameworks in modern development, ASP.NET Core and Angular Bring together the capabilities and features of both Angular 5 and ASP.NET Core 2 for full stack development Discover a comprehensive approach to building your next web project-From managing data, to application design, through to SEO optimization and security Who This Book Is For This book is for seasoned ASP.NET developers who already know about ASP.NET Core and Angular in general, but want to know more about them and/or understand how to blend them together to craft a production-ready SPA. What You Will Learn Use ASP.NET Core to its full extent to create a versatile backend layer based on RESTful APIs Consume backend APIs with the brand new Angular 5 HttpClient and use RxJS Observers to feed the frontend UI asynchronously Implement an authentication and authorization layer using ASP.NET Identity to support user login with integrated and third-party OAuth 2 providers Configure a web application in order to accept user-defined data and persist it into the database using server-side APIs Secure your application against threats and vulnerabilities in a time efficient way Connect different aspects of the ASP. NET Core framework ecosystem and make them interact with each other for a Full-Stack web development experience In Detail Become fluent in both frontend and backend web development by combining the impressive capabilities of ASP.NET Core 2 and Angular 5 from project setup right through the deployment phase. Full-stack web development means being able to work on both the frontend and backend portions of an application. The frontend is the part that users will see or interact with, while the backend is the underlying engine, that handles the logical flow: server configuration, data storage and retrieval, database interactions, user authentication, and more. Use the ASP.NET Core MVC framework to implement the backend with API calls and server-side routing. Learn how to put the frontend together using top-notch Angular 5 features such as two-way binding, Observables, and Dependency Injection, build the Data Model with Entity Framework Core, style the frontend with CSS/LESS for a responsive and mobile-friendly UI, handle...

Contents:

Cover

Copyright

Credits

About the Author

About the Reviewers

www.PacktPub.com

Customer Feedback

Table of Contents

Preface

Chapter 1: 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

Chapter 2: Backend with .NET Core

The data flow

The role of ViewModel

Our first ViewModel

QuizViewModel

QuizController

Adding more action methods

ByTitle().

Random()

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

Chapter 3: 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

The QuizComponent class

Adding the Component files

Adding additional lists

Multiple components instances

Testing and debugging

The OnInit interface and lifecycle hooks

Implementing ngOnInit

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

Chapter 4: 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

Testing the Data Provider

Chapter 5: 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

BaseApiController

Implementing BaseApiController

Client-side tasks

Adding the interfaces

QuestionListComponent

Introducing ngOnChanges()

Why bother?

Adding the references

QuestionEditComponent

References and routes

AnswerListComponent

AnswerEditComponent

ResultListComponent

Reference and routes

ResultEditComponent

Full-scale test

Chapter 6: 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

Framework-based approach

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

QuizEditComponent

Question, answer, and result components

Buttons and icons

Tables and DIVs

Forms and inputs

Full-scale layout test

Chapter 7: 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

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

Chapter 8: 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

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

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

Shielding the server

Retrieving the current user ID

Client-server auth test

Chapter 9: Advanced Topics

Token expiration and refresh tokens

What's a refresh token?

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

Updating the TokenResponse interface.

Upgrading AuthService.

Notes:

Includes index.

Description based on online resource; title from PDF title page (EBC, viewed December 23, 2017).

ISBN:

9781788299787

1788299787

OCLC:

1019685192