Building Applications with Angular 19 and ASP.NET Core 9

Explore how Angular components divide an application into reusable parts and enable modular design. Begin by examining the Angular project to see how these components fit into a real project.

Explore Angular interpolation to render dynamic content from component properties, expressions, and functions in the template, including objects like a movie with title and release date.

Iterate a movies array using the modern for syntax and the legacy NgFor directive, using the index to track order and update the UI efficiently.

Use property binding to display dynamic movie posters, organize them with flexbox, and apply the NgOptimizedImage directive to load images lazily, prioritizing the first visible poster.

Apply dynamic properties with NgOptimizedDirective by binding a priority attribute only when index equals zero, prioritizing the first poster and loading the rest lazily.

Simulate a two-second data fetch for a movie list, show a loading GIF while waiting, and compare modern if with ngIf for conditional rendering in Angular 19.

Download a loading gif from an external site, save it into the app's public directory, and reference the file by its name to serve it in the Angular app.

Create a reusable movies list component in Angular to display multiple movie lists without duplicating code, enabling separate upcoming releases and in theaters lists through parameters.

Learn to pass data to a reusable angular movies list component using the input decorator, making the movie list a required parameter, and bind different lists from a parent component.

Create a persistent angular material menu component to navigate through the pages of our web application, using a toolbar with icons and buttons and a sticky top css class.

Learn how to use a transform function in an angular rating component to convert a numeric max rating into an array of stars, simplifying templates and avoiding duplicated properties.

Raise events from a child component to its parent using Angular's output decorator and event emitter. Bind the event to a parent function to process a user rating.

Angular warns about unused components in the imports array when not used in the app component's template, and you can fix it by using or removing the component.

Explore Angular components, display variables via interpolation, and conditionally render with if and for; pass required parameters with input decorator, enabling parent-child communication via messages and events and Angular Material.

Explore routing to enable user navigation from the roots of the application, as Felipe Gavilan introduces how to let users move through the app.

Clean up and refactor the movies list by switching to a horizontal layout with flexbox, implement a movie poster area with a default image, and add edit and delete actions.

Configure Angular routing to display multiple pages using a router outlet, routes mapping paths to components, and router links for navigation, including a landing page and a genres list.

Navigate with JavaScript in an Angular app by wiring a router service to redirect to the genres list after a save, and scaffold routes for genres, actors, theatres, and movies.

Create forms to capture information and enable database records using Angular template-driven and reactive forms.

Compare template-driven and reactive forms in angular, showing how templates versus component class govern configuration and validation rules, and why reactive forms offer cleaner HTML and real-time validation.

Create a genre form with reactive forms, a form group and a name control built by FormBuilder. Integrate Angular Material form fields, apply validation, and handle save changes with navigation.

Learn built-in Angular validation rules such as required, min, max, and pattern, display clear error messages, and ensure responsive forms with dynamic sizing to prevent layout overlap.

Learn to implement an Angular validator that enforces uppercase first letters in genre names by creating a validations.ts function, applying it to a form control, and centralizing the error message.

builds an actor form in angular 19 with reactive forms and actor dto models to capture name and date of birth, using moment date adapter and material date picker.

Learn to validate a date field in Angular 19 and ASP.NET Core 9 app using required and custom validators preventing future dates for date of birth in a reactive form.

Learn to implement a multi selector component to manage many-to-many movie genre relationships, enabling selecting and deselecting multiple genres for create and edit movie forms.

Reuse the multiple selector component to manage a many-to-many relationship between movies and theaters, enabling selection of multiple theaters in create and edit forms via theaters IDs arrays.

Learn to reorder list items with drag and drop in Angular Material, using CDK drop list and cdk drag to update an actor list and persist changes.

Learn to build Angular forms with reactive forms, including built-in and custom validations. Create image, map, and multi-select components for genres, theaters, and actors; prepare for back end work.

Create an in-memory genre repository that hides database details, define a Genre entity with id and required name, and expose a get all genres action via a swagger-enabled controller.

Map web API endpoints to controller actions. Create a genres controller with api/genres, implement a get action using an in-memory repository, and test the result with swagger.

Learn how to receive an id in an action, fetch a genre from an in memory repository with firstordefault, and fix duplicate routes with routing rules for Swagger.

Explore routing in asp.net core using attribute routing, combining routes, and customizing action routes for api/genres and api/genres/{id}.

Explore how an action can return a specific type, an action result, or an action result of T, and use 404 not found for a missing genre.

Discover asynchronous programming and how using await and delays frees threads during IO operations to keep web apps responsive. Use async for IO tasks to improve performance and avoid overhead.

Learn how an HTTP request travels through a middleware pipeline, with authorization enforcing access and output cache potentially short-circuiting the chain. See how middlewares are configured in the program class.

Apply validation rules to ASP.NET Core models with data annotations, enforcing a required name for genres. Enable automatic validation in API controllers and customize error messages.

Explore built-in validation rules beyond the required rule, including max length, range, credit card format, URL validation, and regular expressions in Angular 19 and ASP.NET Core 9.

The lecture shows using a singleton repository to share state across HTTP requests, adds a create method, and updates the interface, noting persistence resets on restart.

Configure output cache for genres and tag it with genres. Clear the cache when a new genre is created using IOutputCacheStore and a constant tag to avoid magic strings.

Explore using configuration providers in ASP.NET Core to switch between development and production settings, via appsettings.json and appsettings.Development.json, environment variables, and connection strings.

Explore how ASP.NET Core builds web APIs with controllers and actions, map routes to HTTP requests, and use cache, middleware, validations, and dependency injection to create flexible services.

Clean up the back end by removing the weather forecast controller and most services from the genres controller, keep the output cache store, seed genres drama and action, and build.

Configure cors to allow the Angular app to access the web api by defining allowed origins and enabling methods and headers via the cors middleware, using a configuration provider.

Use angular environment files as a configuration provider to avoid hard-coded urls, switch between development and production settings, and centralize the api url for consistent web api access.

Create a genres table in the Movies API database using Entity Framework Core by configuring the application DbContext, adding a migration, and applying it to update the database.

Create a genre via the angular genre service with an HTTP post to the base URL, then navigate to the genres index on success.

Learn to handle web API errors by parsing the API’s error object, extracting field-specific messages, and presenting clear, centralized error displays to users with frontend validation.

Create and use data transfer objects to protect entities, enabling evolution without breaking clients; define genre creation and read DTOs and map them with AutoMapper.

Create an index genres component using a generic list and material table, display id, name, and actions, and wire up edit and delete actions with responsive styling.

Learn back-end pagination in ASP.NET Core by building a pagination dto, extending HttpContext and IQueryable, and paginating via query strings with page, records per page, and a maximum limit.

Use order by in Visual Studio to sort results by id or name in the genres controller get action and remove the warning, then test by executing with sample ids.

Learn how to implement pagination in angular using the material paginator, build dynamic query params, and fetch paginated data via HTTP response headers for total records.

Develop and update genres in Angular by implementing get by id and update in the genre service, then load the genre, show loading, handle errors, and navigate after update.

Delete a genre by id using an asynchronous EF Core delete, returning 204 no content when successful or 404 if no match, and updating the cache.

Create an Angular actor service and component to build form data for actor creation, including name, date of birth, and optional picture, then post to the API and handle errors.

Prepare the app to store images by implementing a file storage service with Azure or local options, using an AI file storage interface for store, delete, and edit.

Learn to store images in Azure storage by creating a storage account and enabling blob storage. Implement a file storage class to upload and delete blobs using a container.

Learn to store images locally in an ASP.NET Core app by implementing a local file storage service with wwwroot and async file copy, with option to switch to Azure storage.

Learn back-end actor indexing in ASP.NET Core 9 by building an actor DTO, mapping with AutoMapper, and exposing paginated and cached endpoints for listing and retrieving actors by ID.

Index actors with Angular using a service to fetch paginated actor data via a pagination DTO, and present it in a mat table with paginator and sweet alert for delete.

Update actors using an HTTP put in the back-end, map changes with Automapper, conditionally update the actor's picture via a file storage service, save changes, and return no content.

Implement delete functionality for actors in an Angular app using http delete with an actor id, confirm the deletion, remove the record (and its image), and refresh the list.

Build reusable index entity components in Angular 19, using generics and an injection token to render any entity (genres, actors) with create, edit, delete, and pagination.

Create a generic entity component in Angular that centralizes form handling for actors and genres by projecting their forms and managing save changes with a DTO and CRUD service.

Create a theaters entity with id, name, and location using net topology suite and geography data type in sql server, with ef core configuration and migrations.

Build back-end theater management by defining theater dto and theater creation dto with latitude and longitude validation, and map them to theater entities using automapper and a geometry factory.

Develop a reusable Angular theaters CRUD by implementing a theater service with HttpClient methods for get paginated, get by id, create, update, and delete using generic components.

Develop back-end movie creation with dto classes for creation and post-get data, load genres and theatres, handle poster uploads via file storage, and map to entities.

Learn to receive lists of genres, theaters, and actors from a form using a custom model binder in asp.net core, and map them to a movie creation DTO.

Create movies in an Angular app by building a movies service with HTTP client and post/get DTOs, and a form data flow handling title, poster, trailer, genres, theatres, and actors.

Finish the actors autocomplete by creating a Movie Actor DTO and a get by name API, configure AutoMapper, and connect an Angular service to fetch and populate the autocomplete.

Delete movies via an HTTP delete endpoint, remove the movie and poster, save changes, update cache and storage, and wire the Angular UI to confirm and refresh the list.

Continue building the movie details page by displaying actors with pictures and roles and rendering movie theaters on a read-only map with markers that show theater names.

Finish the back-end by adding a full genres endpoint and building a dynamic movies filter DTO that applies title, in theaters, upcoming releases, and genre filters with pagination.

Apply RxJS debounce time on the value changes pipe with about 300 milliseconds to let only the last input pass, producing a single HTTP request to the web API.

Connect your Angular app to a .NET web API, use Entity Framework Core for a database and CRUD, save images in Azure Storage or locally, and implement pagination.

Authenticate users with identity in ASP.NET Core, issue a JWT with user claims, and authorize actions by role, using the HTTP header for protected endpoints.

Explore route guards in Angular to control navigation entry and exit. See canActivate, canDeactivate, resolve, canLoad, and canMatch guide access, data resolution, and module loading.

Protect routes with a can activate admin guard, redirecting unauthorized users to the login page using the router and security service to verify admin roles.

Learn to build login and registration components in Angular 19 with reactive forms, including email/password fields, validation, error handling, and JWT-based flows, plus menu integration for login, logout, and registration.

Implement a movie rating feature by wiring an Angular rating component to a web API via a rating service, posting user votes and displaying the average.

Create an HTTP interceptor in Angular to attach the JSON web token to the request via the authorization header. Configure the interceptor in app.config and verify movie ratings remain authorized.

Implement a robust security system by applying authentication, authorization, and identity management, and use HTTP interceptors to attach user tokens for each request. Use claims to identify administrator roles.

Deploy your API to Azure App Service, configure appsettings with production environment variables, create an Azure SQL database with a secure connection string, and enable automatic migrations during self-contained deployment.

Diagnose a startup error in production by inspecting the web API in portal.azure.com, using environment variables and Swagger to trace issues and fix deployment.

Enable Application Insights in Azure to identify production errors, view failures, and trace exceptions to specific code lines such as genres controller, then fix and redeploy.

Learn how to automate the testing of applications using automated testing to guarantee that your software works correctly.

Automate software trials with automated tests to verify functionality and give confidence to change code; a test suite follows preparation, testing, and verification across unit, integration, and end-to-end tests.

Learn to run the same test against multiple values with a data row parameter, validating empty, null, and whitespace inputs, and reuse a single implementation for three executions.

Create more tests for the function to verify that a string starting with an uppercase first letter returns success, while a lowercase start returns a validation error.

Test controllers that use Entity Framework Core by abstracting with an interface or using an in-memory provider for fast automated tests. The course adopts in-memory provider to avoid a database.

Create a test helper to configure an in-memory Entity Framework Core DbContext for automated tests. Set up AutoMapper with a geometry factory (ID 4326) to support controller testing.

Test the genres controller's get method by inserting two genres directly, wiring the context and automapper, and asserting the response returns two genres.

Test creates a genre using a fake output cache store, posts a recreation dto, and verifies a created route result and a new genre in the database.

Explore automated testing in Angular to automatically verify the correct functioning of your Angular application.

Study the Angular spec file to learn setting up a test suite with beforeEach and a configured testing module, verifying app creation and title rendering, and debugging HTTP client provisioning.

Master jasmine-based automated tests for a TypeScript extract errors function in an Angular project, validating empty input and multiple error messages as a string array.

Create a test coverage script, run ng test with no watch, and view the generated code coverage report to see which lines are covered or not covered in the project.

Learn to instantiate an Angular component with dependencies by using a spy to mock the iCloud service, configure the TestBed, and provide router and observables for tests.

Learn to unit test a component's delete function by mocking the cloud service, invoking delete with an id, and asserting that pagination resets to one.

demonstrate sharing a mock across tests to simulate get paginated results, and create two automated tests—one returning records to render the table, another returning no records to hide it.