Angular 12, .NET Core Web API & Microsoft SQL full-stack app

Install Visual Studio by downloading the free community version for education, run the installer, and select the dotnet and web development workload before clicking install.

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

Install Postman to begin testing the redBus API. Use Postman to explore request workflows and validate endpoints within Angular 12, .NET Core Web API, and Microsoft SQL full-stack app course.

Install SQL Server Management Studio to work with SQL Server databases, accept default options, restart when prompted, and complete the setup.

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

Create database objects by setting up SQL Server or Azure, then build department and employee tables with an auto-generated id, department name, employee name, joining date, and profile picture.

Create a net core web api project in Visual Studio, explore dependencies, controllers, and startup configuration, and learn how dependency injection builds the request processing pipeline.

Enable cors by default and adopt the default json serializer for the full-stack app, possibly installing a package and importing the namespace, then run the project to verify the results.

Create a models folder and add a department model with fields for department and department name, followed by an employee model including fields for employee name, department, and joining date.

Develop department API endpoints in a .NET Core app, using app settings for the connection string, dependency injection, and get, post, put, delete operations with JSON results.

Implement the employee details screen API methods and add an empty API controller. Copy the department controller, adapt it, and test get, post, and delete methods with expected results.

Implement a post upload file api that creates a photos folder, saves the first form-data file via dependency injection, and returns the filename, using a default anonymous image on errors.

Install angular tooling globally, create a new project with routing and a stylesheet, open in Visual Studio Code, add bootstrap, and run to see the app refresh in browser.

Create routing for the app by adding three pages: home, department, and employee, implement components, configure module imports, and wire up navigation paths to demonstrate functional routing.

Display department data with a bootstrap table by calling the get department api, refreshing data in a lifecycle method, and providing edit and delete actions with bootstrap icons.

Showcases a reusable modal popup for adding, editing, and deleting departments, with dynamic title and department name binding, and a delete confirmation workflow.

Complete the employee screen by copying department page, adding an employees array, profile picture upload with environment file path, a department dropdown, and a join date, ensuring data renders correctly.

Add an image upload button, select the first file, and append it to form data, then save and update the file name to display on screen.

Implement sorting and filtering for a two-department data set, using a text box for input, a backup array, and a filter function with includes on a property and ascending/descending options.