In this article, we will develop a Web application from scratch using the latest technologies in an easy and understandable way.
- Back-end = ASP.NET Core Web API
- Database = SQL Server
- Front-end = ANGULAR 12.
First, we will create a database, tables and insert some data.
Second, we develop APIs using ASP.NET Core Web API.
Third, we develop the frontend using angular 12.
Step 1 - (Database Related Activities)
After opening SQL Server Management Studio and connecting to a local database, create a database named StudentDB.
Step 2 - (Web API Related Activities)
Now, create a new project after opening Visual Studio 2019.
Step 3 - Now change the startup class
Firstly, install these,
- Microsoft.AspNetCore.Mvc.NewtonsoftJson
- System.Data.SqlClient
from Manage Nuget Packages for JSON Serialization and database.
We enable CORS to disable the security and allowing requests from other domains. After installing NewtonSoft.json, we use JSON serializer as our default.
Step 4
Now, create a folder named Models and add two class files named Student.cs, department.cs
Now, open the appsettings.json file and replace it with the following,
Step 6
Now, add StudentController.
Now, make the following changes in the StudentController, here we implement dependency injection and perform CRUD operations using raw SQL queries.
Step 7 - Angular (Front End) related activities
Now, let's create an Angular project.
At first, install Node.js from https://nodejs.org/en/download/ and angular CLI by following way,
npm install -g @angular/cli
Now in a specific folder, open a command prompt and create an angular project by following ways,
ng new angular12
? Would you like to add Angular routing? (y/N) y
> CSS
It will take few minutes to complete.
Now, create components by following commands,
- ng g c student
- ng g c student/show-stu
- ng g c student/add-edit-stu
Then, open app.module.ts and modify it with the following code,
Now, let's create a shared service.
Import the HttpCient and observables modules. Observables are used to handle asynchronous requests and responses.
Step 9
Now, make the following changes in the app.routing.ts file.
Step 10
Add the bootstrap files for the design.
Open index.html and changes it with BootStrap installation.
Now open student.component.html and replace it with the below code,
Now, open show-stu.component.ts and replace it with the below code
Now, open show-stu.component.html and replace it with the below code
Now, open add-edit-stu.component.ts and replace it with the below code
Now, open add-edit-stu.component.html and replace it with the below code
Conclusion
In this article, we discussed step by step how to build an application using .Net core angular 12 and SQL server. Hopefully, you will be benefitted from this article by reading and learning.
No comments:
Post a Comment