---

Search posts under AngularJS:

---

Single Page Application create view in AngularJS

How to create a Single Page Application view that help us to create a new record into database?

In previous page, we learnt how to create Single Page Application list view page. In this post, we shall learn how to create a view that help us to insert a new record into the database.

When we click on Create new link from the List view described in previous post, we come to this create view.

The output of the create view page looks like below

In create view code below, we have very simple HTML form with ng-submit event set as Create() function of the AngularJS controller. Apart from that we also have a Title expression that gets the value of $scope.Title property.

Create view - View code

<h2>{{Title}}</h2>

<form ng-submit="Create()">
    <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="Create" class="btn btn-default" /> 
                <span class="text-success">{{CreateMessage}}</span>
            </div>
        </div>
    </div>
</form>
<hr />
<div><a href="#/PD">Back to List</a></div>

Create view - controller code

On this view when Create button is clicked the Create() function executes that calls Insert function from the $http service defined that accepts firstName, lastName, age and active parameter and insert record into the database by calling the Web API defined and then returns the status text.

As in case of previous post, here also we fisrt set the $rootScope.loading to true and then false so that when data processing is done, the "Loading ....." notification goes off.

// PD - Create - PersonalDetails controller
app.controller("PDControllerCreate", function ($scope, PDService, $rootScope) {
    $scope.Title = "Create - Personal Details";

    $scope.Create = function () {
        $rootScope.loading = true;
        PDService.Insert($scope.firstName, $scope.lastName, $scope.age, $scope.active).then(function (d) {
            $scope.CreateMessage = d;
            $rootScope.loading = false;
        });
    };
});

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