---

Search posts under AngularJS:

---

Single Page Application details view in AngularJS

How to create Single Page Application details view in AngluarJS?

In previous post, we learnt how to create a Single Page Application view to insert a record into the database. In this post, we shall learn how to create a view that will help us to show the details of a record and also how to delete a record from the database.

When user clicks on the Details link against a record from the list view page, below view shows.

Single Page Application details view - view code

<h1>{{Title}}</h1>
<dl>
    <dd>First name:</dd>
    <dt>{{Person.FirstName}}</dt>

    <dd>Last name:</dd>
    <dt>{{Person.LastName}}</dt>

    <dd>Age:</dd>
    <dt>{{Person.Age}}</dt>

    <dd>Active:</dd>
    <dt>{{Person.Active}}</dt>
</dl>

<hr />
<a href="#/PD/Edit/{{Person.AutoId}}">Edit</a> | <a href="#/PD">Back to List</a> | <a href="#/PD/Create" title="Create new record">Create new</a> | 
<a class="btn btn-danger" href="javascript:void(0)" ng-click="Delete()">Delete</a> <span class="text-danger">{{DeleteMessage}}</span>

This view simply gets the value from the $scope and writes it on the page and creates few links that navigates to list pages, Create new pages and help us to Delete record from the database.

Single Page Application details view - Controller code

// PD - Details/Delete - PersonalDetails controller
app.controller("PDControllerDetails", function ($scope, PDService, $routeParams, $rootScope) {
    $scope.Title = "Details - Personal Details";
    $rootScope.loading = true;

    $scope.GetSingle = PDService.GetSingle($routeParams.id).then(function (d) {
        $scope.Person = d;
        $rootScope.loading = false;
    });
    
    $scope.Delete = function () {
        var v = confirm('Are you sure to delete?');
        if (v) {
            $rootScope.loading = true;
            PDService.Remove($routeParams.id).then(function (d) {
                $scope.DeleteMessage = d;
                $rootScope.loading = false;
            });
        }
    };
});

In the controller code above, we have declared two functions,

1. GetSingle - this function calls GetSingle() function of the $http service declared as part of this Single Page Application and set the $scope.Person property to returned object.
   
   
2. Delete - this function first asks for confirmation from the user and calls the Remove function of the $http service declared as part of this Single Page Application and set the delete message.

In both cases, it sets the $scope.loading property to false so that the "Loading ....." notification goes off as we have set it to true in the beginning of the controller.

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