ASP.NET Core 6 and Angular - Fifth Edition

ASP.NET Core 6 and Angular - Fifth Edition

by Valerio De Sanctis
Released April 2022
Publisher(s): Packt Publishing
ISBN: 9781803239705

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

Design, build and deploy robust web applications using ASP.NET 6, Angular 13, and Entity Framework Core

Key Features

  • The most up-to-date book that covers cutting-edge features released in ASP.NET Core 6 and Angular 13
  • Create a production-ready Single-Page Application (SPA) or Progressive Web Application (PWA)
  • Adopt a full-stack approach to handle data management, API documentation, Web APIs, end-to-end testing, security, and deployment

Book Description

Every full-stack ninja needs the tools to operate on front-end and back-end application development. This web app development book takes a hands-on, project-based approach to provide you with all the tools and techniques that web developers need to create, debug, and deploy efficient web applications using ASP.NET Core and Angular.

The fifth edition has been updated to cover advanced topics such as Minimal APIs, Web APIs with GraphQL, real-time updates with SignalR, and new features in .NET 6 and Angular 13.

You begin by building a data model with Entity Framework Core, alongside utilizing the Entity Core Fluent API and EntityTypeConfiguration class. You'll learn how to fetch and display data and handle user input with Angular reactive forms and front-end and back-end validators for maximum effect.

Later, you will perform advanced debugging and explore the unit testing features provided by xUnit.net (.NET 6) and Jasmine, as well as Karma for Angular. After adding authentication and authorization to your apps, you will explore progressive web applications, learning about their technical requirements, testing processes, and how to convert a standard web application to a PWA.

By the end of this web development book, you will understand how to tie together the front-end and back-end to build and deploy secure and robust web applications.

What you will learn

  • Use the new Visual Studio Standalone TypeScript Angular template
  • Implement and consume a Web API interface with ASP.NET Core
  • Set up an SQL database server using a local instance or a cloud datastore
  • Perform C# and TypeScript debugging using Visual Studio 2022
  • Create TDD and BDD unit tests using xUnit, Jasmine, and Karma
  • Perform DBMS structured logging using providers such as SeriLog
  • Deploy web apps to Azure App Service using IIS, Kestrel, and NGINX
  • Learn to develop fast and flexible Web APIs using GraphQL
  • Add real-time capabilities to Angular apps with ASP.NET Core SignalR

Who this book is for

This book is for experienced ASP.NET developers who already possess some familiarity with ASP.NET Core and Angular and are looking to learn how to use them effectively together.

The fully documented code samples (also available on GitHub) and the step-by-step implementation tutorials make this book easy to follow.

Table of contents

  1. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
    4. Get in touch
  2. Introducing ASP.NET and Angular
    1. Technical requirements
    2. Two players, one goal
    3. The ASP.NET Core revolution
      1. ASP.NET Core 1.x
      2. ASP.NET Core 2.x
      3. ASP.NET Core 3.x
      4. .NET 5
      5. .NET 6
    4. What’s new in Angular?
      1. GetAngular
      2. AngularJS
      3. Angular 2
      4. Angular 4
      5. Angular 5
      6. Angular 6
      7. Angular 7
      8. Angular 8
      9. Angular 9
      10. Angular 10
      11. Angular 11
      12. Angular 12
      13. Angular 13
    5. Reasons for choosing .NET and Angular
    6. Summary
    7. Suggested topics
    8. References
  3. Getting Ready
    1. Technical requirements
    2. A full-stack approach
    3. MPAs, SPAs, PWAs, and NWAs
      1. Multi-page applications
      2. Single-page applications
      3. Progressive web applications
      4. Native web applications
      5. Product owner expectations
    4. An example SPA project
      1. Not your usual Hello World!
    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
      2. Setting up the project(s)
        1. Installing the .NET 6 SDK
        2. Checking the SDK version
        3. Installing Node.js and Angular CLI
        4. Creating the .NET and Angular project
      3. Performing a test run
        1. Troubleshooting
      4. Architecture overview
    6. Summary
    7. Suggested topics
    8. References
  4. Looking Around
    1. Technical requirements
    2. Solution overview
    3. The ASP.NET back-end
      1. Configuration files
        1. Program.cs
        2. appsettings.json
      2. Controllers
        1. WeatherForecastController
      3. Introducing OpenAPI (Swagger)
    4. The Angular front-end
      1. The root files
        1. angular.json
        2. package.json
        3. tsconfig.json
        4. Other workspace-level files
      2. The /src/ folder
        1. The /src/app/ folder
      3. Our first test run
        1. First testing attempt
        2. Second testing attempt
    5. Getting to work
      1. Changing the API endpoints
        1. Implementing the baseUrl property
      2. Refactoring the Angular app
        1. Adding HomeComponent
        2. Adding FetchDataComponent
        3. Adding the navigation menu
        4. Updating the AppComponent
        5. Adding the AppRoutingModule
        6. Finishing touches
        7. Test run
    6. Summary
    7. Suggested topics
    8. References
  5. Front-End and Back-End Interactions
    1. Technical requirements
    2. Introducing ASP.NET Core health checks
      1. Adding the HealthChecks middleware
      2. Adding an Internet Control Message Protocol (ICMP) check
        1. Possible outcomes
        2. Creating an ICMPHealthCheck class
        3. Adding the ICMPHealthCheck
      3. Improving the ICMPHealthCheck class
        1. Adding parameters and response messages
        2. Updating the middleware setup
        3. Implementing a custom output message
        4. Configuring the output message
    3. Health checks in Angular
      1. Creating the Angular component
        1. Health-check.component.ts
        2. health-check.component.html
        3. health-check.component.css
      2. Adding the component to the Angular app
        1. AppRoutingModule
        2. NavMenuComponent
        3. Testing it out
    4. Restyling the UI
      1. Introducing Angular Material
      2. Installing Angular Material
      3. Adding a MatToolbar
        1. Updating the AppModule
        2. Updating the NavMenuComponent HTML template
        3. First test run
      4. Playing with (S)CSS
        1. Introducing Sass
        2. Replacing CSS with Sass
        3. Restyling the tables
    5. Summary
    6. Suggested topics
    7. References
  6. Data Model with Entity Framework Core
    1. Technical requirements
    2. The WorldCities web app
      1. Updating the ASP.NET Core app
      2. Updating the Angular app
        1. Minimal UI restyling
      3. Reasons to use a data server
    3. The data source
    4. The data model
      1. Introducing Entity Framework Core
      2. Installing Entity Framework Core
      3. The SQL Server Data Provider
        1. DBMS licensing models
        2. What about Linux?
        3. SQL Server alternatives
      4. Data modeling approaches
        1. Code-First
        2. Database-First
        3. Making a choice
    5. Creating the entities
      1. Defining the entities
        1. The City entity
        2. The Country entity
        3. Should we (still) use #region blocks?
      2. Defining relationships
        1. Adding the Country property to the City entity class
        2. Adding the Cities property to the Country entity class
      3. Defining the database table names
      4. Defining indexes
    6. Getting a SQL Server instance
      1. Installing SQL Server 2019
      2. Installing the DB Management tool(s)
      3. Creating a SQL Database on Azure
        1. SQL Database
        2. SQL Managed Instance
        3. SQL virtual machine
        4. Making a choice
        5. Setting up a SQL Database
        6. Configuring the instance
      4. Configuring the database
        1. Creating the WorldCities database
        2. Adding the WorldCities login
        3. Mapping the login to the database
    7. Creating the database using Code-First
      1. Setting up the DbContext
      2. Entity type configuration methods
        1. Data Annotations
        2. Fluent API
        3. EntityTypeConfiguration classes
        4. Making a choice
      3. Database initialization strategies
      4. Updating the appsettings.json file
      5. Securing the connection string
        1. Introducing Secrets Storage
        2. Adding the secrets.json file
        3. Working with the secrets.json file
      6. Creating the database
        1. Updating Program.cs
        2. Adding the initial migration
        3. Using the dotnet CLI
        4. Using the Package Manager Console
        5. Checking the autogenerated DB tables
        6. Understanding migrations
    8. Populating the database
      1. Implement SeedController
      2. Import the Excel file
    9. Entity controllers
      1. CitiesController
      2. CountriesController
      3. Should we really use Entities?
      4. Testing it out
    10. Summary
    11. Suggested topics
    12. References
  7. Fetching and Displaying Data
    1. Technical requirements
    2. Fetching data
      1. Requests and responses
        1. JSON conventions and defaults
      2. A (very) long list
        1. city.ts
        2. cities.component.ts
        3. cities.component.html
        4. cities.component.scss
        5. app-routing.module.ts
        6. nav-component.html
    3. Serving data with Angular Material
      1. Adding AngularMaterialModule
      2. Introducing MatTable
        1. Updating AngularMaterialModule
        2. Updating CitiesComponent
      3. Adding pagination with MatPaginatorModule
        1. Client-side paging
        2. Server-side paging
      4. Adding sorting with MatSortModule
        1. Extending ApiResult
        2. Installing System.Linq.Dynamic.Core
        3. Updating CitiesController
        4. Updating the Angular app
      5. Adding filtering
        1. Extending ApiResult (again)
        2. CitiesController
        3. CitiesComponent
        4. CitiesComponent template (HTML) file
        5. CitiesComponent style (SCSS) file
        6. AngularMaterialModule
        7. Performance considerations
    4. Adding countries to the loop
      1. ASP.NET
        1. CountriesController
      2. Angular
        1. country.ts
        2. countries.component.ts
        3. countries.component.html
        4. countries.component.scss
        5. AppModule
        6. AppRoutingModule
        7. NavComponent
        8. Testing CountriesComponent
    5. Summary
    6. Suggested topics
      1. ASP.NET
      2. Angular
    7. References
  8. Forms and Data Validation
    1. Technical requirements
    2. Exploring Angular forms
      1. Forms in Angular
      2. Reasons to use forms
      3. Template-Driven Forms
        1. The pros
        2. The cons
      4. Model-Driven/Reactive Forms
    3. Building our first Reactive Form
      1. ReactiveFormsModule
      2. CityEditComponent
        1. city-edit.component.ts
        2. city-edit.component.html
        3. city-edit.component.scss
      3. Adding the navigation link
        1. app-routing.module.ts
        2. cities.component.html
    4. Adding a new city
      1. Extending the CityEditComponent
      2. Adding the “Add a new City” button
        1. Adding a new route
      3. HTML select
      4. Angular Material select (MatSelectModule)
    5. Understanding data validation
      1. Template-Driven validation
      2. Model-Driven validation
        1. Our first validators
        2. Testing the validators
      3. Server-side validation
        1. DupeCityValidator
    6. Introducing the FormBuilder
      1. Creating the CountryEditComponent
        1. country-edit.component.ts
        2. The IsDupeField server-side API
        3. country-edit.component.html
        4. country-edit.component.scss
        5. AppRoutingModule
        6. CountriesComponent
      2. Testing the CountryEditComponent
    7. Improving the filter behavior
      1. Throttling and debouncing
      2. Definitions
      3. Why would we want to throttle or debounce our code?
      4. Debouncing calls to the back-end
        1. Updating the CitiesComponent
        2. Updating the CountriesComponent
      5. What about throttling?
    8. Summary
    9. Suggested topics
    10. References
  9. Code Tweaks and Data Services
    1. Technical requirements
    2. Optimizations and tweaks
      1. Template improvements
        1. Form validation shortcuts
      2. Class inheritance
        1. Implementing a BaseFormComponent
        2. Extending CountryEditComponent
        3. Extending CityEditComponent
    3. Bug fixes and improvements
      1. Validating lat and lon
        1. city-edit.component.ts
        2. base-form.component.ts
        3. city-edit.component.html
      2. Adding the number of cities
        1. CountriesController
        2. Creating the CountryDTO class
        3. Angular front-end updates
      3. DTO classes – should we really use them?
        1. Separation of concerns
        2. Security considerations
        3. DTO classes versus anonymous types
        4. Securing entities
        5. Final thoughts
      4. Adding the country name
        1. CitiesController
        2. Angular front-end updates
    4. Data services
      1. XMLHttpRequest versus Fetch (versus HttpClient)
        1. XMLHttpRequest
        2. Fetch
        3. HttpClient
      2. Building a data service
        1. Creating the BaseService
        2. Adding the common interface methods
        3. Creating CityService
        4. Implementing CityService
        5. Creating CountryService
    5. Summary
    6. Suggested topics
    7. References
  10. Back-End and Front-End Debugging
    1. Technical requirements
    2. Back-end debugging
      1. Windows or Linux?
      2. The basics
      3. Conditional breakpoints
        1. Conditions
        2. Actions
        3. Testing the conditional breakpoint
      4. The Output window
        1. LogLevel types
        2. Testing the LogLevel
        3. Configuring the Output window
      5. Debugging EF Core
        1. The GetCountries() SQL query
    3. Front-end debugging
      1. Visual Studio JavaScript debugging
        1. JavaScript source maps
      2. Browser developer tools
      3. Angular form debugging
        1. A look at the Form Model
        2. The pipe operator
        3. Reacting to changes
        4. The activity log
      4. Client-side debugging
      5. Unsubscribing the Observables
        1. The unsubscribe() method
        2. The takeUntil() operator
        3. Other viable alternatives
        4. Should we always unsubscribe?
    4. Application logging
      1. Introducing ASP.NET Core logging
      2. DBMS structured logging with Serilog
        1. Installing the NuGet packages
        2. Configuring Serilog
        3. Logging HTTP requests
        4. Accessing the logs
    5. Summary
    6. Suggested topics
    7. References
  11. ASP.NET Core and Angular Unit Testing
    1. Technical requirements
    2. ASP.NET Core unit tests
      1. Creating the WorldCitiesAPI.Tests project
        1. Moq
        2. Microsoft.EntityFrameworkCore.InMemory
        3. Adding the WorldCities dependency reference
      2. Our first test
        1. Arrange
        2. Act
        3. Assert
        4. Executing the test
        5. Debugging tests
      3. Test-driven development
      4. Behavior-driven development
    3. Angular unit tests
      1. General concepts
        1. Introducing the TestBed interface
        2. Testing with Jasmine
      2. Our first Angular test suite
        1. The import section
        2. The describe and beforeEach sections
        3. Adding a mock CityService
        4. Implementing the mock CityService
        5. Configuring the fixture and the component
        6. Creating the title test
        7. Creating the cities tests
        8. Running the test suite
    4. Summary
    5. Suggested topics
    6. References
  12. Authentication and Authorization
    1. Technical requirements
    2. To auth, or not to auth
      1. Authentication
        1. Authentication methods
        2. Third-party authentication
      2. Authorization
        1. Proprietary authorization
        2. Third-party authorization
      3. Proprietary versus third-party
    3. Proprietary auth with .NET Core
      1. The ASP.NET Core Identity model
        1. Entity types
      2. Setting up ASP.NET Core Identity
        1. Adding the NuGet packages
        2. Creating ApplicationUser
        3. Extending ApplicationDbContext
        4. Configuring the ASP.NET Core Identity service
        5. Implementing AccountController
        6. Configuring JwtBearerMiddleware
        7. Updating SeedController
        8. Securing the action methods
        9. A word on async tasks, awaits, and deadlocks
    4. Updating the database
      1. Adding identity migration
      2. Applying the migration
        1. Updating the existing data model
        2. Dropping and recreating the data model from scratch
      3. Seeding the data
    5. Implementing authentication in Angular
      1. Adding the LoginRequest interface
      2. Adding the LoginResult interface
      3. Implementing AuthService
      4. Creating LoginComponent
        1. login.component.ts
        2. login.component.html
        3. login.component.scss
        4. Updating AppRoutingModule
        5. Updating NavMenuComponent
        6. Testing LoginComponent
      5. Adding the authStatus observable
        1. Updating the UI
        2. Testing the observable
      6. HttpInterceptors
        1. Implementing AuthInterceptor
        2. Updating AppModule
        3. Testing HttpInterceptor
      7. Route Guards
        1. Available guards
        2. Implementing AuthGuard
        3. Updating AppRoutingModule
        4. Testing AuthGuard
    6. Finishing touches
    7. Summary
    8. Suggested topics
    9. References
  13. Progressive Web Apps
    1. Technical requirements
    2. PWA distinctive features
      1. Secure origin
      2. Offline loading
        1. Service workers versus HttpInterceptors
      3. Introducing @angular/service-worker
      4. The ASP.NET Core PWA middleware alternative
    3. Implementing the PWA requirements
      1. Manual installation
        1. Adding the @angular/service-worker npm package
        2. Updating the angular.json file
        3. Importing ServiceWorkerModule
        4. Updating the index.html file
        5. Adding the Web App Manifest file
        6. Adding the favicon
        7. Adding the ngsw-config.json file
      2. Automatic installation
        1. The Angular PNG icon set
    4. Handling the offline status
      1. Option 1 – the window’s ononline/onoffline event
      2. Option 2 – the Navigator.onLine property
        1. Downsides of the JavaScript approaches
      3. Option 3 – the angular-connection-service npm package
        1. Installing the service
        2. Updating the AppModule file
        3. Updating the AppComponent
      4. Adding the api/heartbeat endpoint
        1. Introducing Minimal APIs
      5. Cross-Origin Resource Sharing
        1. Implementing CORS
    5. Testing the PWA capabilities
      1. Compiling the app
      2. Installing http-server
      3. Testing out our PWAs
        1. Installing the PWA
    6. Summary
    7. Suggested topics
    8. References
  14. Beyond REST – Web API with GraphQL
    1. Technical requirements
    2. GraphQL versus REST
      1. REST
        1. Guiding constraints
        2. Drawbacks
      2. GraphQL
        1. Advantages over REST
        2. Limitations
    3. Implementing GraphQL
      1. Adding GraphQL to ASP.NET Core
        1. Installing HotChocolate
        2. Testing the GraphQL schema
      2. Adding GraphQL to Angular
        1. Installing Apollo Angular
        2. Refactoring CityService
        3. Refactoring CountryService
    4. Summary
    5. Suggested topics
    6. References
  15. Real-Time Updates with SignalR
    1. Technical requirements
    2. Real-time HTTP and Server Push
      1. Introducing SignalR
        1. Hubs
        2. Protocols
        3. Connections, Users, and Groups
    3. Implementing SignalR
      1. Setting up SignalR in ASP.NET Core
        1. Creating the HealthCheckHub
        2. Setting up services and middleware
        3. Adding the Broadcast Message
      2. Installing SignalR in Angular
        1. Adding the npm package
        2. Implementing the HealthCheckService
        3. Refactoring the HealthCheckComponent
    4. Testing it all
    5. Client-initiated Events
      1. Updating the HealthCheckHub
      2. Updating the HealthCheckService
      3. Updating the HealthCheckComponent
      4. Testing the new feature
    6. Summary
    7. Suggested topics
    8. References
  16. Windows, Linux, and Azure Deployment
    1. Technical requirements
    2. Getting ready for production
      1. Configuring the endpoints
        1. Tweaking the HOSTS file
        2. Other viable alternatives
      2. ASP.NET Core deployment tips
        1. The launchSettings.json file
        2. Runtime environments
        3. .NET deployment modes
      3. Angular deployment tips
        1. ng serve, ng build, and the package.json file
        2. Differential loading
        3. The angular.json configuration file(s)
        4. Updating the environment.prod.ts file(s)
        5. Automatic deployment
    3. Windows deployment
      1. Creating a Windows Server VM on MS Azure
        1. Accessing the MS Azure portal
        2. Adding a new Windows VM
        3. Configuring a DNS name label
        4. Setting the inbound security rules
      2. Configuring the Windows VM
        1. Adding the IIS web server
        2. Installing the ASP.NET Core Windows hosting bundle
      3. Publishing HealthCheck and HealthCheckAPI
        1. Introducing Visual Studio publish profiles
        2. Folder publish profile
        3. FTP publish profile
        4. Azure Virtual Machine publish profile
      4. Configuring IIS
        1. Adding the HealthCheck website entry
        2. Adding the HealthCheckAPI website entry
        3. A note on TLS/SSL certificates
        4. Configuring the IIS application pool
        5. Adding the .webmanifest MIME Type
      5. Testing HealthCheck and HealthCheckAPI
        1. Testing the app
    4. Linux deployment
      1. Creating a Linux CentOS VM on MS Azure
        1. Adding a new Linux VM
        2. Configuring a DNS name label
        3. Setting the inbound security rules
      2. Configuring the Linux VM
        1. Connecting to the VM
        2. Installing the ASP.NET Core runtime
        3. Installing Nginx
        4. Opening the 80 and 443 TCP ports
      3. Publishing WorldCities and WorldCitiesAPI
        1. Building the Angular app
        2. Building the WorldCitiesAPI app
        3. Deploying the files to the Linux VM
        4. Configuring Kestrel and Nginx
      4. Testing WorldCities and WorldCitiesAPI
        1. Testing the app
        2. Troubleshooting
    5. Azure App Service deployment
      1. Creating the App Service instances
        1. Adding the HealthCheck App Service
        2. Adding the HealthCheckAPI App Service
      2. Adapting our apps for App Service
      3. Publishing our apps to App Service
        1. Publishing the Angular app
        2. Publishing the ASP.NET Core project
      4. Testing HealthCheck and HealthCheckAPI
    6. Summary
    7. Suggested topics
    8. References
  17. Other Books You May Enjoy
  18. Index

Product information

  • Title: ASP.NET Core 6 and Angular - Fifth Edition
  • Author(s): Valerio De Sanctis
  • Release date: April 2022
  • Publisher(s): Packt Publishing
  • ISBN: 9781803239705