Book Image

ASP.NET Core 2 and Angular 5

By : Valerio De Sanctis
Book Image

ASP.NET Core 2 and Angular 5

By: Valerio De Sanctis

Overview of this book

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 user input with Forms and Validators, explore different authentication techniques, including the support for third-party OAuth2 providers such as Facebook, and deploy the application using Windows Server, SQL Server, and the IIS/Kestrel reverse proxy.

Related Content you might be interested in

Current Title:

Small book image
ASP.NET Core 2 and Angular 5
Valerio De Sanctis
Nov, 2017 | 550 pages
No titles found
Table of Contents (17 chapters)
Title Page
Title Page
Credits
Credits
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Customer Feedback
Customer Feedback
Preface
Preface
Free Chapter
1
Getting Ready
Getting Ready
Two players, one goal
A full-stack approach
Single-Page Application
A sample Single-Page Application project
Preparing the workspace
Looking around
Getting to work
References
Suggested topics
Summary
2
Backend with .NET Core
Backend with .NET Core
The data flow
Our first ViewModel
Adding other controllers
Understanding routes
Dealing with single entries
Suggested topics
Summary
3
Frontend with Angular
Frontend with Angular
Navigation pattern
Master/detail binding
Adding additional lists
Two-way data binding
Client-side routing
Full-Scale test
Suggested topics
Summary
4
Data Model with Entity Framework Core
Data Model with Entity Framework Core
Getting ready
Creating Entities
Defining relationships
Setting up the DbContext
Database initialization strategies
Implementing a Data Seed strategy
Updating the QuizController
Suggested topics
Summary
5
Client-Server Interactions
Client-Server Interactions
Add, update, and delete quizzes
Questions, answers, and results
Full-scale test
Suggested topics
Summary
6
Style Sheets and UI Layout
Style Sheets and UI Layout
How bad is it, doc?
Introducing LESS
Implementing LESS
DIY versus framework-based styling
Working with Bootstrap
Suggested topics
Summary
7
Forms and Data Validation
Forms and Data Validation
Data validation
Debugging and testing
Suggested topics
Summary
8
Authentication and Authorization
Authentication and Authorization
To auth, or not to auth
Proprietary auth with .NET Core
Updating the database
Authentication methods
Implementing JWT authentication
Enforcing authorization
Suggested topics
Summary
9
Advanced Topics
Advanced Topics
Token expiration and refresh tokens
New user registration
Third-party authentication
Suggested topics
Summary
10
Finalization and Deployment
Finalization and Deployment
Switching to SQL Server
Publishing our native web application
Configuring the web server and IIS
Firing up the engine
Suggested topics
Summary

Full-Scale test

It’s almost time to hit F5 and see whether our revised Angular app is still holding its ground. Before we do that, let's quickly open the

/ClientApp/app/components/home/home.component.html file and replace our witty welcome text with something that can define our application better:

<h1>Welcome to TestMakerFree</h1>
<p>A sample SPA project made with .NET Core and Angular.</p>
<quiz-list class="latest"></quiz-list>
<quiz-list class="byTitle"></quiz-list>
<quiz-list class="random"></quiz-list>

If we did everything correctly, we should be greeted with something like this:

This definitely looks like the HomeView we wanted. Let’s check whether the improved Master-Detail navigation pattern is still working by clicking on one of the available quizzes. The HomeView should be replaced by the QuizView, displaying the test detail data:

Still ugly, yet still up and running. Note how the URL in the address bar properly switches from...

Previous Section
End of Section 7
Next Section