Cover image for ASP.NET Core 5 and Angular - Fourth Edition

ASP.NET Core 5 and Angular - Fourth Edition

Release Date: 2021/01/01
ISBN: 9781800560338
Topic:
0%
18
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Build robust modern web applications using .NET 5, Entity Framework Core, and Angular 11

Key Features

  • Updated with the latest features and additions in ASP.NET Core 5 and Angular 11
  • Design, build, and deploy a Single Page Application or Progressive Web App
  • Adopt a full stack approach to handle data management, Web APIs, application design, testing, SEO, security, and deployment

Book Description

Learning full-stack development calls for knowledge of both front-end and back-end web development. ASP.NET Core 5 and Angular, Fourth Edition will enhance your ability to create, debug, and deploy efficient web applications using ASP.NET Core and Angular. This revised edition includes coverage of the Angular routing module, expanded discussion on the Angular CLI, and detailed instructions for deploying apps on Azure, as well as both Windows and Linux.

Taking care to explain and challenge design choices made throughout the text, Valerio teaches you how to build 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 5) and Jasmine, as well as Karma for Angular. After adding authentication and authorization to your apps, you will explore progressive web applications (PWAs), learning about their technical requirements, testing, and converting SWAs to PWAs.

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

  • Implement a web API interface with ASP.NET Core and consume it with Angular using RxJS observables
  • Set up an SQL database server using a local instance or a cloud data store
  • Perform C# and TypeScript debugging using Visual Studio 2019
  • Create TDD and BDD unit tests using xUnit, Jasmine, and Karma
  • Perform DBMS structured logging using third-party providers such as SeriLog
  • Deploy web apps to Windows and Linux web servers, or Azure App Service, using IIS, Kestrel, and nginx

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. Getting Ready
    1. Technical requirements
    2. Two players, one goal
    3. The ASP.NET Core revolution
    4. ASP.NET Core 1.x
    5. ASP.NET Core 2.x
    6. ASP.NET Core 3.x
    7. .NET 5
    8. What's new in Angular?
    9. GetAngular
    10. AngularJS
    11. Angular 2
    12. Angular 4
    13. Angular 5
    14. Angular 6
    15. Angular 7
    16. Angular 8
    17. Angular 9
    18. Angular 10
    19. Angular 11
    20. Reasons for choosing .NET and Angular
    21. A full-stack approach
    22. MPAs, SPAs, PWAs, and NWAs
    23. Multi-page applications
    24. Single-page applications
    25. Progressive web applications
    26. Native web applications
    27. Product owner expectations
    28. A sample SPA project
    29. Not your usual Hello World!
    30. Preparing the workspace
    31. Disclaimer – do (not) try this at home
    32. The broken code myth
    33. Stay hungry, stay foolish, yet be responsible as well
    34. Setting up the project
    35. Installing the .NET 5 SDK
    36. Checking the SDK version
    37. Creating the .NET and Angular project
    38. Opening the new project in Visual Studio
    39. Performing a test run
    40. Summary
    41. Suggested topics
    42. References
  3. Looking Around
    1. Technical requirements
    2. Solution overview
    3. The ASP.NET back-end
    4. Razor Pages
    5. Advantages of using Razor Pages
    6. Controllers
    7. Advantages of using Controllers
    8. WeatherForecastController
    9. Configuration files
    10. Program.cs
    11. Startup.cs
    12. appsettings.json
    13. The Angular front-end
    14. Workspace
    15. angular.json
    16. package.json
    17. tsconfig.json
    18. Other workspace-level files
    19. The /ClientApp/src/ folder
    20. The /app/ folder
    21. Testing the app
    22. HomeComponent
    23. NavMenuComponent
    24. CounterComponent
    25. Our first app test
    26. Creating a new app with the Angular CLI
    27. Installing the Angular CLI
    28. Creating a new Angular app
    29. Comparing the Angular apps
    30. Updating the Startup.cs file
    31. Testing the NG Angular app
    32. Getting to work
    33. Static file caching
    34. How the HTTP cache works
    35. Improving our caching strategy
    36. Client app cleanup
    37. Trimming down the component list
    38. The AppModule source code
    39. Adding the AppRoutingModule
    40. Updating the NavMenu
    41. Summary
    42. Suggested topics
    43. References
  4. Front-End and Back-End Interactions
    1. Technical requirements
    2. Introducing ASP.NET Core health checks
    3. Adding the HealthChecks middleware
    4. Adding an Internet Control Message Protocol (ICMP) check
    5. Possible outcomes
    6. Creating an ICMPHealthCheck class
    7. Adding the ICMPHealthCheck to the pipeline
    8. Improving the ICMPHealthCheck class
    9. Adding parameters and response messages
    10. Updating the middleware setup
    11. Implementing a custom output message
    12. Configuring the output message
    13. Health checks in Angular
    14. Creating the Angular component
    15. Creating components using the Angular CLI
    16. health-check.component.ts
    17. health-check.component.html
    18. health-check.component.css
    19. Adding the component to the Angular app
    20. AppModule
    21. AppRoutingModule
    22. NavMenuComponent
    23. Testing it out
    24. Summary
    25. Suggested topics
    26. References
  5. Data Model with Entity Framework Core
    1. Technical requirements
    2. The WorldCities web app
    3. Styling and CSS basics
    4. Reasons to use a data server
    5. The data source
    6. The data model
    7. Introducing Entity Framework Core
    8. Installing Entity Framework Core
    9. The SQL Server Data Provider
    10. DBMS licensing models
    11. What about Linux?
    12. SQL Server alternatives
    13. Data modeling approaches
    14. Code-First
    15. Database-First
    16. Making a choice
    17. Creating the entities
    18. Defining the entities
    19. The City entity
    20. The Country entity
    21. Defining relationships
    22. Adding the Country property to the City entity class
    23. Adding the Cities property to the Country entity class
    24. Defining the database table names
    25. Getting a SQL Server instance
    26. Installing SQL Server 2019
    27. Creating a SQL Database on Azure
    28. Setting up a SQL Database
    29. Configuring the instance
    30. Configuring the database
    31. Creating the WorldCities database
    32. Adding the WorldCities login
    33. Mapping the login to the database
    34. Creating the database using Code-First
    35. Setting up the DbContext
    36. Entity type configuration methods
    37. Data Annotations
    38. Fluent API
    39. EntityTypeConfiguration classes
    40. Making a choice
    41. Database initialization strategies
    42. Updating the appsettings.json file
    43. Securing the connection string
    44. Introducing Secrets Storage
    45. Adding the secrets.json file
    46. Working with the secrets.json file
    47. Creating the database
    48. Updating Startup.cs
    49. Adding the initial migration
    50. Using the dotnet CLI
    51. Using the Package Manager Console
    52. Understanding migrations
    53. Populating the database
    54. Implementing SeedController
    55. Importing the Excel file
    56. Entity controllers
    57. CitiesController
    58. CountriesController
    59. Testing it out
    60. Summary
    61. Suggested topics
    62. References
  6. Fetching and Displaying Data
    1. Technical requirements
    2. Fetching data
    3. Requests and responses
    4. JSON conventions and defaults
    5. A (very) long list
    6. city.ts
    7. cities.component.ts
    8. cities.component.html
    9. cities.component.css
    10. app.module.ts
    11. app-routing.module.ts
    12. nav-menu-component.html
    13. Serving data with Angular Material
    14. MatTableModule
    15. Adding pagination with MatPaginatorModule
    16. Client-side paging
    17. Server-side paging
    18. Adding sorting with MatSortModule
    19. Extending ApiResult
    20. Installing System.Linq.Dynamic.Core
    21. Updating CitiesController
    22. Updating the Angular app
    23. Adding filtering
    24. Extending ApiResult (again)
    25. CitiesController
    26. CitiesComponent
    27. CitiesComponent template (HTML) file
    28. CitiesComponent style (CSS) file
    29. AngularMaterialModule
    30. Performance considerations
    31. Adding the countries to the loop
    32. ASP.NET
    33. CountriesController
    34. Angular
    35. country.ts
    36. countries.component.ts
    37. countries.component.html
    38. countries.component.css
    39. AppModule
    40. AppRoutingModule
    41. NavComponent
    42. Testing CountriesComponent
    43. Summary
    44. Suggested topics
    45. ASP.NET
    46. Angular
    47. References
  7. Forms and Data Validation
    1. Technical requirements
    2. Exploring Angular forms
    3. Forms in Angular
    4. Reasons to use forms
    5. Template-Driven Forms
    6. The pros
    7. The cons
    8. Model-Driven/Reactive Forms
    9. Building our first Reactive Form
    10. ReactiveFormsModule
    11. CityEditComponent
    12. city-edit.component.ts
    13. city-edit.component.html
    14. city-edit.component.css
    15. Adding the navigation link
    16. app.module.ts
    17. app-routing.module.ts
    18. cities.component.html
    19. Adding a new city
    20. Extending the CityEditComponent
    21. Adding the "Add a new City" button
    22. Adding a new route
    23. HTML select
    24. Angular Material select (MatSelectModule)
    25. Understanding data validation
    26. Template-driven validation
    27. The Safe Navigation Operator
    28. Model-driven validation
    29. Our first validators
    30. Server-side validation
    31. DupeCityValidator
    32. Introducing the FormBuilder
    33. Creating the CountryEditComponent
    34. country-edit.component.ts
    35. The IsDupeField server-side API
    36. country-edit.component.html
    37. country-edit.component.css
    38. AppModule
    39. AppRoutingModule
    40. countries.component.html
    41. Testing the CountryEditComponent
    42. Improving the filter behavior
    43. Throttling and debouncing
    44. Definitions
    45. Why would we want to throttle or debounce our code?
    46. Debouncing calls to the back-end
    47. Updating the CitiesComponent
    48. Updating the CountriesComponent
    49. What about throttling?
    50. Summary
    51. Suggested topics
    52. References
  8. Code Tweaks and Data Services
    1. Technical requirements
    2. Optimizations and tweaks
    3. Template improvements
    4. Form validation shortcuts
    5. Class inheritance
    6. Implementing a BaseFormComponent
    7. Extending CityEditComponent
    8. Extending CountryEditComponent
    9. Bug fixes and improvements
    10. Validating lat and lon
    11. city-edit.component.ts
    12. city-edit.component.html
    13. Adding the number of cities
    14. CountriesController
    15. Creating the CountryDTO class
    16. Angular front-end updates
    17. DTO classes – should we really use them?
    18. Separation of concerns
    19. Security considerations
    20. DTO classes versus anonymous types
    21. Securing entities
    22. Final thoughts
    23. Adding the country name
    24. CitiesController
    25. Angular front-end updates
    26. Data services
    27. XMLHttpRequest versus Fetch (versus HttpClient)
    28. XMLHttpRequest
    29. Fetch
    30. HttpClient
    31. Building a data service
    32. Creating the BaseService
    33. Adding the common interface methods
    34. Creating the CityService
    35. Implementing the CityService
    36. Creating the CountryService
    37. Summary
    38. Suggested topics
    39. References
  9. Back-End and Front-End Debugging
    1. Technical requirements
    2. Back-end debugging
    3. Windows or Linux?
    4. The basics
    5. Conditional breakpoints
    6. Conditions
    7. Actions
    8. Testing the conditional breakpoint
    9. The Output window
    10. Configuring the Output window
    11. Debugging EF Core
    12. The GetCountries() SQL query
    13. Front-end debugging
    14. Visual Studio JavaScript debugging
    15. JavaScript source maps
    16. Browser developer tools
    17. Angular form debugging
    18. A look at the Form Model
    19. The pipe operator
    20. Reacting to changes
    21. The activity log
    22. Client-side debugging
    23. Unsubscribing the Observables
    24. The unsubscribe() method
    25. The takeUntil() operator
    26. Other viable alternatives
    27. Should we always unsubscribe?
    28. Application logging
    29. Introducing ASP.NET Core logging
    30. DBMS structured logging with Serilog
    31. Installing the NuGet packages
    32. Configuring Serilog
    33. Logging HTTP requests
    34. Accessing the logs
    35. Summary
    36. Suggested topics
    37. References
  10. ASP.NET Core and Angular Unit Testing
    1. Technical requirements
    2. ASP.NET Core unit tests
    3. Creating the WorldCities.Test project
    4. Moq
    5. Microsoft.EntityFramework.InMemory
    6. Adding the WorldCities dependency reference
    7. Our first test
    8. Arrange
    9. Act
    10. Assert
    11. Executing the test
    12. Debugging tests
    13. Test-driven development
    14. Behavior-driven development
    15. Angular unit tests
    16. General concepts
    17. Introducing the TestBed interface
    18. Testing with Jasmine
    19. Our first Angular test suite
    20. The import section
    21. The describe and beforeEach sections
    22. Adding a mock CityService
    23. Implementing the mock CityService
    24. Configuring the fixture and the component
    25. Creating the title test
    26. Creating the cities tests
    27. Running the test suite
    28. Summary
    29. Suggested topics
    30. References
  11. Authentication and Authorization
    1. Technical requirements
    2. To auth, or not to auth
    3. Authentication
    4. Third-party authentication
    5. Authorization
    6. Third-party authorization
    7. Proprietary versus third-party
    8. Proprietary auth with .NET Core
    9. The ASP.NET Core Identity model
    10. Entity types
    11. Setting up ASP.NET Core Identity
    12. Adding the NuGet packages
    13. Creating ApplicationUser
    14. Extending ApplicationDbContext
    15. Adjusting our unit tests
    16. Configuring the ASP.NET Core Identity middleware
    17. Configuring IdentityServer
    18. Revising SeedController
    19. A word on async tasks, awaits, and deadlocks
    20. Updating the database
    21. Adding identity migration
    22. Applying the migration
    23. Updating the existing data model
    24. Dropping and recreating the data model from scratch
    25. Seeding the data
    26. Authentication methods
    27. Sessions
    28. Tokens
    29. Signatures
    30. Two-factor
    31. Conclusions
    32. Implementing authentication in Angular
    33. Creating the AuthSample project
    34. Troubleshooting the AuthSample project
    35. Exploring the Angular authorization APIs
    36. Route Guards
    37. HttpInterceptor
    38. The authorization components
    39. Testing registration and login
    40. Implementing the auth API in the WorldCities app
    41. Importing the front-end authorization APIs
    42. api-authorization.constants
    43. AppModule
    44. AppRoutingModule
    45. NavMenuComponent
    46. Adjusting the back-end code
    47. Installing the ASP.NET Core Identity UI package
    48. Mapping Razor Pages to EndpointMiddleware
    49. Securing the back-end action methods
    50. Testing login and registration
    51. Adding an email sending service
    52. Transactional email API using SendGrid
    53. Create a SendGrid account
    54. Get the Web API key
    55. Install the SendGrid NuGet package
    56. Verify the integration
    57. Implement the IEmailSender interface
    58. Scaffold the Identity pages
    59. Disable link-based account verification
    60. Test the email-based account verification
    61. External SMTP server using MailKit
    62. Install the MailKit NuGet package
    63. Set up the SMTP settings
    64. Implement the IEmailSender interface
    65. Startup class
    66. Summary
    67. Suggested topics
    68. References
  12. Progressive Web Apps
    1. Technical requirements
    2. PWA – distinctive features
    3. Secure origin
    4. Offline loading and Web App Manifest
    5. Service workers versus HttpInterceptors
    6. Introducing @angular/service-worker
    7. The ASP.NET Core PWA middleware alternative
    8. Implementing the PWA requirements
    9. Manual installation
    10. Adding the @angular/service-worker npm package
    11. Updating the angular.json file
    12. Importing ServiceWorkerModule
    13. Updating the index.html file
    14. Adding the Web App Manifest file
    15. Adding the favicon
    16. Adding the ngsw-config.json file
    17. Automatic installation
    18. The Angular PNG icon set
    19. Handling the offline status
    20. Option 1 – the window's ononline/onoffline event
    21. Option 2 – the Navigator.onLine property
    22. Downsides of the JavaScript approaches
    23. Option 3 – the ng-connection-service npm package
    24. Installing ng-connection-service
    25. Updating the app.component.ts file
    26. Removing the isOnline.txt static file from the cache
    27. Installing the ng-connection-service via npm (alternate route)
    28. Updating the app.component.html file
    29. Cross-Origin Resource Sharing
    30. Testing the PWA capabilities
    31. Compiling the app with the Angular CLI
    32. Updating the Startup.cs file
    33. Compiling the app with Visual Studio
    34. Creating a publish profile
    35. Copying the CLI-generated files
    36. Updating the Startup.cs file
    37. Testing out our PWAs
    38. Installing the PWA
    39. Alternative testing methods
    40. Serving our PWA using http-server
    41. Summary
    42. Suggested topics
    43. References
  13. Windows, Linux, and Azure Deployment
    1. Technical requirements
    2. Getting ready for production
    3. ASP.NET Core deployment tips
    4. The launchSettings.json file
    5. Development, staging, and production environments
    6. Rule(s) of thumb
    7. Setting the environment in production
    8. .NET 5 deployment modes
    9. Angular deployment tips
    10. ng serve, ng build, and the package.json file
    11. Differential loading
    12. The angular.json configuration file
    13. Automatic deployment
    14. CORS policy
    15. Windows deployment
    16. Creating a Windows Server VM on MS Azure
    17. Accessing the MS Azure portal
    18. Adding and configuring a new VM
    19. Configuring a DNS name label
    20. Setting the inbound security rules
    21. Configuring the VM
    22. Adding the IIS web server
    23. Installing the ASP.NET Core Windows hosting bundle
    24. Publishing and deploying the HealthCheck app
    25. Folder publish profile
    26. FTP publish profile
    27. Azure Virtual Machine publish profile
    28. Alternative method using the IIS Web Deploy Publishing feature
    29. Configuring IIS
    30. Adding an SSL certificate
    31. Adding a new IIS website entry
    32. Configuring the IIS application pool
    33. Testing the HealthCheck web application
    34. Updating the testing machine's HOSTS files
    35. Testing the app
    36. Linux deployment
    37. Creating a Linux CentOS VM on MS Azure
    38. Add and configure the Linux CentOS VM
    39. Configuring a DNS name label
    40. Setting the inbound security rules
    41. Configuring the Linux VM
    42. Connecting to the VM
    43. Installing the ASP.NET Core runtime
    44. Installing Nginx
    45. Opening the 80 and 443 TCP ports
    46. Adapting the WorldCities app
    47. Adding the forwarded headers middleware
    48. Checking the database connection string
    49. Creating the appsettings.Production.json file
    50. Publishing and deploying the WorldCities app
    51. Creating the /var/www folder
    52. Adding permissions
    53. Copying the WorldCities publish folder
    54. Configuring Kestrel and Nginx
    55. Creating the self-signed SSL certificate
    56. Configuring the Kestrel service
    57. Configuring the Nginx reverse proxy
    58. Testing the WorldCities application
    59. Update the testing machine's HOSTS files
    60. Testing the app
    61. Troubleshooting
    62. Azure App Service deployment
    63. Creating the Web App instance
    64. Publishing the Web App
    65. Summary
    66. Suggested topics
    67. References
  14. Other Books You May Enjoy
  15. Index
18.218.129.100