Angular .NET Core SQL Server Application in Visual Studio 2022
This application extends the functionality of the default Angular .NET Core Weather Forecaster application to access a database and get the Summaries values from the database (in the default application it is hard coded in the Controller class).
Prerequisites
You have to install
- npm
- Angular CLI
Project
Create a new project in Visual Studio.
Create the frontend app
Search for Angular in the search bar at the top and then select Standalone TypeScript Angular Template.
Give your project and solution a name. When you get to the Additional information window, be sure to check the Add integration for Empty ASP.NET Web API Project option. This option adds files to your Angular template so that it can be hooked up later with the ASP.NET Core project.
Create the backend app
In the solution explorer right-click the solution name and select New Project.
Select the ASP.NET Core Web API project.
Give your project and solution a name. When you get to the Additional information window select .NET 6.0 as your target framework.
Set the project properties
Right-click the ASP.NET Core project (the backend app) and choose Properties.
Go to the Debug menu and select Open debug launch profiles UI option.
Uncheck the Launch Browser option.
Set the startup project
Right click the solution and select Set Startup Project. Change the startup project to Multiple startup projects. Select Start for each project’s action.
Select the backend project and move it above the frontend with the arrow keys so that it starts up first.
Configurations
Before you start the project make sure that the port numbers match. Go to the launchSettings.json file in your ASP.NET Core project (in the Properties folder). Get the port number from the applicationUrl property.
If there are multiple applicationUrl properties, look for one using an https endpoint.
Then, go to the proxy.conf.js file for your Angular project (look in the src folder). Update the target property to match the applicationUrl property in launchSettings.json.
Run the Project
Now you can run the project should you wish to do so. (The values for the Summary on the app will be taken from a hard coded Summaries array in the Controller class).
Now let’s see how to get the values for the Summary from the Database.
Creating the Database
In SQL Server create a new database. Then create the following table.
Select Edit top 200 rows on the table and enter the values in the Summaries array.
Remove the Summaries array from the controller. Modify the Get method to access the database.
You’ll have to modify the constructor to accept a configuration parameter.
Remember to add the connection string to the appsettings.json file.
Now if you run the application the Summary data will be taken from the database.
The full code is hosted in github here: https://github.com/Daneesha/WeatherForecaster
