Build app using Angular 16, .NET Core Web API and Microsoft SQL Server

hello everyone in this tutorial we will learn how to build a simple to do application from scratch using angular 16 as frontend.net core web API is backend and Microsoft SQL Server as the database here is a demo of the web application [Music] we will first install all the prerequisites then we will create the database and objects required for our app next we will create the back end project using.net core web API and finally we will start creating the angular project let us now install node.js first let us download the installer file let's install let's verify the installation by checking the node and npm version we have successfully installed node.js let's now install angular CLI just open up node.js command prompt and type this command let's now check the version we can see that we installed version 16 of angular CLI let's install SQL Server management Studio which we will be using to create database objects in SQL Server ssms is installed successfully let's install Visual Studio which we will be using to develop the app which is needed for this project we will be installing the community version which is free for learning purposes let us run the installer file let me choose asp.net and net desktop development let me put a shortcut in the desktop we can skip the sign in and choose a theme Visual Studio is now ready to be used let us now set up an SQL Server database using azure let's login to Azure portal please note that you need to have a valid subscription to create resources in azure now let's create the SQL database let's create a new Resource Group next we need to enter the database and server names next we need to add credentials for login let's choose development version as it costs less and also reduce the data Max size let's choose public endpoint since I do not have any private Network and let's keep others as default the database server is now ready we can use it in our app with the help of connection strings let's connect to the database using the SQL Server management Studio looks like we need to provide access to our IP address let's add it in the Azure portal now let's connect let's add the table required for our app to store the notes details it will have two Fields one is an auto-generated ID and another one to store the notes description let's add some records into it our database table is now ready to be used let's start creating the API project open Visual Studio let's choose asp.net core web API we don't need https now we need to add a couple of changes to the project openprogram.cs file we need to add Json serializer as default so let's install newtonsoft Json package looks like the latest version is not compatible let's use the older version now let's configure this in program.cs file next we need to enable course so that we can consume the services from the front end project generally this is not recommended in production you should only whitelist the servers accordingly now let's add a controller to add our API methods we need to First add SQL server connection settings in app setting Json file let's get the SQL connection strings from Azure portal now let's write the method to get all the notes data let's write the select query to get the data we need to get the connection details we can make use of dependency injection to access connection details let's complete our get notes method once data is available in data table we will return this as Json result Let's test if this works we see that it works now let's complete the ADD and delete notes methods as well Let's test if they were work is expected we see that we are able to add new notes let's check the delete method delete method also works our API project is now ready let us now start creating the frontend project using angular to create a new project we can use the command NG new and the name of the project we don't need routing as of now and let's go with default CSS the project is now created let us open the project using visual studio code let's simply run the project and see how it looks we can use the command NG serve dash dash open we can see a default template provided by angular let's remove all these in app component HTML let's just add header tag to call our API methods we need to use the HTTP client module so let's just register it an app module file let's initiate the HTTP client in the Constructor let's now add a variable to save the API URL foreign variable to store the notes data now let's add the method to call get notes API once done we will assign the response data to the notes array variable we have a lifecycle method called NG on init which gets executed on page load we will call the refresh notes method here now let's display the data in HTML we can make use of ng4 let's check if this works looks like we have used wrong Import in the app module file we see the data is now displayed as expected now let's add methods to add and delete the notes let's add a text box to accept new notes and a button to call the add notes method let's also add a button to delete the given notes we need to pass the ID other notes to be deleted let's complete the add notes method we need to first get the input data from text box we need to add it in a form data to send it to the API once added we will display the result and also refresh the notes data let's also complete the delete method let's pass the ID to be deleted let's verify if this works we see that we are able to add new notes let's check the delete the delete also works as expected

Channel: Art of Engineer

Views: 26,344

Keywords: angular, .net core web api, sql server, full stack, backend, frontend

Id: 9ZD7cKIaxdM

Length: 29min 16sec (1756 seconds)

Published: Sat Jun 17 2023