Asp.net Core 5 and Angular (2021) Ebook Gliwice

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