De Sanctis V. ASP.NET Core 6 and Angular. Full-stack.5ed 2022
Chapter 1: Introducing ASP.NET and Angular 1
Two players, one goal The ASP NET Core revolution What’s new in Angular? Reasons for choosing NET and AngularChapter 2: Getting Ready
Technical requirements A full-stack approach MPAs, SPAs, PWAs, and NWAs Multi-page applications Single-page applications Progressive web applications Native web applications Product owner expectations An example 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(s) Installing the .NET 6 SDK Checking the SDK version Installing Node.js and Angular CLI Creating the .NET and Angular project Performing a test run Troubleshooting Architecture overviewChapter 3: Looking Around
The ASP NET back-end Configuration files Program.cs appsettings.json Controllers WeatherForecastController Introducing OpenAPI (Swagger) The Angular front-end The root files angular.json package.json tsconfig.json Other workspace-level files The /src/ folder The /src/app/ folder Our first test run First testing attempt Second testing attempt Getting to work Changing the API endpoints Implementing the baseUrl property Refactoring the Angular app Adding HomeComponent Adding FetchDataComponent Adding the navigation menu Updating the AppComponent Adding the AppRoutingModule Finishing touches Test runChapter 4: Front-End and Back-End Interactions
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 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 Health-check.component.ts health-check.component.html health-check.component.css Adding the component to the Angular app AppRoutingModule NavMenuComponent Testing it out Restyling the UI Introducing Angular Material Installing Angular Material Adding a MatToolbar Updating the AppModule Updating the NavMenuComponent HTML template First test run Playing with (S)CSS Introducing Sass Replacing CSS with Sass Restyling the tablesChapter 5: Data Model with Entity Framework Core
The WorldCities web app Updating the ASP.NET Core app Updating the Angular app Minimal UI restyling 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 Should we (still) use #region blocks? 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 Defining indexes Getting a SQL Server instance Installing SQL Server 2019 Installing the DB Management tool(s) Creating a SQL Database on Azure SQL Database SQL Managed Instance SQL virtual machine Making a choice 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 Program.cs Adding the initial migration Using the dotnet CLI Using the Package Manager Console Checking the autogenerated DB tables Understanding migrations Populating the database Implement SeedController Import the Excel file Entity controllers CitiesController CountriesController Should we really use Entities? Testing it outChapter 6: Fetching and Displaying Data
Fetching data Requests and responses JSON conventions and defaults A (very) long list city.ts cities.component.ts cities.component.html cities.component.scss app-routing.module.ts nav-component.html Serving data with Angular Material Adding AngularMaterialModule Introducing MatTable Updating AngularMaterialModule Updating CitiesComponent 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 (SCSS) file AngularMaterialModule Performance considerations Adding countries to the loop ASP.NET CountriesController Angular country.ts countries.component.ts countries.component.html countries.component.scss AppModule AppRoutingModule NavComponent Testing CountriesComponentChapter 7: Forms and Data Validation
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.scss Adding the navigation link 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 Model-Driven validation Our first validators Testing the 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.scss AppRoutingModule CountriesComponent 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?Chapter 8: Code Tweaks and Data Services
Optimizations and tweaks Template improvements Form validation shortcuts Class inheritance Implementing a BaseFormComponent Extending CountryEditComponent Extending CityEditComponent Bug fixes and improvements Validating lat and lon city-edit.component.ts base-form.component.ts city-edit.component.html Adding the number of cities Table of Contentsxiv 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 CityService Implementing CityService Creating CountryServiceChapter 9: Back-End and Front-End Debugging
Back-end debugging Windows or Linux? The basics Conditional breakpoints Conditions Actions Testing the conditional breakpoint The Output window LogLevel types Testing the LogLevel 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 logsChapter 10: ASP.NET Core and Angular Unit Testing
ASP NET Core unit tests Creating the WorldCitiesAPI.Tests project Moq Microsoft.EntityFrameworkCore.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 suiteChapter 11: Authentication and Authorization
To auth, or not to auth Authentication Authentication methods Third-party authentication Authorization Proprietary 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 Configuring the ASP.NET Core Identity service Implementing AccountController Configuring JwtBearerMiddleware Updating SeedController Securing the action methods 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 Implementing authentication in Angular Adding the LoginRequest interface Adding the LoginResult interface Implementing AuthService Creating LoginComponent login.component.ts login.component.html login.component.scss Updating AppRoutingModule Updating NavMenuComponent Testing LoginComponent Adding the authStatus observable Updating the UI Testing the observable HttpInterceptors Implementing AuthInterceptor Updating AppModule Testing HttpInterceptor Route Guards Available guards Implementing AuthGuard Updating AppRoutingModule Testing AuthGuardChapter 12: Progressive Web Apps
PWA distinctive features Secure origin Offline loading 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 angular-connection-service npm package Installing the service Updating the AppModule file Updating the AppComponent Adding the api/heartbeat endpoint Introducing Minimal APIs Cross-Origin Resource Sharing Implementing CORS Testing the PWA capabilities Compiling the app Installing http-server Testing out our PWAs Installing the PWAChapter 13: Beyond REST – Web API with GraphQL
GraphQL versus REST REST Guiding constraints Drawbacks GraphQL Advantages over REST Limitations Implementing GraphQL Adding GraphQL to ASP.NET Core Installing HotChocolate Testing the GraphQL schema Adding GraphQL to Angular Installing Apollo Angular Refactoring CityService Refactoring CountryServiceChapter 14: Real-Time Updates with SignalR
Real-time HTTP and Server Push Introducing SignalR Hubs Protocols Connections, Users, and Groups Implementing SignalR Setting up SignalR in ASP.NET Core Creating the HealthCheckHub Setting up services and middleware Adding the Broadcast Message Installing SignalR in Angular Adding the npm package Implementing the HealthCheckService Refactoring the HealthCheckComponent Testing it all Client-initiated Events Updating the HealthCheckHub Updating the HealthCheckService Updating the HealthCheckComponent Testing the new featureChapter 15: Windows, Linux, and Azure Deployment
Getting ready for production Configuring the endpoints Tweaking the HOSTS file Other viable alternatives ASP.NET Core deployment tips The launchSettings.json file Runtime environments .NET deployment modes Angular deployment tips ng serve, ng build, and the package.json file Differential loading The angular.json configuration file(s) Updating the environment.prod.ts file(s) Automatic deployment Windows deployment Creating a Windows Server VM on MS Azure Accessing the MS Azure portal Adding a new Windows VM Configuring a DNS name label Setting the inbound security rules Configuring the Windows VM Adding the IIS web server Installing the ASP.NET Core Windows hosting bundle Publishing HealthCheck and HealthCheckAPI Introducing Visual Studio publish profiles Folder publish profile FTP publish profile Azure Virtual Machine publish profile Configuring IIS Adding the HealthCheck website entry Adding the HealthCheckAPI website entry A note on TLS/SSL certificates Configuring the IIS application pool Adding the .webmanifest MIME Type Testing HealthCheck and HealthCheckAPI Testing the app Linux deployment Creating a Linux CentOS VM on MS Azure Adding a new Linux 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 Publishing WorldCities and WorldCitiesAPI Building the Angular app Building the WorldCitiesAPI app Deploying the files to the Linux VM Configuring Kestrel and Nginx Testing WorldCities and WorldCitiesAPI Testing the app Troubleshooting Azure App Service deployment Creating the App Service instances Adding the HealthCheck App Service Adding the HealthCheckAPI App Service Adapting our apps for App Service Publishing our apps to App Service Publishing the Angular app Publishing the ASP.NET Core project Testing HealthCheck and HealthCheckAPIOther Books You May Enjoy
Comments (
)
)
<00>
<01>
<02>
<03>
<04>
<05>
<06>
<07>
<08>
<09>
<10>
<11>
<12>
<13>
<14>
<15>
<16>
<17>
<18>
<19>
<20>
<21>
<22>
<23>
Link to this page:
http://www.vb-net.com/AngularStart2/3.htm
| <SITEMAP> <MVC> <ASP> <NET> <DATA> <KIOSK> <FLEX> <SQL> <NOTES> <LINUX> <MONO> <FREEWARE> <DOCS> <ENG> <CHAT ME> <ABOUT ME> < THANKS ME> |