Learn C# Full Stack Development with Angular and ASP.NET

Install Node.js to set up Angular front-end, note that Angular uses TypeScript, verify your version on the command line, and choose LTS or current release for Windows, macOS, or Linux.

Install nodejs and verify with node -v, then install angular cli version 18.0.1 globally using npm. Verify with ng version to confirm angular cli 18.0.1, then create an angular project.

Install Visual Studio Code as the angular IDE; install angular essentials, angular language service, and ESLint extensions to catch errors. Enable format on save to auto-format code as you develop.

Create a new angular project from scratch with ng new, naming it book-list-app, choose css, skip server-side rendering, then run ng serve to view at http://localhost:4200.

Discover how Angular builds a single-page application with a component-based architecture, app root, and routing, and inspect the project structure from package.json and angular.json to the public and src folders.

Create a TypeScript book interface, build a book list component, and use a service to fetch data from the ASP.NET API, enabling data binding and loops in the front end.

Create a dedicated book-list component with the Angular CLI, then import and render its selector in the app root to encapsulate a reusable list of books as a standalone component.

Bind a book title from a TypeScript component to its html using data binding with double curly braces. Preview rendering a dynamic books array with a loop.

define a book object from the interface with id, title, and author to enable type-safe binding, then create a book array and use ngFor to display id, author, and title.

Create an Angular ngFor loop to render a dynamic list of books from a books array, binding book title, author, and id in a component template using the common module.

Create a dedicated Angular book service using ng generate service to handle http requests to the backend API, injected into components to separate UI from API logic.

Build the book service by wiring an http client to connect to your api, configure the api url, and enable dependency injection in Angular to send requests.

Learn to fetch books from a backend API using an observable in Angular, via an HTTP get request that returns a book array.

Inject the book service into the book list component and call its get books method, subscribing to the observable in ngOnInit to populate the books from the API.

Configure a custom cors policy in asp.net core to allow your angular app on localhost:4200 to access the application programming interface, enabling specific origins, headers, and methods.

Build an employee management system with full CRUD in Angular and ASP.NET, using a RESTful API, repository pattern, and Entity Framework Core, with validation and Bootstrap styling.

Download .NET 9.0 from dotnet.microsoft.com, select Windows x64, install with default settings, and prepare to set up your next project using .NET 9.

Open the Visual Studio installer and update to the latest version, such as Visual Studio 2022 version 17.6. Update ensures compatibility before starting your next project.

Enable previews of the dotnet sdk in Visual Studio 2022 to work with dotnet nine as a preview, then restart and create your project.

create a comprehensive web application with an api offering employee CRUD and an angular front end to list, create, update, and delete employees.

Create an employee model as a class named employee with public int id and string properties for first name, last name, email, phone, and position in the models namespace.

Explore building CRUD with an in-memory database via Entity Framework Core, storing employee data during runtime, and learn how to switch later to a real SQL database.

Create and register an app db context in a C# ASP.NET app using Entity Framework Core, including a constructor with options and in-memory database for employee data.

Add a DbSet of type Employee to the app db context to manage employees, enabling add, update, query, and save operations with Entity Framework Core.

Configure cors in program.cs by adding a policy named my course to allow the Angular origin http://localhost:4200, permit any method and header, and apply the policy to enable API access.

Learn to apply the repository design pattern to separate data access from business logic, using an IEmployeeRepository interface with async CRUD operations on a DbContext.

Implement the employee repository class that implements the interface and adds the logic, using dependency injection to obtain the app db context and access the employee table in ASP.NET Core.

Develops async employee addition in the repository by using the db context with add and save changes, and enforces a read-only context for safer injection.

Continue implementing the employee repository in ASP.NET, adding async get all and get by id methods using ToListAsync and FindAsync, and handle possible nulls by marking employees nullable.

Update and delete employees with an async repository using Entity Framework. Learn to use add, update, find, and remove methods and save changes to the context for crud operations.

Configure the application to add controllers and register the employee repository with add scoped for IEmployeeRepository, illustrating the repository pattern and dependency injection into the API controller.

Create an employee api controller with a post endpoint to add a new employee using dependency injection and a repository, returning 201 created and enabling swagger testing.

Install and configure swagger with swashbuckle asp.net core to generate open api documentation and provide an interactive swagger ui for testing the employee api.

Learn how to test a http post endpoint for creating employees using swagger, sending json payloads that map to C# objects, and observe a 204 response with an in-memory database.

Implement the get all endpoint to retrieve all employees via the repository in the ASP.NET controller, completing the read portion of the CRUD workflow.

Create an http get by id endpoint with a route parameter to fetch a single employee, differentiate from get all, return not found or the employee, and test via swagger.

Learn to create an employee via a post endpoint, return the created employee with its id, and expose a get by id endpoint using the created action and location header.

Implement a delete endpoint by id that calls the employee repository to remove the record and returns 204 no content, illustrating status codes and swagger testing.

Implement a put endpoint to update an employee by ID, validate the ID match, and return the updated employee with a 201 created status. Use in-memory data and get-by-id verification.

Review the API you built: implement a full CRUD on employees with repository design pattern, interface and class, entity framework database context and swagger, then transition to Angular frontend.

Scaffold an Angular front end for an employee management system, configure CSS, and use a router outlet to switch between the all-employees page and a create-employee form.

Create an employee interface in TypeScript and build an Angular employee table component, render it with a shortened selector, and plan a service to connect to the backend API.

Create environment files to store the API URL and implement a production flag for development and production settings. Use a base API URL without appending '/api' to controller routes.

Create an Angular employee service using dependency injection and http client, build the api url from environment.apiURL, and expose a getEmployees observable that fetches employee array from the /employee endpoint.

Load employees from the api into the angular employee table by subscribing to the employee service's observable in ngOnInit and handling the returned employee array.

Demonstrates rendering backend employee data in an Angular table by binding ngFor to employees, displaying id, first name, last name, phone, email, and position while handling asynchronous data loading.

define routes in angular by mapping the home page to the employee table and /create to the employee form, using a router outlet and pathMatch: full redirect

Create a simple navigation bar that persists across routes, using router module and router links for home and create paths, with router outlet rendering current route content.

Create and bind an employee form in Angular by importing the forms module, wiring two-way data binding to an employee interface, and handling submit to log the new employee.

Create an employee form in angular with ngmodel and submit. Bind inputs to the employee model, update values as you type, and rely on backend id via Entity Framework.

Extend employee form with inputs for first name, last name, phone, email, and position, binding them to the employee and validating with Angular forms; then post to create the employee.

Extend the employee service with a post method to create an employee via http post to /employee, returning an observable of an employee, wired through the form with dependency injection.

Handle observable errors in angular by subscribing with next and error, navigate on success, and display conditional error messages with the ngIf directive bound to an errorMessage property.

Add a delete employee method that calls the back-end delete by id endpoint, returning void, and update the UI by filtering the local employee list after a successful deletion.

Create an edit route in Angular using a dynamic id parameter (edit/:id), navigate from the employee table, prefill the form in edit mode, and distinguish it from create mode.

Read the url param id via activated route in ngOnInit to switch the employee form to editing or creating mode, with two-way binding and a get by id service.

Load a single employee by ID via get employee by ID, converting the route param to a number, then extend the service to implement an update method.

Implement the edit workflow in the Angular front end by adding an update method, wiring onSubmit to call edit, and reflecting updated employee data in the UI after save.

Explore styling your app with bootstrap, install via npm, and use ready-made components like headers, nav bars, buttons, forms, and tables to create responsive designs.

Install bootstrap into your angular app, then add bootstrap min.css and bootstrap bundle min.js to angular.json, and restart ng serve to apply changes while testing a btn-primary button.

Learn to build a bootstrap navbar with responsive styling, including brand, collapsible menu, and mobile toggle, and customize nav links like home and create.

Style an employee table using Bootstrap classes like table and table-hover, wrap content in a container, and enhance with card headers and bodies for a professional look.

Style the employee create form with bootstrap form classes, using form label and form control, wrap with divs, add margins and borders, and center the width using w-50 and mx-auto.

Explore validation in full-stack development, enforcing front-end form checks and robust back-end data validation with ASP.Net core data annotations for create and update employee records.

Learn how to apply data annotations for API model validation in ASP.NET core, including required fields, email, and length validators for an employee model.

Check employee data against model state validation using data annotations to enforce required fields and proper formats; return bad requests with detailed errors for create and update endpoints.

Learn to implement template-driven form validation in Angular by using a template reference and ngModel to enforce required fields, display errors, and control visibility with touched and dirty states.

Mark all input fields as required with an asterisk and drive validation using ng model and template references, then show required and email error messages and disable submit until valid.

Bind the create button to the Angular form's invalid state via a template reference, disabling it until all fields are valid, and hide the form on validation edit errors.

Showcases handling general error messages in an employee form by styling the error text, hiding the form when an error exists, and using an empty string check to determine visibility.

Discover the difference between multi-page and single-page apps with Angular. Learn TypeScript basics, and build a complete application using ASP.NET Core Web API, Entity Framework Core, and Clean Architecture.

Explore single page applications, their in-browser execution, and preloading all assets, with Angular and ASP.NET Web API workflows. Learn how SPAs minimize server requests by loading content dynamically.

Explore the Visual Studio 2022 template for ASP.NET Core with Angular. Create a dotnet six project, install npm dependencies, and see a single page app powered by Angular and ASP.NET.

Learn how TypeScript enhances Angular development by providing type safety, design-time tooling, and seamless JavaScript transpilation; compare C#, explore type inference, class syntax, exports, and array typing.

Learn TypeScript fundamentals, including methods with parameter types, public and private access, return type inference, and class instantiation, plus arrays and primitive types used like in C#.

Explore how Angular uses TypeScript decorators, such as the component decorator, to map selectors to templates and render custom elements by replacing tags with the templates they point to.

Master Angular data binding by linking component fields to HTML templates, driving real-time updates, and implementing event-driven methods like update message and increment counter on the client side.

Explore how Angular data binding links component fields like current count and forecasts to templates, using double curly braces and ngFor loops, with routes in app.module.ts.

Start your course project, the flight booking portal, by applying data binding components and TypeScript basics learned so far as part of the 21 day challenge.

Learn setup and basic routing in Angular within a C# full stack. Compare single-page routing with multi-page navigation, router outlet, and the difference between Angular routes and ASP.NET MVC routes.

Build a flights project with Angular and ASP.NET Core template, explore the router outlet and router links, and define paths while updating the nav menu for a search flights component.

Create a custom Angular component named search flights, attach it to the app module, and set it as the default page.