Creating CRUD Application with ASP.NET MVC 5, AngularJS, BootStrap 3, and HTML5 - Part 4

Part 4 : Communicating with ASP.NET MVC

In order for AngularJS to get data from any backend server. It needs to use the http service.

Complete Series:
Part 1 – Preparing the Skeleton
Part 2 – Preparing the views of the Contact Page using HTML5, BootStrap 3, and AngularJS
Part 3 : Creating the Back End Using ASP.NET MVC
Part 4 : Communicating with ASP.NET MVC
Part 5 – The Add, Update, and Delete modules

Let's us start by creating the ContactDataService:

1. Create ContactDataService
   Under the App folder, create DataService folder. Create contactDataService.js. This is where we will communicate with back end. We will be needing 2 dependencies, the '$http' that will handle the XHR communication and the '$q' that handles Asynchronous processing.


2. Update contactController.js to pull data from the contactDataService
   If you remember previously, we've just assign values to $scope.contacts just to have data. Get rid of that and change it with the code snippet below.
3. Include the contactDataService.js in the ~/bundles/angularApp.
4. Press Ctrl + F5 and see the output. Right now we don't have any data yet so next we are going to create the Add, Update and Delete functions.

Part 5 – The Add, Update, and Delete modules