How to create CRUD operations using Angular 6 and ASP.NET Core 2.0

Hi, in this tutorial, we will develop a simple “Bookstore” web application which will perform the complete CRUD operations using Angular 6, ASP.NET Core 2.0 and Entity framework Core code first approach.

What will you learn in this tutorial?

You will learn lots of things in this small web application with step by step.

• How to create a new project?
• How to Add Models?
• How to add entity Framework Core?
• How to add DbContext Class?
• How to Create Database using Commands.
• How to create components in Angular Application?
• How to add a route in Angular 6?
• How to create Form using Bootstrap?
• How to use Service?
• How to Add API Resource?
• How to add Auto Mapper?
• How to Create an API?

CRUD Operations using Angular 6 and ASP.NET Core 2.0

Let’s start how to create a web application which performs CRUD operations using Angular 6 and ASP.NET Core 2.0 with the help of Entity Framework Core.

Step # 1 => Create a new project

First-of-all, we will create a new project with the name of “BookStore”. So, let’s start….

So, create a new project folder (E.g. bookstore) with the name of bookstore using the below command.

mkdir bookstore

Now, run this below command to get in the bookstore folder

cd bookstore

Now, run this below command to create a new project.

dotnet new angular

Now, run this below command to restore all the npm packages that you need for the project.

npm install

Note: – If you don’t have installed nodejs or npm. Then install it and click here.

Now, run “dotnet run” command and the terminal will give you a URL like this “http://localhost:5000”, just enter that URL in your browser and you will see your project is ready with the angular template.

IMP: – We will not use “dotnet run” command to run our project. Because WebPackDevMiddleware only deals with the client-side code. So, if you modify the server-side code while your project is running, then you will not get modified. In this case, you need to stop your process and run it again every time whenever you modify in server-side code. So, we don’t want to do it again and again.

So, go to project folder structure and open the Bookstore.csproj file and then Just copy the below code and paste into the .csproj file just below the project element and then save the file.

Now, run this “dotnet restore” command to restore the package. So, please keep in mind we will use “dotnet watch run” to run our project instead of “dotnet run”.

Let’s run your project with “dotnet watch run”.

Step # 2 => Create a Model

Now, in this step, we will create a model of our project. As you know we are using MVC (Model, View, Controller) approach, so we will create a separate folder for our models.

Write this below command to create a new folder in your project folder structure with the name of “Models”.

mkdir Models

Now, right click on Models folder and then choose “New C# Class” and then enter class name like this “Bookstore”.

Note: – If you don’t see the “New C# Class” option, then you need to install C# extension.

Then write the properties in model “Bookstore class” as you see in below code.

Step # 3 => Adding Entity Framework Core.

Note: – If you are using Visual Studio code, then you can use Package Manager console. But here we don’t have package manager console. So, we need to use “dotnet command line interface” in the terminal to install entity framework in our project.

First-of-all, run this below command in your terminal to add entity framework to your project.

dotnet add package Microsoft.EntityFrameworkCore.SqlServer

Now, run this below command to add another package.

dotnet add package Microsoft.EntityFrameworkCore.Design

Now, run this below command to restore all the packages.

dotnet restore

Note: – Whenever you add a package to your project, just make sure you run the “dotnet restore” command after adding the package.

Install entity framework command line tool

Now, we need to install entity framework commands like Add-Migration and etc. We will add the below code in our csproj file to add command line tools.

Now, Go to your project folder structure and open the bookstore.csproj file. And now add the above code as you see in the below file from line # 7 to 9. And then save the file.

Now, run this “dotnet restore” command to restore package. And now we have successfully installed Entity Framework in our project.

Step # 4 => Creating a DbContext Class.

Now, in this step, we will create a new class with the name of “BookstoreDbContext”. First-of-all, we will create a new folder.

So, run this below command to create a new folder with the name of “bookstoreDB”

mkdir bookstoreDB

Then right-click on “bookstoreDB” folder and then chose “New C# Class” and then enter the name of the class (E.g. BookstoreDbContext) and then press enter. It will create a new class with the name of “BookstoreDbContext”.

Now, write the below code in your BookstoreDbContext class.

Now, we need to configure the DbContext class as a service for dependency injection in the startup.cs class.

Go to project folder structure => open startup.cs class. As you see the below code, I have added a service for dependency injection in line # 27. Now, copy the below code line and add it into the startup.cs class as you see below.

Note: – Don’t forget to add reference libraries above the code.

Now, we will add a connection string in the appsettings.json file. Go to folder structure and open the appsettings.json file. Then copy connection string code (from line # 3 to 5) and paste into the appsettings.json file as you see below code file.

Note: – All the configuration settings are here in this file.

Step # 5 => Creating the Database

Now, in this section, we will create a database using code first migration.

So, run this below command in terminal and it will create a new folder with the name of “Migrations”. This folder will contain all the migrations files.

dotnet ef migrations add InitialBookstore

Now, run this below command and it will apply the migration to the database.

dotnet ef database update

Step # 6 => Creating New Components.

Now, in this section, we will discuss the view part of our project and will create a new component in the project. The easiest way to add a component is Angular CLI.

So, run the below command to install angular cli in the project. This command will install it globally in your system.

npm install @angular/cli@latest -g

Now, add a new file to your project folder structure with the name “angular.json” and paste the below code in the file which you have created.

Now, run the below command to install angular cli as a dev dependency.

npm install @angular/cli@latest –save-dev

Now, run these below commands to go to components folder as you see below screenshot.

cd ClientApp

cd app

cd components

Now, run the below command one by one to create two new components with the name of “Bookstore-form” and “bookstore-list”. These below commands will create two new folders under the components folder and these new created folders also contains some files. And these below commands will also import statement and declare it in the declarations part in the app.shared.module.ts file.

ng g component bookstore-form

ng g component bookstore-list

Note: – If you get an error “couldn’t find module”, then append you command with “ – -skip-import ” and then add import statement and declaration part manually in app.shared.module.ts file.

Note: – We are running these commands from the components folder as you see in below screenshots.

Step # 7 => Create a New Route

Go to project folder structure => then open ClientApp folder => then app folder => then choose “app.shared.module.ts” file. Now, add the route in this file as you see in below code line # 33, 34, 35.

Now, we need to create a new link in the menu of our application. So, go to project folder structure => then app folder => then components folder => then navmenu folder => then open “navmenu.component.html” file. And then add the code as you see in below code from line # 15 to 24. And also add some changes in line # 10.

Now, run this below command and run your project, then you will see the output as you see in below screenshot.

dotnet watch run

Then you will see the output page as you see in below screenshot.

Step # 8 => Add a form using Bootstrap

In this step, we will add implement the bootstrap form for our application.

So, go to bookstore-form component => open bookstore-form.component.html file => then copy the below code and paste into the bookstore-form.component.html file.

In the above code,

Line # 6: In this line, #f=”ngForm” is used for form validation. And this is connected with the button code “ [disabled]=”!f.valid” ”, because if form is not valid then the button will be disabled. And the ngSubmit is used to submit this form to database. This ngSubmit click event is defined in component.

Line # 9: In this line, [(ngModel)]=”bookstore.name” is used to bind property. And #name=”ngModel” is used to validate this property and is connected with the div in line #10.

Line # 32: In this line, *ngIf=”bookstore.id” is used for hiding the button if the form is not in update or edit mode.

Now, go to bookstore-list component => open bookstore-list.component.html file => then copy the below code and paste into the bookstore-list.component.html file.

In this above code,

Line # 19: In this line *ngFor is used to display all the record from bookstores. And the bookstores is declared in bookstore-list.component.ts file.

Step # 9 => Add a Service

In this section, we will create a service for our project. So, we will call APIs (which we will built in next) in this class.

So, go to terminal => and then run these below commands to get in the app folder.

cd ClientApp

cd app

Now, run the below command to make a new folder with the name of services.

mkdir services

Now, run this below command to go to services folder.

cd services

Now, run this below command to generate a new service. It will create two files inside the services folder.

ng g service bookstore

Then you will see the result of your terminal as you see in below.

Now, we will define complete crud methods inside the bookstore.service.ts file. So, open the bookstore.service.ts file and add the code as you see below.

So, in this above code we are just calling API to Create, Update, Delete and Get bookstore data.

Now, go to app.shared.module.ts file and register the service as you see in below code line # 42 to 44 .

Note: – don’t forget to add the import statement at the top as you see in above file line # 1.

Step # 10 => Add API Resource

In this section, we will add API resource for our project. So, go to controller folder => Right click on Controller folder => then add new folder and enter the name (E.g. Resources).

Now, right click on “Resources” folder => add “New C# File” => enter the name (E.g. BookstoreResource.cs). Now, copy all the properties from “Bookstore.cs” model class under the model folder and then paste them here in this “BookstoreResource.cs” file as you see below.

Note: – There is no need to add data annotations.

Step # 11 => Add Automapper

In this section, we will add auto mapper tool using the terminal. This tool is used to map domain classes (E.g. Bookstore.cs ) to API Resources (E.g. BookstoreResource.cs). So, we need to add two packages to install auto mapper tool. Let’s see how to add using the terminal.

Now, run these be

dotnet add package AutoMapper

dotnet add package AutoMapper.Extensions.Microsoft.DependencyInjection –version 1.2.0

dotnet restore

Now, go to Startup.cs class and add the below service for Dependency Injection in ConfigureServices method.

AddAutoMapper();

Note: – don’t forget to add reference library for the auto mapper.

Now, we need to add a new folder where we will add a class (E.g. MappingProfile) which will tell auto mapper how to map the properties of one class to another class.

So, run the below command to make a folder with the name of Mapping.

mkdir Mapping

Now, right click on the Mapping folder => choose New C# Class => enter name (E.g. MappingProfile). Now add the code in MappingProfile class as you see in below code.

In the above code,

Line # 11: Mapping domain class to resource class.

Line # 13: Mapping API resource class to domain class. And the id property is ignored to mapping.

Step # 12 => Create an API

Now, in this section, we will build an API for our project. Let’s see how to build it.

Go to folder structure => right click on Controllers => then choose “New C# Class” => and then enter name of the class (E.g. BookStoreController.cs) as you see below.

Step # 13 => Add Component Code.

Now, in this last section, we will add code for both components bookstore-form.component.ts and bookstore-list.component.ts. Let’s start…

First, we will add the code in the bookstore-form.component.ts file and then after that, we will add in the bookstore-list.component.ts file.

So, go to bookstore-form.component.ts file and add the code in this file as you see in below file.

Now, open the bookstore-list.component.ts file and add the code in this file as you see in below file.

Summary

So, we have created a beautiful simply bookstore application using Angular 6 and ASP.NET Core 2.0 which performs the complete CRUD operations. If you have any issue just comment below.