Simple Angular Application - Get started

Welcome to Technical Talks!

Here we are going to see how simply we make an angular app using .Net MVC WebAPI as service and SQL server as a backend.

You will come to know the flow of implementation and live running app.

So in order to get started, lets create a table called 'customers', the script as given below :

Step 1: Create table - customers

CREATE TABLE [customers](

[customer_id] [int] IDENTITY(1,1) NOT NULL,

[first_name] [varchar](255) NOT NULL,

[last_name] [varchar](255) NOT NULL,

[phone] [varchar](25) NULL,

[email] [varchar](255) NOT NULL,

[street] [varchar](255) NULL,

[city] [varchar](50) NULL,

[state] [varchar](25) NULL,

[zip_code] [varchar](5) NULL,

[dob] [date] NULL,

[anniversary] [date] NULL,

PRIMARY KEY CLUSTERED 

(

[customer_id] ASC

)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]

) ON [PRIMARY]

GO

The table looks as shown below.

Step 2: Create WebAPI Service - ASP.Net MVC WebAPI

In order to build the Restful API and use it in our angular app, here we are going to use ADO.Net Entity Framework.

Let's create the WebAPI project - I name this project as 'API' as shown in below screen. 

Add the ADO.Net Entity Data Model in Models folder of the project and provide the database connection and select the customers table from the list to make use of this table for customer data in API.

Please refer the below screen.

Now lets create a controller called - customers selecting entity framwork type as shown below.

In order to add CORS in our WebAPI, please add the below code in your WebApiConfig.cs file under App_Start folder of the project.

            var corsAttr = new EnableCorsAttribute("*", "*", "*");

            config.EnableCors(corsAttr);

so far, we are done with the backend services and now we want to show the data through customers webapi in angular.

Lets move on..