Introduction

In this post, I would like to explain Part 2 - How to fetch data from the database using angularjs in MVC4 application.
This is our second Post about AngularJS. Here I have explained a little about AngularJS and What we will learn in this section part by part. In Part1 of this post we configured AngularJS in MVC4 application. In this part (Part 2) I am going to explain how to fetch data from the database using angularjs in MVC4 application.
Here In this example I will use AngularJS $http service. $http is an AngularJS service for reading data from remote servers.

Steps :

Step-1: Add a Database.

Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add.

Step-2: Create table into the database.

Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok.

Step-3: Add Entity Data Model.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.net Entity Data Model under data > Enter model name > Add.
A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.

Step-4: Create a Controller.

Go to Solution Explorer > Right Click on Controllers folder form Solution Explorer > Add > Controller > Enter Controller name > Select Templete "empty MVC Controller"> Add.

Here I have created a controller "DataController"

Step-5: Add new action into your controller for fetch data from Database and return as JsonResult.

Here I have added "GetLastContact" Action into "DataController". Please write this following code

            using System.Linq;
            using System.Web.Mvc;
            namespace MVCWithAngularJs.Controllers
            {
                public class DataController : Controller
                {
                    //
                    // GET: /Data/
                    //For fetch Last Contact
                    public JsonResult GetLastContact()
                    {
                        Contact c = null;
                        //here MyDatabaseEntities our DBContext
                        using (MyDatabaseEntities dc = new MyDatabaseEntities())
                        {
                            c = dc.Contacts.OrderByDescending(a => a.ContactID).Take(1).FirstOrDefault();
                        }
                        return new JsonResult { Data = c, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
                    }
                }
            }

        

Step-6: Add a new js File for add a new AngularJS controller and a Factory

Go to Solution Explorer > Right Click on folder (where you want to saved your AngularJS controller files, here I have created a folder named "AngularController"  under Scripts Folder) > Add > Select Javascript file > Enter name > Add.

Write following code in this file.

            //here I am separating each angular controller to separate file for make it manageable 
            angular.module('MyApp') //extending from previously created angular module in the previous part
            .controller('Part2Controller', function ($scope, ContactService) { //inject ContactService
                $scope.Contact = null;
                ContactService.GetLastContact().then(function (d) {
                    $scope.Contact = d.data; // Success
                }, function () {
                    alert('Failed'); // Failed
                });
            })
            .factory('ContactService', function ($http) { // here I have created a factory which is a populer way to create and configure services
                var fac = {};
                fac.GetLastContact = function () {
                    return $http.get('/Data/GetLastContact');
                }
                return fac;
            });            
        

Step-7: Add new action into your controller for Get the View for show data from database.

Here I have added "Part2" Action into "Home" Controller. Please write this following code

            public ActionResult Part2() // Fetch & Show Database Data
            {
                return View();
            }
        

Step-8: Add view for the Action & design.

Right Click on Action Method (here right click on form action) > Add View... > Enter View Name > Select View Engine (Razor) > Add.
Complete View

            @{
                ViewBag.Title = "Part2";
            }

            <h2>Part2</h2>
            <div ng-controller="Part2Controller">
                <div style="font-weight:bold">
                    Contact Details
                </div>
                <table>
                    <tr>
                        <td>First Name :</td>
                        <td>{{Contact.FirstName}}</td>
                    </tr>
                    <tr>
                        <td>Last Name : </td>
                        <td>{{Contact.LastName}}</td>
                    </tr>
                    <tr>
                        <td>Contact No1:</td>
                        <td>{{Contact.ContactNo1}}</td>
                    </tr>
                    <tr>
                        <td>Contact No2:</td>
                        <td>{{Contact.ContactNo2}}</td>
                    </tr>
                    <tr>
                        <td>Email ID:</td>
                        <td>{{Contact.EmailID}}</td>
                    </tr>
                    <tr>
                        <td>Address</td>
                        <td>{{Contact.Address}}</td>
                    </tr>
                </table>
            </div>

            @section scripts{
                <script src="~/Scripts/AngularController/Part2Controller.js"></script>
            }
        

Step-9: Run Application.