Angular 12 and .NET Core Web API Full Stack Master Course

Create backend tables in maghrib and expose rest api endpoints, build the frontend with angledool, implement routing, and add a bootstrap table with custom sorting, filtering, and image upload storage.

Install Visual Studio using the free community version for education, then select workloads such as dotnet and web development and dotnet cross platform development, and click install.

Install Visual Studio Code, a popular lightweight code editor from Microsoft, to support front end web development in this full stack course.

Install Postman to test the redBus API, learning how to set up and use Postman for API testing and request validation.

Install Compass, a graphical user interface, to connect to a server and create and manage database objects.

Install node js and verify the installation by checking the version to ensure Node.js is ready for full stack development.

Create a database and two collections, department details and employee details, in a free atlas cluster; connect via the connection string and insert sample department name and employee data.

Build a .NET Core Web API project in Visual Studio, explore dependencies and controllers, review the program and startup for service configuration and the request processing pipeline via dependency injection.

Enable CORS by default and keep the json serializer as our default, importing the namespace and installing a package if needed, then run the project to verify sample controller result.

Install the mungindi b driver for Magleby, add McGreavy cluster connection string, and create a models folder with department and employee models (department id, name; employee name, date of joining).

Create a department api controller using dependency injection to read connection strings from settings, implement get and post methods, and update operations, then test the endpoints with atm.

Implement employee details screen apis by creating an empty api controller, duplicating department controller logic, and testing get, insert, update, and delete methods for reliability.

Develop a post api endpoint to upload photos into a dedicated folder, extract the first file from form data, and return a default anonymous name on errors.

Install Angular CLI globally, verify the version, and create an Angular project with routing and a stylesheet; open Visual Studio Code, bootstrap the app, and run to see browser updates.

Route three pages by creating home, department, and employee components and a three-link navigation menu that maps to /home, /department, and /employee for seamless in-app navigation.

Build a bootstrap table to display department and department name data. Include an options column with bootstrap icons for edit and delete, using the get department API and lifecycle refresh.

Open a modal popup window to add or edit departments using a shared model, binding the department name to a variable and prompting user confirmation before deletions.

Complete the employee screen by reusing the department page, adding an employees array, profile picture upload with its path in the environment file, and a department dropdown populated from departments.

Add an image upload button, select the first file, and append it to form data; update the displayed file name after saving to show that adding and updating data works.

Implement sorting and filtering for two departments using a backup data array, an includes-based filter function, and a text box with key-triggered updates.

Launch a full stack Angular and .NET Core app by creating the database tables, scaffolding a project, adding routing, and implementing a bootstrap table with sorting, filtering, and image upload.

Install Visual Studio by selecting the community version for education, run the installer, and choose workloads such as HP, dot net web, desktop, and dot net cross platform development.

Install visual studio code, a popular lightweight code editor from Microsoft, and learn its use in front end web development.

Install Postman and learn to use it to test the redBus API, building hands-on skills for validating endpoints in this full stack course.

Install MySQL Workbench, then connect to a medical database and create the necessary database objects.

Install Node.js for the Angular 12 and .NET Core Web API full stack master course. Verify the installation by checking the version to ensure the setup works correctly.

Create a department table with department id and name, and an employee table with name, department, joining, and profile picture filename; insert records and verify data with a select query.

Create a dot net web api project in Visual Studio, review the dependencies and controllers folders for api methods, and study startup and program files that configure services and pipeline.

Enable CORS by default and loosen cross-domain security. Update the JSON serializer to the default, import the namespace, install a package if needed, and run to verify results.

Create a models folder and define department and employee models. The department model has department and department name; the employee model includes name, department, and joining date.

Create department APIs in a .NET core web API by wiring a department controller, injecting configuration, and implementing get, post, put, and delete methods with parameterized SQL.

Implement api methods for the employee details screen by adding an empty api controller and copying from the department controller with changes. Test get, post, put, and delete methods.

Create a photo upload API with a post route, save files to a photos folder, return the file name, and use a default anonymous image on errors.

Install the Angular CLI globally and create an Angular project with routing and bootstrap support, then run ng serve --open to view it in the browser.

Create three components for the home, department, and employee pages, import the http client module, and configure routes with paths /home, /department, and /employee to verify navigation.

Display department data using a Bootstrap table in Angular 12, consume the get department API, store results in a departments array, and provide edit and delete actions with Bootstrap icons.

Create a modal popup window to add, edit, and delete departments, binding the department name to a variable, with a title derived from the model and a confirmation before deletion.

Duplicate department page to create the employee details screen, manage employees array, and capture name, department with a dropdown, date of joining, and a profile picture with environment file path.

Add a button to upload the first selected image, attach it to form data, and update the file name so the image displays on screen after saving.

Implement sorting and filtering for the departments list with a filter input, a backup data array, and a two-parameter function (property and ascending flag), triggered by the text box.

Build a full stack web app from scratch using PostgreSQL, with a backend and Angledool frontend, creating tables, REST endpoints, routing, and an image upload feature.

install Visual Studio; choose community version free for educational use, then select workloads: dot net and web development, dot net desktop development, dot net cross platform development, click install.

Install Visual Studio Code, a popular lightweight code editor from Microsoft, to support front-end web development.

Install Postman to test our redBus as part of the Angular 12 and .NET Core Web API full stack master course.

Install pgAdmin to connect to PostgreSQL and create the necessary database objects, and set the master password on first login.

Install the software and verify the installation by checking the version. Explore how this setup supports angular and dotnet core full stack development.

Enable cross-origin resource sharing by default and disable the cross-domain security, import the namespace, keep the decent serializer as default, then run the project to verify.

Create a Europe models folder, add the department model with fields department, I.T., and department name, then define the employee model with fields such as employee name, department, and joining.

Configure app settings, install a data access package, and build a department API controller with get, post, and put methods to read, insert, and update department data.

Implement employee details API methods by creating an empty API controller, duplicating and adjusting the department controller, and testing get, post, put, and delete operations.

Develop a post api to upload photos, create a photos folder via dependency injection, save the first form file, and return the file name with a default image on errors.

Create an Angular project from the CLI, enable routing, and add bootstrap styling; explore project structure including the app component and index.html, and run the dev server to preview updates.

Implement routing for an Angular app with home, department, and employee components, wired by a navigation menu and routes /, /department, and /employee, with HttpClient and forms modules configured.

Display department data with a Bootstrap table by consuming the get department API, refreshing on the component lifecycle, and providing edit and delete options with Bootstrap icons.

Open a modal popup to add or edit departments, binding the department name to a variable and using its title; support add, update, delete with confirmation, and open on edit.

Complete the employee screen by mirroring the department page and adding an employees array with model fields for name, department, date of joining, and profile photo path.

Add an image upload button, capture the first selected file, append it to form data, and update the file name to display on screen as data is added and updated.

Implement sorting and filtering for two departments with a data array, an includes-based filter function using a property name and an asc/desc flag, and a text box to trigger it.