未加星标

CRUD Operation in Angular 7 using Web API

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2019 | 作者 红领巾 ] 0人收藏点击收藏

In this step by step tutorial, I'm going to perform CRUD operations in an Angular 7 Web application. The backend is a SQL Server databse. A Web API is used to provide data connectivity between the database and the front end application. On the UI side, I will use Angular Material theme to create a rich, interactive and device-independent user experience.

I'm using Visual Studio Code as a tool to build my application. If you don't have Visual studio code in your system then first you have to download and install. Here is Visual Studio Code download link: Download Visual Studio Code Editor

Step 1. Create a database table

Create a database. Open SQL Server and create a new database table. As you can see from the following image, I create a database table called EmployeeDetails with 7 columns.


CRUD Operation in Angular 7 using Web API

Note: If you already have an exisitng database and table, you can skip this step.

Step 2. Create a Web API Project

Now, we will create a Web API with the functionaity of Create, Replace, Update and Delete (CRUD) operations.

Open Visual Studio >> File >> New >> Poject >> SelectWeb Application. After that click OK and you will see the templates. Select Web API template.


CRUD Operation in Angular 7 using Web API

Click OK.

Step 3. Add ADO.NET Entity Data Model

Now, Select Modelsfolder >>Right click>>Add>>New Item>> selectData in left panel >>ADO.NET Entity Data Model,


CRUD Operation in Angular 7 using Web API

Now clickAddbutton then selectEF Designer from database>>Next>> After that give your SQL credentialand select the database where your database table and data is.

ClickAddbutton and select your table and click on Finishbutton.

Step 4. CRUD Operations

Now, we will write code to perform CRUD operation.

Go to theControllerfolder in our API Application and right click >>Add>>Controller>> SelectWeb API 2 Controller-Empty


CRUD Operation in Angular 7 using Web API

Now, we will go to controllerclass and set the routing to make it more user friendlyby writing the below code.

usingSystem; usingSystem.Linq; usingSystem.Web.Http; usingCRUDAPI.Models; namespaceCRUDAPI.Controllers { [RoutePrefix("Api/Employee")] publicclassEmployeeAPIController:ApiController { WebApiDbEntitiesobjEntity=newWebApiDbEntities(); [HttpGet] [Route("AllEmployeeDetails")] publicIQueryable<EmployeeDetail>GetEmaployee() { try { returnobjEntity.EmployeeDetails; } catch(Exception) { throw; } } [HttpGet] [Route("GetEmployeeDetailsById/{employeeId}")] publicIHttpActionResultGetEmaployeeById(stringemployeeId) { EmployeeDetailobjEmp=newEmployeeDetail(); intID=Convert.ToInt32(employeeId); try { objEmp=objEntity.EmployeeDetails.Find(ID); if(objEmp==null) { returnNotFound(); } } catch(Exception) { throw; } returnOk(objEmp); } [HttpPost] [Route("InsertEmployeeDetails")] publicIHttpActionResultPostEmaployee(EmployeeDetaildata) { if(!ModelState.IsValid) { returnBadRequest(ModelState); } try { objEntity.EmployeeDetails.Add(data); objEntity.SaveChanges(); } catch(Exception) { throw; } returnOk(data); } [HttpPut] [Route("UpdateEmployeeDetails")] publicIHttpActionResultPutEmaployeeMaster(EmployeeDetailemployee) { if(!ModelState.IsValid) { returnBadRequest(ModelState); } try { EmployeeDetailobjEmp=newEmployeeDetail(); objEmp=objEntity.EmployeeDetails.Find(employee.EmpId); if(objEmp!=null) { objEmp.EmpName=employee.EmpName; objEmp.Address=employee.Address; objEmp.EmailId=employee.EmailId; objEmp.DateOfBirth=employee.DateOfBirth; objEmp.Gender=employee.Gender; objEmp.PinCode=employee.PinCode; } inti=this.objEntity.SaveChanges(); } catch(Exception) { throw; } returnOk(employee); } [HttpDelete] [Route("DeleteEmployeeDetails")] publicIHttpActionResultDeleteEmaployeeDelete(intid) { //intempId=Convert.ToInt32(id); EmployeeDetailemaployee=objEntity.EmployeeDetails.Find(id); if(emaployee==null) { returnNotFound(); } objEntity.EmployeeDetails.Remove(emaployee); objEntity.SaveChanges(); returnOk(emaployee); } } }

As you may see from the above code, it has functionality to add, replace, update, and delete records to the table.

Step 5. Build UI Application

Now, we create the Web application in Angular 7 that will consume Web API.

First we have to make sure that we have Angular CLI installed.

Open command prompt and type below code and press ENTER:

npm install -g @angular/cli

Now, open Visual Studio Code and create a project.

OpenTERMINALin Visual Studio Code and type the following syntax to create a new project. We name it Angularcrud.

ng new Angularcrud

After that, hit ENTER. It will take a while to create the project.

Once created, the project should loook like this.


CRUD Operation in Angular 7 using Web API

Now, we can create some components to provide the UI.

I'm going to create a new component, Employee.

Go to the TERMINAL and go our angular project location using the following command:

cd projectName


CRUD Operation in Angular 7 using Web API

Now, write the following command that will create a component.

ng g c employee

Press ENTER.

Note: you can use see the component is created.

Step 6. Create a Service


Now, we will create a service.

Open the TERMINALand write the below command:

ng g s employee

Press ENTER and you will see two service files.


CRUD Operation in Angular 7 using Web API

Now, we create a class like model class.

OpenTERMINALand write the below command:

ng g class employee

Now, writeall properties of the Employee class related to an employee that matches with the database.

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:CRUD Operation in Angular 7 using Web API
本站链接:https://www.codesec.net/view/627946.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(16)