---

Search posts under AngularJS:

---

Single Page Application edit view in AngularJS

How to create edit view of Sinlge Page Application in AngularJS?

In previoust post, we learnt how to create details view and delete record in Single Page Application. In this post, we shall learn how to edit / update record in Single Page Application.

Pre-requisite: It is important to go through previous posts before reading this post to understand this completely.

Single Page Application Edit view - view code

Below code snippet is almost similar to the Create view, however on ng-submit, we are calling Update() function of the respective controller.

<h1>{{Title}}</h1>

<form ng-submit="Update()">
    <div class="form-horizontal">
        <hr />

        <div class="form-group">
            <label class="control-label col-md-2">First Name</label>
            <div class="col-md-10">
                <input type="text" name="FirstName" required class="form-control" ng-model="firstName" />
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2">Last Name</label>
            <div class="col-md-10">
                <input type="text" name="LastName" required class="form-control" ng-model="lastName" />
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-2">Age</label>
            <div class="col-md-10">
                <input type="number" name="Age" required class="form-control" ng-model="age" />
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-2">Active</label>
            <div class="col-md-10">
                <input type="checkbox" name="Active" value="true" ng-model="active" /> Yes
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Update" class="btn btn-default" /> 
                <span class="text-success">{{UpdateMessage}}</span>
            </div>
        </div>
    </div>
</form>
<hr />
<div><a href="#/PD">Back to List</a></div>

Single Page Application Edit view - controller code

// PD - Edit - PersonalDetails controller
app.controller("PDControllerEdit", function ($scope, PDService, $routeParams, $rootScope) {
    $scope.Title = "Edit - Personal Details";
    $scope.RecordToEdit = $routeParams.id; // get the parameter

    $rootScope.loading = true;
    $scope.GetSingle = PDService.GetSingle($routeParams.id).then(function (d) {
        $scope.firstName = d.FirstName;
        $scope.lastName = d.LastName;
        $scope.age = d.Age;
        $scope.active = d.Active;
        $rootScope.loading = false;
    });

    $scope.Update = function () {
        $rootScope.loading = true;
        PDService.Update($scope.RecordToEdit, $scope.firstName, $scope.lastName, $scope.age, $scope.active).then(function (d) {
            $scope.UpdateMessage = d;
            $rootScope.loading = false;
        });
    };
});

In this controller, we have first set the $scope.RecordToEdit property to the value of $routeParams.id, read more about $routeParams in this post. Notice the URL of the browser in the picture above, it is "http://localhost:61275/SPA/#/PD/Edit/5" where :id is 5. $scope.RecordToEdit will be used to retrieve and update the record (this being the primary key in the database for this record).

In the above controller we have two functions

1. GetSingle - Using the $routeParams.id we are getting the single record from the database as we have got in the details view and setting the $scope properties to respective ng-model $scope properties that shows the existing value of that record into the text boxes.
   
   
2. Update - When user clicks on Update, it calls the Update function of the $http service defined as part of this Single Page Application that updates the record into the database and gives update message that is intern set to the $scope property.

In both cases we have set the $scope.loading property to false to hide the "Loading ...." notification message as in the start of the controller we had set it to true.

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