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 the angular project structure by inspecting index.html, main.ts, and the app component root, and learn how angular.json and bootstrap configure the app, including hiding node_modules in Visual Studio Code.

Explore the anatomy of an Angular component, including the template and class with the component decorator, selector usage, standalone components, and how interpolation binds properties to HTML.

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.

Learn how Angular pipes transform data, including date pipes, uppercase pipes, and currency pipes, and how to chain them in standalone components for user-friendly formats.

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.

Master template-to-class communication with events and event binding in Angular, triggering add movie and remove movie via click, and handling placeholders.

Learn to use template reference variables to grab an HTML element, such as triggering a hidden file input with a button by assigning a template reference and invoking its click.

Build a reusable generic list component using content projection to pass custom loading and empty templates, centralizing display logic while letting parent components supply content like movies, genres, or calendars.

Explore Angular Material, a standard library of components and styling rules that speed up development, including autocomplete, buttons, cards, and drag and drop via CDK.

Install Angular Material in your Angular application using ng add, configure a mat flat button with an add icon, and import mat button and mat icon modules for styling.

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.

Use ngClass to apply dynamic CSS to a rating component with stars. Hover highlights, and click updates the selected rating using a max rating input and OnInit setup.

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.

Explore global styling rules that apply across the entire Angular app, learn how to use style.css for global styles, and override with component CSS to customize specific components.

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.

Learn the new angular material styling approach by defining custom classes that wrap mat theme palettes and applying them via class attributes instead of the old color property.

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.

Read and bind URL parameters to edit different entities by using root values and the input decorator, transforming id into a number to edit movies, genres, actors, and theaters.

Implement a catch-all route to redirect unknown URLs to the landing page, and place it last in the angular routes array to preserve specific routes and avoid blank pages.

Learn routing to configure navigation between screens using router service for JavaScript navigation, retrieve url parameters with input decorator, and handle nonexistent routes with a wildcard to control user experience.

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.

Reuse a single genres form component to update records, featuring a name field with validation, using genre creation DTO and genre DTO interfaces for create and edit flows.

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.

Design and implement a reusable image input component for actor creation and editing, enabling base64 conversion, display from a url, and communication with parent forms.

Create a theaters form with angular components using theater creation DTO and theater DTO. Validate the name field and wire save changes for creating and editing theaters, with map location.

learn how to integrate Leaflet maps into an Angular app, handle clicks to place markers with latitude and longitude, and pass coordinates between the map component and theater form.

build a movie search component in angular using a reactive form, including title input, genre select, upcoming releases and in theaters checkboxes, and a clear button, wired via routes.

Filter movies in an Angular component by hardcoding a list and reacting to form value changes, using a search DTO with title, genre ID, upcoming releases, and in theaters.

Learn to persist and share movie filters by using query strings with Angular's activated route and location service, reading and applying URL parameters to a movies search form.

Create an Angular movie form with a movie dto and creation dto, build a reactive form for title, release date, trailer, and poster, and manage save and edit events.

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.

Build an autocomplete component with Angular Material to filter and select actors. Display selected actors in a table and edit or remove their character names with two-way binding.

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.

Visualize the selected actors in the movie form by wiring the actor autocomplete to a selected actors array and syncing it on create and edit, preserving order.

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.

Explore the basics of ASP.NET Core and Web API to build a back end that enables database interaction for modern applications.

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 http post, put, and delete handle create, update, and delete actions on a single API genres route, following web API conventions that map methods to actions.

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.

Use output cache in asp.net core to store the response in memory, eliminating the three-second delay for repeated requests, with a 15-second expiration to balance freshness and speed.

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.

Learn how model binding maps route values, query strings, and request bodies to action parameters in ASP.NET Core, enabling id-based and name-based routes and post operations.

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.

Create a custom first letter uppercase validation attribute in C#, inheriting ValidationAttribute, overriding is valid to enforce uppercase first letters, and reuse it across entities.

Implement a custom validation rule in a controller action by checking genre names in the repository and returning a bad request on duplicates, noting Fluent Validation as an alternative.

Learn to reduce coupling by using dependency injection in ASP.NET Core, implementing constructor injection, and configuring services in the IoC container to swap repositories easily.

Apply the dependency inversion principle by defining a repository interface with methods like get all genres and get by id, swap implementations (in memory or sql server) via dependency injection.

Explore lifetime of services in net core, detailing transient, scope, and singleton: a new instance each time, a single instance per http request, and a shared instance across the app.

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.

Connect your angular front end with your asp.net core back end by learning how to make http requests and persist entities in a database.

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.

Create and consume an Angular service to encapsulate web api communication, enabling components to share logic, reuse code, and use dependency injection to fetch genre DTOs via get all.

Configure Angular http client to fetch genre data from a web API using an observable, and subscribe to response while configuring the API to allow access for the Angular app.

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.

Learn to use Entity Framework Core with SQL Server, create a code-first database via ApplicationDbContext, and configure the default connection string in development.

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 new genre by injecting the application DB context and adding it to the context. Then persist with SaveChangesAsync and return CreatedAtRoute using the get genre by ID route.

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.

Query genres from the database via the application db context and genres set asynchronously. Project to genre dto with automapper to produce efficient selects and fetch only required fields.

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.

Update genres by implementing a get genre by id and a put method, using Automapper and genre creation dto, with not found checks, save changes, and output cache store cleanup.

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.

Add a delete function in the genres service of the Angular app that sends an http delete by id, and confirm before deletion with sweet alert two.

Define an actor entity with id, required name (150 chars), date of birth, and nullable picture URL; configure the actors table and create endpoint with a DTO and automapper.

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.

Update actors in an angular app by fetching by id, displaying a loading state, submitting updates with formdata via http put, handling errors, and navigating back to the actor list.

Delete an actor and their picture on the back-end by fetching the actor, removing the record, saving changes, and deleting the associated file from storage.

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.

Implement a generic CRUD interface for services, enforce typed DTOs and creation DTOs, and apply across genre and actor services for a more maintainable Angular app.

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.

Centralize the edit workflow by building a separate edit entity component that loads by id, projects a form, and handles loading, errors, and save via a generic CRUD service.

Create a custom base controller to centralize paginated queries for different entities using generics, expression-based order by, and AutoMapper projections to DTOs.

Extend a custom base controller to fetch an entity by ID using a generic DTO that implements an ID property via an interface, centralizing retrieval logic.

Build a custom base controller to handle post, put, and delete for genres, using creation and read DTOs, entity mappings, route name, and the cache tag.

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.

Define the movie entity with id, title, trailer, release date, and poster, and configure composite keys via fluent API and navigation properties for its genres, theaters, and actors.

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.

Create a landing dto with upcoming releases and in theaters, fetch and project movies, and expose a detailed movie dto with genres, theaters, and actors.

Create a landing DTO with upcoming releases and in-theaters movies, fetch it via the landing endpoint from an Angular service, and populate the landing component.

Update movies back-end by loading a put-get DTO for editing movie data, including selected and non-selected genres, theaters, and actors, and handle poster updates using Entity Framework Core and Automapper.

Update movies with angular 19 by implementing a movie update flow using dto interfaces, selected and non-selected genres and theaters, and an http put in a form-driven component.

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.

Create a movie details component displaying name, release year, poster, trailer, actors, genres, and theatres using genre, theatre, and actor DTO arrays, with get by id service and router navigation.

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.

Complete the searching movies component by wiring the genres service to fetch all genres, implementing a filter with http params, and wiring a paginator for page and size.

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.

Explore security fundamentals by enabling user registration and authentication. Learn how authenticated users and administrators have different privileges to perform actions.

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.

Create an authorized component that shows or hides the user interface based on authentication and admin roles, using a security service and content projection to guard edit and menu items.

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.

Configure identity in your app by adding Entity Framework Core identity and JWT bearer authentication, and create a user system with roles, claims, user logins, and token management.

Implement a users controller to enable registration and login using ASP.NET Core Identity, generating a JWT with user claims, token expiration, and a secure signing key.

Build Angular authentication by defining user credentials and authentication response DTOs, posting register and login, and storing the JWT and expiration in local storage for protected requests.

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.

The lecture details back-end implementation of a movie rating feature, enforcing authenticated users, a rating entity, and computing the average rate and the user vote for movies.

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.

Define an is admin authorization policy in ASP.NET Core that requires the admin claim and apply it to admin-only actions, while allowing anonymous access for login and registration.

Design a back-end index endpoint for users with a user DTO, automapper, pagination, and output caching for fast, cached results.

Build an Angular user index component with secure user dto and admin management, adding paginated user lists, http calls for make/remove admin, and route integration.

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.

Learn how to deploy both the web API and the Angular application so end users can access the app, understanding deployment as placing your software where users can use it.

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.

Deploy your Angular app to production using Firebase hosting and a production build. Configure environment variables, fix commonjs dependencies, and set the public directory to angular movies/browser before deploying.

Explore deployments that build and place applications, using Azure App Service for ASP.NET Core Web API and Firebase to host Angular apps. Monitor production errors with Application Insights.

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

Explain the concept of testing and the purpose of verification in software, and show how automated testing with ASP.NET Core overcomes the tedium and error-proneness of validating all functionalities.

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.

Explore unit tests that validate small, isolated parts of code without external dependencies. See how fast tests verify different behaviors of a function in a class and enable automated testing.

Create a MSTest test project to validate the first letter uppercase attribute in the movies API, then run tests via validation result and assert results in Visual Studio test explorer.

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 the genres controller get by id method to ensure a 404 when the genre does not exist and to return the genre with a matching id when it does.

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.

Use NSubstitute to create a double for IOutputCacheStore and verify the by tag async method is invoked once with the genres tag in the post method.

Use a separate dbcontext for reads to mirror production and avoid false positives in EF Core tests. Fetch related data by using includes to verify what the endpoint returns.

Explore automated testing in .NET by performing unit tests and validating controllers with an in-memory provider and Entity Framework Core, while verifying dependency calls in tests.

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

Explore how to test Angular applications beyond logic by validating UI behavior, such as showing messages after button clicks, using the Angular CLI ng test and Jasmine for automated tests.

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 test an Angular display errors component using TestBed, fixture, and change detection to render errors as list items from a string array.

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.

Test the genre service by configuring the http client testing module, injecting the service, and verifying a get request to the api/genres/all URL.