---

Search posts under AngularJS:

---

Single Page Application list view page in AngularJS

How to list the records from database in Single Page Application using AngularJS?

In previous post, we learnt how to create Single Page Application view pages (main pages) where we have created view for About, Contact and Home pages.

Pre-requisite: One must go through all previous posts before reading this post to understand all depdencies completely.

In this post, let's create a Singe Page Application view page that lists records from the database. Here we are going to see the view page that exists at ~/SPA/PD/index.html

Single Page Application List records view

Copy-paste below code into ~/SPA/PD/index.html page. This page writes the value of the Title property and creates a HTML table with heading and use ng-repeat directive to list records from PersnalDetails property of it's controller.

Single Page Application list - view code

<h1>{{Title}}</h1>
<a href="#/PD/Create" title="Create new record">Create new</a>
<table class="table table-striped table-responsive">
    <tr>
        <th>First Name</th><th>Last Name</th><th>Age</th><th>Active</th><th></th>
    </tr>
    <tr ng-repeat="d in PersonalDetails">
        <td>{{d.FirstName}}</td><td>{{d.LastName}}</td><td>{{d.Age}}</td><td>{{d.Active}}</td>
        <th><a href="#/PD/Edit/{{d.AutoId}}">Edit</a> | <a href="#/PD/Details/{{d.AutoId}}">Details</a></th>
    </tr>
</table>

Single Page Application list view - controller code

// PD - Index - PersonalDetails controller
app.controller("PDController", function ($scope, PDService, $rootScope) {
    $scope.Title = "Personal Details List";
    $rootScope.loading = true;
    $scope.GetPersonalDetails = PDService.GetAll().then(function (d) {
        $scope.PersonalDetails = d;
        $rootScope.loading = false;
    });
});

When user clicks on Personal Details menu at the top of the page, http-route module sets the templateUrl property to /SPA/PD/index.html and controller to PDController as defined above. The content of index.html gets set in place of <div ng-view></div> of ~/SPA/index.html as described here and the PDController executes.

In the controller code, we have first set the Title and then $rootScope.loading property to true so that "Loading ....." notification div will start showing. After that we are calling GetAll() method of the $http CRUD service defined as part of this Single Page Application that loads all data from the database coming with the help of Web API and sets to the $scope.PersonalDetails property. After that sets the $rootScope.loading property to false so that the "Loading ...." notification hides.

Notice that as soon as the page loads the GetAll() function of the service will be called as we are not calling it inside the function.

Feel free to download the source code from home page of Single Page Application step by step tutorials and use it.