Basic CRUD Application Using Spring Boot REST Web Service with AngularJS

In my previous blog, we learned about how easy to develop RESTful Web Service with Spring Boot. Now we are focusing only on front-end. Today we learn about how to consume RESTful Web Service using AngularJS.

We also use thymleaf for Page Template and Bootstrap for some styling purpose. Here is the final look of our Basic AngularJS CRUD Application.

Final Look of AngularJS CRUD Application

Here is the project structure which extends from previous one.

Project Structure

Now Fisrt create an Index.html file as shown above.

Index.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"

   xmlns:th="http://www.thymeleaf.org"

   xmlns:layout="http://www.w3.org/1999/xhtml">
<head th:replace="fragments/header :: head"></head>

<body ng-app="app" ng-controller="appController">
    <div class="container">
        <th:block th:replace="fragments/app :: app-header"></th:block>
        <div class="row app-container">
            <div class="col-md-4">
                <form>
                    <div class="form-group">
                        <label for="stdId">ID</label>
                        <input type="number" class="form-control"                                id="stdId"                                placeholder="Student ID"                                ng-model="formModel.id">
                    </div>
                    <div class="form-group">
                        <label for="firstName">First Name</label>
                        <input type="text" class="form-control"                               id="firstName"                               placeholder="First Name"                               ng-model="formModel.firstName">
                    </div>
                    <div class="form-group">
                        <label for="lastName">Last Name</label>
                        <input type="text" class="form-control"                               id="lastName"                               placeholder="Last Name"                               ng-model="formModel.lastName">
                    </div>
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" class="form-control"                               id="email"                               placeholder="student@email.com"                               ng-model="formModel.email">
                    </div>
                    <div class="form-group">
                        <label for="date">Registration Date</label>
                        <input type="text" class="form-control"                               id="date"                               datetime="yyyy-MM-dd HH:mm:ss"                               placeholder="yyyy-MM-dd"                               ng-model="formModel.regDate">
                    </div>
                    <div class="form-group">
                        <button class="btn" ng-click="new()">New</button>
                        <button class="btn btn-success"

                                ng-click="save(formModel)">Save</button>
                        <button class="btn btn-primary"

                                ng-click="update(formModel)">Update</button>
                        <button class="btn btn-danger"

                                ng-click="delete(formModel)">Delete</button>
                    </div>
                </form>
            </div>
            <div class="col-md-8">
                <table class="table table-bordered">
                    <thead class="grid-header">
                        <th>ID</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Email</th>
                        <th>Reg. Date</th>
                    </thead>
                    <tbody class="grid-rows">
                        <tr class="pointer"

                            id="{{model.id}}"

                            ng-repeat="model in gridModel"

                            ng-click="bindGridModelToForm(model)">
                                <td>{{model.id}}</td>
                                <td>{{model.firstName}}</td>
                                <td>{{model.lastName}}</td>
                                <td>{{model.email}}</td>
                                <td>{{model.regDate}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <th:block th:replace="fragments/app :: app-footer"></th:block>
    </div>
</body>
</html>

Now create two fragments header.html and app.html files as shown above.

header.html

<head th:fragment="head" xmlns:th="http://www.w3.org/1999/xhtml">
    <meta charset="UTF-8"          name="viewport"          content="width=device-width, initial-scale=1"          http-equiv="Content-Type">
    <script

       src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">

    </script>
    <script

      src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">

    </script>
    <link

      rel="stylesheet"

      type="text/css"

      href="https://bootswatch.com/4/cerulean/bootstrap.min.css" />
    <script th:src="@{/angular.min.js}"></script>
    <script th:src="@{/app.js}"></script>
    <script th:src="@{/appController.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/app.css}"/>
    <title>Spring Boot CRUD Application with AngularJS</title>
</head>

app.html

<div th:fragment="app-header"

     xmlns:th="http://www.w3.org/1999/xhtml"

  class="row app-header">
    <div class="col-lg-12">
        <p>Basic CRUD Application Using Spring Boot REST Web Service with AngularJS</p>
    </div>
</div>

<div th:fragment="app-footer" xmlns:th="http://www.w3.org/1999/xhtml" class="row app-footer">
    <div class="col-lg-12">
        <p>Powered By TZN LAB</p>
    </div>
</div>

Now add the AngularJS Controller in our Application.

app.js

var app = angular.module('app',[]);

appController.js


app.controller('appController', function($scope, $http) {

    $scope.formModel = {};  // Form Model.    
    $scope.gridModel = {};  // Grid Model.
    // Get all students on page load.    
    $http.get("http://localhost:8080/students")
        .then(function (response) {
            $scope.gridModel = response.data;
        });

    // For reload Grid Data after save, update or delete.    
    $scope.reloadData = function(){
        $http.get("http://localhost:8080/students")
            .then(function (response) {
                $scope.gridModel = response.data;
            });
    };

    // For Binding Selected Grid Model to the Form.    
    $scope.bindGridModelToForm = function(model) {
        $scope.formModel = model;
        angular.element('.pointer').removeClass('active-row');
        angular.element('#'+ model.id).addClass('active-row');
    };

    // For New Record.    $scope.new = function(){
        $scope.formModel = {};
    };

    // For Save New Record. After Successful Save Fetch All Records for Updated Data.    
    $scope.save = function(model){
        $http.post('http://localhost:8080/student', JSON.stringify(model))
            .then(function (success) {
                console.log(success);
                $scope.reloadData();
            }, function (error) {
                console.error(error.data);
            });

    };

    // For Update the Existing Record.    $scope.update = function(model){
        $http.put('http://localhost:8080/student', JSON.stringify(model))
            .then(function (success) {
                console.log(success);
                $scope.reloadData();
            }, function (error) {
                console.error(error.data);
            });


    };

    // For Delete the Selected Record.    $scope.delete = function(model){
        $http.delete('http://localhost:8080/student/' + model.id)
            .then(function (success) {
                console.log(success);
                $scope.reloadData();
            }, function (error) {
                console.error(error.data);
            });

    };
});


At the end add some styling to our Application.


app.css


.pointer{
    cursor: pointer;
}

.app-header{
    background-color: darkturquoise;
    text-align: center;
    color: azure;
    font-size: larger;
}

.app-footer{
    background-color: darkturquoise;
    text-align: center;
    color: azure;
    font-size: x-small;
}

.app-container{
    background-color: azure;
    padding: 10px;
}

.grid-header{
    background-color: darkturquoise;
    color: azure;
}

.grid-rows{
    background-color: white;
}

.active-row{
    background-color: aliceblue;
}



If you want some more about Spring boot and AngularJS then comment below.

Happy New Year In Advance to all of you.

Search This Blog

Spring Boot By TZN LAB