Creating your first SPA Application using AngularJS and WebAPI – All CRUD Operations

By | December 4, 2015

Practical AngularJs Tutorial

SPA is an application which is built in a single page to give user much rich windows application experience and impressively increases performance of the website.

In this ASP.NET Web API Tutorial, we are going to learn How to create a ASP.NET Web API Application and use it in a SPA AngularJS page in the same project? Technologies being used in this web development tutorial are:

  • AngularJS
  • Bootstrap

Followings are the tools and IDE used for this project:

  • Visual Studio 2012 Update 2 or beyond.
  • Localdb in Visual Studio.

Microsoft ASP.NET Web API framework is the best choice for developing HTTP services in more simpler way. It enables us to reach more wider ranger of clients such as browsers as well as mobile devices. In order to understand more about the technology, you can read “Practical Guide to ASP.NET Web API” that is a practical way to learn about Web API.ASP.NET Web API

This AngularJS and Web API Tutorial is not including testing of the project. This article will introduce you to explain how we can use ASP.NET Web API in AngularJS.

If you further interested to enhance your AngularJs Skills, you can follow the Advanced AngularJS Interview Questions list that explains the key concepts and provide extensive source code for developer understanding.

What is Single Page Application(SPA)?

Single Page Application (SPA) is a web application which enhances the User Experience by using HTML5 and AJAX. As the below comparison of SPA and Traditional Page Lifecycle, we can easily understand that SPA avoids one extra postback/reload by sending an AJAX request and receiving JSON as response.SPA Vs Traditional Page Lifecycle

Step by Step Approach to Create a SPA Application using AngularJS and ASP.NET Web API

Now, we will follow a step by step approach for creating a SPA Application performing all CRUD (Create, Retrieve, Update, Delete) operations.

Step 1: Create a new “ASP.NET Web Application” in Visual Studio 2013 or above, name it as “Students” and press OK button as below.SPA Application using AngularJS and Web API

Next dialog box asks for selecting the template. Please select the Project Template to be MVC and uncheck the Windows Azure web publish Option (i.e. Host in the cloud) and press OK.ASP.NET MVC & Web API Application
A new solution for ASP.NET Web Application will be created in Visual Studio.

Step 2: In the App_Start folder create a Local Database named “Students“. So, right-click on App_Start and choose “Add -> New Item”.Local Db SPA ApplicationChoose “Data” from left and select “SQL Server Database” and name it “Students.mdf” as below and press “Add” button.
Single Page Application Database
Step 3: Now we have our Database ready, and it’s time to create students table in the database, let’s create a students table in that Database.
Create Db in Visual Studio 2013
Database Table in Visual Studio 2013So, we have successfully created a “Students” table with fields as Id, StudentName, StudentRollNo, StudentDepartment, StudentbatchNo, StudentYear etc. In order to keep things simple, we have taken most of the fields as text fields except the Id.

Step 4: Now its time to create an “ADO.NET Entity Data Model”. This will create an Entity framework Database Context to work on for accessing the Database.

These are the 5 steps to create an “ADO.NET Entity Data Model”.

  1. Select add new item in Models folder to add an “ADO.NET Entity Data Model”.ADO.NET Entity Data Model
  2. Select “ADO.NET Entity Data Model” and name it as StudentsDB.EDM for SPA Application
  3. Select the option EF Designer From Database (This option lets the configuration knows that we want to use Entity Framework SQL client here).

    Here in this Web API Tutorial, we are using EF Designer From Database option, but if you are interested to learn more about Model-First Approach, please follow other web development tutorial “Understanding Model-First Approach in MVC5 with EF6“.

    EDM Wizard in Visual Studio 2013

  4. Select the database that we created.Connection String in Visual Studio 2013
  5. Now the final step to add the tables in the Database to the Database Context of “ADO.NET Entity Data Model”.Db Objects and Entity Framework

Step 5: Now Build the project and Create a Web API Controller with Scaffolding using the local database “Students” class and the DB Context that we just created:

  1. Add a New Item in the controllers section:ASP.NET MVC Controller
  2. Select “WEB API 2 Controller with actions, using Entity Framework”:Web API 2 Controller using Entity Framework
  3. Select the Student’s Entity and Students Model for Scaffolding process and name the controller as StudentsAPIController.Controller in ASP.NET Web API

Step 6: Confirm that you have WebApiConfig to define API URL Routing as below:WebAPIConfig for Web API SPA Application

Note: If you are not very much familiar with Routing in ASP.NET MVC and Web API Application, please follow here.

Step 7: Make sure your Web API routing and Bundling are defined in the Global.asax as:Global.ascx Settings in ASP.NET Web API Application
Step 8: Add the AngularJS Nuget Package to our project:AngularJS Nuget Package in Visual Studio 2013

We will notice some new scripts are present in the script folder related to AngularJS.

Step 9: Let’s create a folder in scripts as “MyScripts” and add three more script files for our Students Module, Named as:

  • Module.js
  • Service.js
  • Controller.js

AngularJS Scripts for SPANow I will share the Module, Service and Controller of AngularJS with you.

Let’s start with Module.js. Below is the content of Module.js:

Here we have created the Students Module in Angularjs

Further, I have described the AngularJS Student Service module that I have created for accessing the Web API. Now let me show you the service I created for accessing the ASP.NET Web API of the project:

Below is the content of Service.js:

Now I would like to show you the Angular students controller for the events on the page:
Below is the content of Controller.js

Step 10: Now lets create an empty Student controller for the only page view of our single page application:ASP.NET MVC Controller in Microsoft Visual Studio

Step 11: I have done some textual modification of the Shared Layout view.
The new layout is:AngularJS Modules
This is mainly textual changes and adding the angular script files.

Step 12: Now let’s add the students view within the index action and bind it with bootstrap, I have used bootstrap designing in this. Let me share the HTML of the Students Page:


Step 13 : Since it’s a Single Page Application you should probably select Students Controller and Index method as your default page:

RouteConfig for SPA Application

Congratulations!!! Now our website should be ready, Lets try building and running the page and we will see a view like this.Single Page Application using AngularJS

Learning Angularjs (especially the latest version of it i.e. angular 4) will definitely gives a boost to your career because the demand for angularjs in the market is increasing at a tremendous pace. Below you can find that how the demand of Angularjs developer increased at amazing speed as compared to other JavaScript technologies like ReactJs, BackboneJS and EmberJs and it’s increasing more as angular4 has come with much more maturity. Get More details here.

Indeed Job Trends
Hopefully, this Angularjs tutorial will be helpful for reader in creating his/her First Single Page Application using AngularJS and Web API with all CRUD Operations. Complete source code for the given article will be available soon.