ASP.NET Core 8 and Angular - Sixth Edition

ASP.NET Core 8 and Angular - Sixth Edition

by Valerio De Sanctis
Released February 2024
Publisher(s): Packt Publishing
ISBN: 9781805129936

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

Build robust, scalable web applications using ASP.NET Core 8, Angular, and Entity Framework Core Purchase of the print or Kindle book includes a free PDF eBook

Key Features

  • Combine ASP.NET Core and Angular to build highly versatile web applications
  • 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

If you want to learn how to use ASP.NET Core with Angular effectively, this hands-on guide is for you.

Improve the way you create, debug, and deploy web applications while keeping up to date with the latest developments in .NET 8 and modern Angular, including .NET Minimal APIs and the new Angular standalone API defaults.

You’ll begin by setting up SQL Server 2022 and building a data model with Entity Framework Core. You’ll progress to fetching and displaying data, handling user input with Angular reactive forms, and implementing front-end and back-end validators for maximum effect. After that, you will perform advanced debugging and explore unit testing features with xUnit for .NET, and Jasmine and Karma for Angular. You’ll use Identity API endpoints in ASP.NET Core and functional route guards in Angular to add authentication and authorization to your apps. Finally, you’ll learn how to deploy to Windows, Linux, and Azure.

By the end of this 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

  • Explore the new Angular and ASP.NET Core template with Visual Studio 2022
  • Use modern interfaces and patterns such as the HTML5 pushState API, webhooks, and UI data bindings
  • Add real-time capabilities to Angular apps with SignalR and gRPC
  • Implement authentication and authorization using JWTs
  • Perform DBMS structured logging using providers such as SeriLog
  • Convert a standard web application to a progressive web application (PWA)
  • Deploy an Angular app to Azure Static Web Apps
  • Add GraphQL support to back-end and front-end using HotChocolate and Apollo Angular

Who this book is for

This book is for developers who have some familiarity with ASP.NET Core and Angular and want to learn how to use them effectively together.

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
      6. .NET 7
      7. .NET 8
    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
      14. Angular 14
      15. Angular 15
      16. Angular 16
      17. Angular 17
    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 8 SDK
        2. Checking the SDK version
        3. Installing Node.js and the Angular CLI
        4. Creating the Angular and ASP.NET Core 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
    5. Getting to work
      1. Changing the API endpoints
        1. Implementing a baseUrl property
      2. Refactoring the Angular app
        1. Adding HomeComponent
        2. Adding FetchDataComponent
        3. Adding the navigation menu
        4. Updating the AppComponent
        5. Updating 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 HealthCheck 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 2022
      2. Installing the database 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 database 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. Backend 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. Frontend 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. Database Management System (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 WorldCities.Server.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 ASP.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. Identity API endpoints
      1. Activating the Identity API endpoints
      2. Testing the endpoints
      3. Should we use the Identity API endpoints?
    8. Summary
    9. Suggested topics
    10. 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
    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 events
      2. Option 2 – the navigator.onLine property
        1. Downsides of the JavaScript approaches
      3. Option 3 – the ng-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. Adding WebSocket support to Angular proxy
        4. 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.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.client and HealthCheck.Server
        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.client website entry
        2. Adding the HealthCheck.Server website entry
        3. A note on TLS/SSL certificates
        4. Configuring the IIS application pool
        5. Adding the .webmanifest MIME type
      5. Testing healthcheck.client and HealthCheck.Server
        1. Testing the app
    4. Linux deployment
      1. Creating a Linux 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.client and WorldCities.Server
        1. Building the Angular app
        2. Building the WorldCities.Server app
        3. Deploying the files to the Linux VM
        4. Configuring Kestrel and Nginx
      4. Testing WorldCities and WorldCities.Server
        1. Testing the app
        2. Troubleshooting
    5. Azure App Service deployment
      1. Creating the App Service instances
        1. Adding the healthcheck.client Static Web App
        2. Adding the HealthCheck.Server Web App
      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.client and HealthCheck.Server
    6. Summary
    7. Suggested topics
    8. References
  17. Other Books You May Enjoy
  18. Index

Product information

  • Title: ASP.NET Core 8 and Angular - Sixth Edition
  • Author(s): Valerio De Sanctis
  • Release date: February 2024
  • Publisher(s): Packt Publishing
  • ISBN: 9781805129936