ASP.NET Core 2 and Angular 5

ASP.NET Core 2 and Angular 5

by Valerio De Sanctis
Released November 2017
Publisher(s): Packt Publishing
ISBN: 9781788293600

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

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 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.

Style and approach

More than just a technical manual, this guide takes you through the most important technical facets of developing with these two hugely popular frameworks and then demonstrates how to put those skills into practice. It’s a book that recognizes that what’s really important is the end product.

Table of contents

  1. Preface
    1. What this book covers
    2. What you need for this book
    3. Who this book is for
    4. Conventions
    5. Reader feedback
    6. Customer support
      1. Downloading the example code
      2. Errata
      3. Piracy
      4. Questions
  2. Getting Ready
    1. Two players, one goal
      1. The ASP.NET core revolution
      2. What's new in Angular?
    2. A full-stack approach
    3. Single-Page Application
      1. Common features of a competitive SPA
      2. Product Owner expectations
    4. A sample Single-Page Application project
      1. The vision
        1. Not your usual "Hello World!"
        2. Introducing TestMakerFree
      2. Core features and requirements
    5. Preparing the workspace
      1. Disclaimer-Do (not) try this at home
        1. The broken code myth
        2. Stay hungry, stay foolish, yet be responsible as well
        3. Versions and builds
      2. Setting up the project
        1. Alternative setup using the command line
        2. Test run
    6. Looking around
      1. The configuration files
        1. Program.cs
        2. Startup.cs
        3. The appsettings.json file
        4. The package.json file
          1. Upgrading (or downgrading) Angular
          2. Upgrading (or downgrading) the other packages
        5. The tsconfig.json file
        6. The webpack configuration files
          1. Updating the webpack.config.js file
          2. Patching the webpack.config.vendor.js file
          3. Why use a dynamic module bundler?
          4. Refreshing the Webpack-generated files
      2. The server-side code
        1. Controllers/HomeController.cs
        2. Controllers/SampleDataController.cs
        3. The /Views/ folder
      3. The client-side code
        1. The /ClientApp/app/ folder
    7. Getting to work
      1. Static file caching
        1. A blast from the past
        2. Back to the future
        3. Testing it up
          1. The strongly-typed approach(es)
      2. Client app cleanup
        1. Trimming down the component list
        2. The AppModule class(es)
        3. Updating the NavMenu
    8. References
    9. Suggested topics
    10. Summary
  3. Backend with .NET Core
    1. The data flow
      1. The role of ViewModel
    2. Our first ViewModel
      1. QuizViewModel
      2. QuizController
        1. Adding more action methods
          1. ByTitle()
          2. Random()
        2. Testing it up
    3. Adding other controllers
      1. QuestionViewModel
      2. QuestionController
      3. AnswerViewModel
      4. AnswerController
      5. ResultViewModel
      6. ResultController
    4. Understanding routes
      1. Defining routing
        1. Routing through the ages
        2. Handling routes in .NET Core
          1. Three choices to route them all
      2. Adding more routes
        1. The Dummy Data Provider
    5. Dealing with single entries
    6. Suggested topics
    7. Summary
  4. Frontend with Angular
    1. Navigation pattern
    2. Master/detail binding
      1. The Quiz client-side interface
      2. The QuizList component
        1. The new Angular HttpClient
          1. A match against the old standard
          2. How to install it
          3. How to use it
          4. Dependency Injection
          5. Get and subscribe
        2. The onSelect() method
        3. The template file
        4. The Stylesheet file
        5. Adding the component
          1. The AppModule file(s)
          2. The HomeComponent template
        6. Testing it up
      3. The QuizComponent class
        1. Adding the Component files
        2. Adding the component
        3. Testing it up
    3. Adding additional lists
      1. Multiple components instances
        1. Testing and debugging
        2. The OnInit interface and lifecycle hooks
        3. Implementing ngOnInit
        4. Testing it up
    4. Two-way data binding
      1. Disabling two-way data binding
    5. Client-side routing
      1. PathLocationStrategy versus HashLocationStrategy
      2. Refactoring our app
      3. Registering a new Route
        1. Upgrading the QuizComponent
          1. Getting the ID parameter
          2. Adding the HttpClient
          3. Fetching the data
        2. Updating the QuizListComponent
        3. Master/Detail Routing test
      4. Adding new components
        1. AboutComponent
        2. LoginComponent
        3. PageNotFoundComponent
        4. Updating the AppModule
    6. Full-Scale test
    7. Suggested topics
    8. Summary
  5. Data Model with Entity Framework Core
    1. Getting ready
      1. Installing Entity Framework Core
      2. Data Modeling approaches
        1. Model-First
        2. Database-First
        3. Code-First
          1. Pros
          2. Cons
        4. Taking a choice
    2. Creating Entities
      1. ApplicationUser
      2. Quiz
      3. Question
      4. Answer
      5. Result
    3. Defining relationships
      1. The one-to-many EF Lazy-Load pattern
    4. Setting up the DbContext
    5. Database initialization strategies
      1. Choosing the Database Engine
      2. Updating the appsettings.json file
      3. Creating the Database
        1. Updating Startup.cs
      4. Adding the Initial Migration
        1. The "No executable found matching command dotnet-ef" error
        2. Understanding Migrations
    6. Implementing a Data Seed strategy
      1. Creating a DbSeeder class
      2. Adding the DbSeeder to Startup.cs
      3. Seeding the Database
    7. Updating the QuizController
      1. Introducing Mapster
        1. Installation
        2. Basic usage
        3. Updating the QuizController
      2. Testing the Data Provider
    8. Suggested topics
    9. Summary
  6. Client-Server Interactions
    1. Add, update, and delete quizzes
      1. Updating QuizController
      2. Adapting the client
        1. Adding QuizEditComponent
        2. Activating the Edit mode
          1. Event handlers versus router links
          2. Adding the Edit route
        3. Implementing the Delete feature
          1. A word on Observables
      3. First client-server test
        1. The client-server workflow
    2. Questions, answers, and results
      1. Server-side tasks
        1. QuestionController
        2. AnswerController
        3. ResultController
        4. BaseApiController
          1. Implementing BaseApiController
      2. Client-side tasks
        1. Adding the interfaces
        2. QuestionListComponent
          1. Introducing ngOnChanges()
          2. Why bother?
          3. The template file
          4. Adding the references
        3. QuestionEditComponent
          1. References and routes
        4. AnswerListComponent
        5. AnswerEditComponent
          1. The template file
          2. References and routes
        6. ResultListComponent
          1. Reference and routes
        7. ResultEditComponent
    3. Full-scale test
    4. Suggested topics
    5. Summary
  7. Style Sheets and UI Layout
    1. How bad is it, doc?
    2. Introducing LESS
      1. Style sheet languages
      2. CSS
        1. CSS code sample
      3. What is LESS and why use it?
        1. Variables
        2. Import directives
        3. Nested selectors
        4. Mixins
        5. Extend pseudo-class
      4. LESS docs and support
      5. SASS, Stylus, and other alternatives
    3. Implementing LESS
      1. Installing LESS compiler
      2. Compiling LESS files with Webpack
    4. DIY versus framework-based styling
      1. Do-it-yourself approach
        1. Pros
        2. Cons
      2. Framework-based approach
        1. Pros
        2. Cons
      3. Conclusions
    5. Working with Bootstrap
      1. Changing the theme
        1. Rebuild the Webpack vendor config file
          1. Delete the /wwwroot/dist/ folder
          2. Update the .csproj file
          3. Create the update-webpack.bat file
        2. Testing the new theme
      2. Revising the UI structure
        1. AppComponent
        2. NavMenuComponent
        3. QuizSearchComponent
          1. Registering QuizSearchComponent
        4. The logo SVG file
        5. A quick test
      3. Styling the components
        1. CSS encapsulation
          1. Native encapsulation using Shadow DOM
          2. Disable encapsulation
        2. HomeComponent
        3. QuizListComponent
          1. Another UI test
        4. QuizComponent
          1. Testing it up
        5. QuizEditComponent
        6. Question, answer, and result components
          1. Buttons and icons
          2. Tables and DIVs
          3. Forms and inputs
      4. Full-scale layout test
    6. Suggested topics
    7. Summary
  8. Forms and Data Validation
    1. Data validation
      1. Forms in Angular
        1. Template-Driven forms
          1. The pros
          2. The cons
        2. Model-Driven/Reactive forms
      2. Our first Reactive form
        1. Adding ReactiveFormsModule
        2. Updating QuizEditComponent
        3. Adding validators
          1. Adding shortcuts
      3. Upgrading components
        1. QuestionEditComponent
        2. AnswerEditComponent
        3. ResultEditComponent
    2. Debugging and testing
      1. A look at the Form Model
        1. The pipe operator
      2. Reacting to changes
        1. Observing the Observable
        2. Extending the activity log
      3. Client-side debugging
      4. Forms unit testing
    3. Suggested topics
    4. Summary
  9. Authentication and Authorization
    1. To auth, or not to auth
      1. Authentication
        1. Third-party authentication
          1. The rise and fall of OpenID
          2. OpenID Connect
      2. Authorization
        1. Third-party authorization
      3. Proprietary versus third-party
    2. Proprietary auth with .NET Core
      1. Setting up the .NET Core Identity
        1. Configuring the Identity service
        2. Extending the ApplicationUser
        3. Upgrading the DbContext
        4. Revising the DbSeeder
          1. A word on async tasks, awaits, and deadlocks
    3. Updating the database
      1. Adding the identity migration
      2. Applying the migration
        1. Option #1 - update
        2. Option #2 - drop and recreate
      3. Seeding the data
    4. Authentication methods
      1. Sessions
      2. Tokens
      3. Signatures
      4. Two-factor
      5. Conclusions
    5. Implementing JWT authentication
      1. Add the auth service to the .NET Core Startup class
      2. Updating the AppSettings files
      3. The TokenController
        1. Upgrading the BaseApiController
          1. Reflecting the upgrade on the affected controllers
        2. Adding the TokenController
        3. The TokenRequestViewModel
        4. The TokenResponseViewModel
        5. Testing with Postman
      4. Angular login form
        1. The TokenResponse interface
        2. The AuthService class
          1. Updating the AppModule
        3. The new LoginComponent
          1. First login test
        4. Adding the token to the HTTP request header
          1. The AuthInterceptor class
          2. Adding the HttpInterceptor in the AppModule
    6. Enforcing authorization
      1. Adapting the client
        1. NavMenuComponent
        2. QuizComponent
      2. Shielding the server
        1. Retrieving the current user ID
      3. Client-server auth test
    7. Suggested topics
    8. Summary
  10. Advanced Topics
    1. Token expiration and refresh tokens
      1. What's a refresh token?
      2. Server-side tasks
        1. Adding the token entity
          1. Upgrading the user entity
          2. Upgrading ApplicationDbContext
          3. Applying the EF core migration
        2. Implementing the refresh token
          1. Upgrading TokenResponseViewModel
          2. Upgrading TokenRequestViewModel
          3. Upgrading TokenController
      3. Client-side tasks
        1. Updating the TokenResponse interface
        2. Upgrading AuthService
        3. Adding AuthResponseInterceptor
          1. Add the AuthResponseInterceptor in the AppModule
      4. Testing it up
    2. New user registration
      1. Server-side tasks
        1. UserController
        2. UserViewModel
      2. Client-side tasks
        1. The user interface
        2. RegisterComponent
          1. Custom validator
          2. Template and style sheet files
        3. AppModule
        4. LoginComponent
        5. NavMenu
      3. Testing it up
    3. Third-party authentication
      1. OAuth2 authorization flow
        1. Implicit flow versus explicit flow
          1. Implicit flow pros and cons
          2. Explicit flow pros and cons
        2. Conclusions
      2. Logging in with Facebook
        1. Creating the Facebook app
      3. Implicit flow
        1. Updating TokenController
          1. Adding the GenerateRandomPassword() method
        2. Adding LoginFacebookComponent
          1. Understanding zones
          2. Adding the template file
          3. Updating AppModule
          4. Linking LoginFacebookComponent
        3. Testing it up
      4. Explicit flow
        1. Installing the Authentication.Facebook package
        2. Setting up the Facebook Authentication service
        3. Updating the appsettings.json file
        4. Upgrading TokenController
          1. The ExternalLogin method
          2. Adding SignInManager
          3. The ExternalLoginCallback method
        5. The LoginExternalProvider component
          1. Updating AppModule
          2. Linking LoginFacebookComponent
          3. Testing it up
    4. Suggested topics
    5. Summary
  11. Finalization and Deployment
    1. Switching to SQL Server
      1. Installing SQL Server 2017 Express
      2. Installing SQL Server Management Studio
        1. Configuring the database
          1. Changing the authentication mode
          2. Adding the TestMakerFree database
          3. Adding the TestMakerFree login
          4. Mapping the login to the database
      3. Adding a SQL Server connection string
        1. Working with the Connection Strings
      4. Adding production URL to External Providers
      5. Updating the launchSettings.json file
    2. Publishing our native web application
      1. Creating a Publish profile
        1. FTP Publish Profile
        2. Folder Publish Profile
      2. Publishing our web app
    3. Configuring the web server and IIS
      1. Installing the ASP.NET Core module for IIS
      2. Adding the website
      3. Configuring the Application Pool
    4. Firing up the engine
      1. Troubleshooting
        1. Browser output message
          1. The Web.Config file
        2. Event Viewer
        3. ASP.NET Core Module logging
        4. The Kestrel test
          1. Kestrel Test from Visual Studio
        5. Disable server-side rendering
    5. Suggested topics
    6. Summary

Product information

  • Title: ASP.NET Core 2 and Angular 5
  • Author(s): Valerio De Sanctis
  • Release date: November 2017
  • Publisher(s): Packt Publishing
  • ISBN: 9781788293600