Angular .NET Core SQL Server Application in Visual Studio 2022 - Part II (Adding Multiple Components and Multiple Controllers)

This application is an extension of the application as developed in my Angular .NET Core SQL Server Application in Visual Studio 2022 tutorial. In the above tutorial there is only one component and one controller to the application. In this tutorial I will be adding several other components and another controller, modifying the above application as necessary to do so.

Prerequisites

Start an application as described in the above tutorial. It’s not necessary to add the database connectivity part as we will not be using a database in this tutorial.

Right click on the Angular project and select Open in Terminal.

In the Power Shell that appears type the following command.

ng g c home

This is for the home component. The new set of files will be added to the home folder under src -> app folder.

Likewise generate the other components with these commands

ng g c counter
ng g c fetch-data
ng g c nav-menu
ng g c student-data

Modify the files in components as following.

Install Bootstrap

Run the following command in the Power Shell.

npm install bootstrap

Add the following line to the angular.json file.

"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],

Modifying the Autogenerated files

Modify the autogenerated files as following.

Configurations

Add the following line to the proxy.conf.js file.

context: [
"/weatherforecast",
"/studentdata",
],

Adding a Controller

Right click on the Controllers folder and select Add new item. On the next screen select Class. Give the name StudentDataController.cs.

Add a model. Add a new class under the Web API project (the backend project) and call it StudentData.cs.

Now you can run the application.

The full source code can be found here on git hub.