Angular 08 - How to create Angular CRUD operations with web API (Part A)

How to create Angular CRUD operations with web API

Today we are going to build a  application using and Angular with web API to add ,delete and update employee details . 

Step 01 - Create a project using visual studio


First we should create a Microsoft Visual Studio Project to develop the web API.
when you are creating new project follow below steps.

  • File →  New  →  Project  →  AP.Net.Web Application → Give a name and location (webapi)  → select "ok"→ select "web API" → select "ok".

Step 02 - Create database and tables in SQL


After that we can create database using Microsoft Server Management Studio.Follow below steps to create a database.

Create Database

  • Database →New Database → give a name to database (EmployeeDB) → Select "ok".
  • Now you can see the database which we created under database node.
Create Table 
  • Table → New Table → give a name to table.(Employee)
Step 03

Create model

Lets create entity model in API for above table.Follow blow steps to to create entity model.

Solution Explorer → Models → Add → New Item → Select Data from left panel → ADD.Net Entity Data Model → Name the model(DB Models) → Add → Select EF Designer from Data → Next → New connection → give server name(localhost) → select Database(Employee DB) → put a class name to connection settings(DB Model) → next → select Entity Framework 6.x.→ Next →select the database object which should be included in the entity model → Finish.

after above steps you will get entity model as below images.





  • re build the solution before tart creating the controller.


 Step 04

Create Controller

Controllers → Add → Controller → web API 2 controller with actions, using Entity Framework → select Model Class(Employee)  and Data Context Class → Name the controller



  • now go to view and click  view on a browser. It will show this one port.


  • WebAPI and Angular project are running on different ports.To avoid that follow following steps.
          Tools  → NuGet Package Manager  →Package Manager Console  → type " Install-Package Microsoft.AspNet.WebApi.Cors" in console.

  • After that open the WebApi Config file in the App_start.
  • Type following to Enable CORS and put web address of the angular application.


  • After that build the project again.
In next post i will explain how to do changes in Angular application to connect the Web API and database .

Comments

Post a Comment

Popular posts from this blog

Angular 6 - Data Binding Part 2

Image
 Data Binding - 2 Event Binding Event binding used to build interactive angular applications with the flow of data from component to the element and from element to component . Event binding syntax will have a target event name within parentheses on the left of an equal sign, and a quoted template statement on the right. Eg 1: In this example I used a button to demonstrate the event binding. In here we are binding an onClick() event to the button element. When the user clicks on the button, event binding listens to the button's click event and calls the component's onClick() method in component.ts file. Eg:2  . In here there is  a method named "onUpdateServerName" and add an event with it.
Read more

Machine Learning

Image
Machine Learning  What is  Machine Learning? "Machine learning is the scientific study of algorithms and statistical models that computer systems use to effectively perform a specific task without using explicit instructions, relying on patterns and inference instead. It is seen as a subset of artificial intelligence." In traditional programming, we feed a set of instructions for a defined set of scenarios to the computer. Then the computer will utilize its computing capabilities to help human process the data efficiently. In machine learning, a large amount of data is input into the computer. Then computer processes all the data and comes up with a trained model(solution). After this model is used to solve the unseen problems of the real world. Applications of  Machine Learning Machine Learning has started growing fast because nowadays we have less expensive computational power and lots of data which we can use the train our models. Therefore Machin
Read more

Selenium - 1

Image
Selenium   Selenium is a very popular name in the software testing field which is known as an automation testing tool.  Mainly selenium uses to automate the testing of various web browsers. It supports many browsers such as, Chrome Mozilla Firefox Safari IE Advantages of Selenium Selenium is an open-source tool. Selenium supports various programming languages to write Test scripts such as, java C# Perl Python PHP Ruby It supports various operating systems, MS Windows Linux Macintosh Selenium uses less Hardware resources. Selenium supports Parallel Test Execution. Disadvantages of Selenium 1) No reliable Technical Support from anybody. (Since It is Open Source software nobody provides reliable technical support, if it is UFT/QTP Vendor (HP) provides Technical Support) 2) It supports Web-based applications only. (Selenium automates Web browsers only, using Selenium we can automate Computer Web Applications and Mobile Web Apps, but Selenium doesn’t support Computer Desktop Applications, M
Read more