Java EE 7 with Angular JS – CRUD, REST, Validations – Part 2

posted by Roberto Cortez on July 22, 2014

This is the promised follow up to the Java EE 7 with Angular JS – Part 1. It took longer than I expect (to find the time to prepare the code and blog post), but it’s finally here!

The Application

The original application in Part 1 it’s only a simple list with pagination and a REST service that feeds the list data.

In this post we’re going to add CRUD (Create, Read, Update, Delete) capabilities, bind REST services to perform these operations on the server side and validate the data.

The Setup

The Setup is the same from Part 1, but here is the list for reference:

The Code

Backend – Java EE 7

The backend does not required many changes. Since we want the ability to create, read, update and delete, we need to add the appropriate methods in the REST service to perform these operations:

package com.cortez.samples.javaee7angular.rest;

import com.cortez.samples.javaee7angular.data.Person;
import com.cortez.samples.javaee7angular.pagination.PaginatedListWrapper;

import javax.ejb.Stateless;
import javax.persistence.EntityManager;
import javax.persistence.PersistenceContext;
import javax.persistence.Query;
import javax.ws.rs.*;
import javax.ws.rs.core.Application;
import javax.ws.rs.core.MediaType;
import java.util.List;

@Stateless
@ApplicationPath("/resources")
@Path("persons")
@Consumes(MediaType.APPLICATION_JSON)
@Produces(MediaType.APPLICATION_JSON)
public class PersonResource extends Application {
    @PersistenceContext
    private EntityManager entityManager;

    private Integer countPersons() {
        Query query = entityManager.createQuery("SELECT COUNT(p.id) FROM Person p");
        return ((Long) query.getSingleResult()).intValue();
    }

    @SuppressWarnings("unchecked")
    private List<Person> findPersons(int startPosition, int maxResults, String sortFields, String sortDirections) {
        Query query = entityManager.createQuery("SELECT p FROM Person p ORDER BY " + sortFields + " " + sortDirections);
        query.setFirstResult(startPosition);
        query.setMaxResults(maxResults);
        return query.getResultList();
    }

    private PaginatedListWrapper<Person> findPersons(PaginatedListWrapper<Person> wrapper) {
        wrapper.setTotalResults(countPersons());
        int start = (wrapper.getCurrentPage() - 1) * wrapper.getPageSize();
        wrapper.setList(findPersons(start,
                                    wrapper.getPageSize(),
                                    wrapper.getSortFields(),
                                    wrapper.getSortDirections()));
        return wrapper;
    }

    @GET
    public PaginatedListWrapper<Person> listPersons(@DefaultValue("1")
                                                    @QueryParam("page")
                                                    Integer page,
                                                    @DefaultValue("id")
                                                    @QueryParam("sortFields")
                                                    String sortFields,
                                                    @DefaultValue("asc")
                                                    @QueryParam("sortDirections")
                                                    String sortDirections) {
        PaginatedListWrapper<Person> paginatedListWrapper = new PaginatedListWrapper<>();
        paginatedListWrapper.setCurrentPage(page);
        paginatedListWrapper.setSortFields(sortFields);
        paginatedListWrapper.setSortDirections(sortDirections);
        paginatedListWrapper.setPageSize(10);
        return findPersons(paginatedListWrapper);
    }

    @GET
    @Path("{id}")
    public Person getPerson( @PathParam("id") Long id) {
        return entityManager.find(Person.class, id);
    }

    @POST
    public Person savePerson(Person person) {
        if (person.getId() == null) {
            Person personToSave = new Person();
            personToSave.setName(person.getName());
            personToSave.setDescription(person.getDescription());
            personToSave.setImageUrl(person.getImageUrl());
            entityManager.persist(person);
        } else {
            Person personToUpdate = getPerson(person.getId());
            personToUpdate.setName(person.getName());
            personToUpdate.setDescription(person.getDescription());
            personToUpdate.setImageUrl(person.getImageUrl());
            person = entityManager.merge(personToUpdate);
        }

        return person;
    }

    @DELETE
    @Path("{id}")
    public void deletePerson(@PathParam("id") Long id) {
        entityManager.remove(getPerson(id));
    }
}

package com.cortez.samples.javaee7angular.rest;

import com.cortez.samples.javaee7angular.data.Person;

import com.cortez.samples.javaee7angular.pagination.PaginatedListWrapper;

import javax.ejb.Stateless;

import javax.persistence.EntityManager;

import javax.persistence.PersistenceContext;

import javax.persistence.Query;

import javax.ws.rs.*;

import javax.ws.rs.core.Application;

import javax.ws.rs.core.MediaType;

import java.util.List;

@Stateless

@ApplicationPath("/resources")

@Path("persons")

@Consumes(MediaType.APPLICATION_JSON)

@Produces(MediaType.APPLICATION_JSON)

public class PersonResource extends Application {

@PersistenceContext

private EntityManager entityManager;

private Integer countPersons() {

Query query = entityManager.createQuery("SELECT COUNT(p.id) FROM Person p");

return ((Long) query.getSingleResult()).intValue();

}

@SuppressWarnings("unchecked")

private List<Person> findPersons(int startPosition, int maxResults, String sortFields, String sortDirections) {

Query query = entityManager.createQuery("SELECT p FROM Person p ORDER BY " + sortFields + " " + sortDirections);

query.setFirstResult(startPosition);

query.setMaxResults(maxResults);

return query.getResultList();

}

private PaginatedListWrapper<Person> findPersons(PaginatedListWrapper<Person> wrapper) {

wrapper.setTotalResults(countPersons());

int start = (wrapper.getCurrentPage() - 1) * wrapper.getPageSize();

wrapper.setList(findPersons(start,

wrapper.getPageSize(),

wrapper.getSortFields(),

wrapper.getSortDirections()));

return wrapper;

}

@GET

public PaginatedListWrapper<Person> listPersons(@DefaultValue("1")

@QueryParam("page")

Integer page,

@DefaultValue("id")

@QueryParam("sortFields")

String sortFields,

@DefaultValue("asc")

@QueryParam("sortDirections")

String sortDirections) {

PaginatedListWrapper<Person> paginatedListWrapper = new PaginatedListWrapper<>();

paginatedListWrapper.setCurrentPage(page);

paginatedListWrapper.setSortFields(sortFields);

paginatedListWrapper.setSortDirections(sortDirections);

paginatedListWrapper.setPageSize(10);

return findPersons(paginatedListWrapper);

}

@GET

@Path("{id}")

public Person getPerson( @PathParam("id") Long id) {

return entityManager.find(Person.class, id);

}

@POST

public Person savePerson(Person person) {

if (person.getId() == null) {

Person personToSave = new Person();

personToSave.setName(person.getName());

personToSave.setDescription(person.getDescription());

personToSave.setImageUrl(person.getImageUrl());

entityManager.persist(person);

} else {

Person personToUpdate = getPerson(person.getId());

personToUpdate.setName(person.getName());

personToUpdate.setDescription(person.getDescription());

personToUpdate.setImageUrl(person.getImageUrl());

person = entityManager.merge(personToUpdate);

}

return person;

}

@DELETE

@Path("{id}")

public void deletePerson(@PathParam("id") Long id) {

entityManager.remove(getPerson(id));

}

The code is exactly as a normal Java POJO, but using the Java EE annotations to enhance the behaviour. @ApplicationPath("/resources") and @Path("persons") will expose the REST service at the url yourdomain/resources/persons (yourdomain will be the host where the application is running). @Consumes(MediaType.APPLICATION_JSON) and @Produces(MediaType.APPLICATION_JSON) accept and format REST request and response as JSON.

For the REST operations:

Annotation / HTTP Method	Java Method	URL	Behaviour
`@GET / GET`	listPersons	http://yourdomain/resources/persons	Returns a paginated list of 10 persons.
`@GET / GET`	getPerson	http://yourdomain/resources/persons/{id}	Returns a Person entity by it’s id.
`@POST / POST`	savePerson	http://yourdomain/resources/persons	Creates or Updates a Person.
`@DELETE / DELETE`	deletePerson	http://yourdomain/resources/persons/{id}	Deletes a Person entity by it’s id.

The url invoked for each operations is very similar. The magic to distinguish which operation needs to be called is defined in the HTTP method itself when the request is submitted. Check HTTP Method definitions.

For getPerson and deletePerson note that we added the annotation @Path("{id}") which defines an optional path to call the service. Since we need to know which object we want to get or delete, we need to indicate the id somehow. This is done in the service url to be called, so if we want to delete the Person with id 1, we would call http://yourdomain/resources/persons/1 with the HTTP method DELETE.

That’s it for the backend stuff. Only 30 lines of code added to the old REST service. I have also added a new property to the Person object, to hold a link to image with the purpose of displaying an avatar of the person.

UI – Angular JS

For the UI part, I’ve decided to split it into 3 sections: the grid, the form and the feedback messages sections, each with its own Angular controller. The grid is mostly the same from Part 1, but it did require some tweaks for the new stuff:

Grid HTML

<!-- Specify a Angular controller script that binds Javascript variables to the grid.-->
<div class="grid" ng-controller="personsListController">
    <div>
        <h3>List Persons</h3>
    </div>

    <!-- Binds the grid component to be displayed. -->
    <div class="gridStyle" ng-grid="gridOptions"></div>

    <!--  Bind the pagination component to be displayed. -->
    <pagination direction-links="true" boundary-links="true"
                total-items="persons.totalResults" items-per-page="persons.pageSize"
                ng-model="persons.currentPage" ng-change="refreshGrid()">
    </pagination>
</div>

<div>

<h3>List Persons</h3>

</div>

<pagination direction-links="true" boundary-links="true"

total-items="persons.totalResults" items-per-page="persons.pageSize"

ng-model="persons.currentPage" ng-change="refreshGrid()">

</pagination>

</div>

Nothing special here. Pretty much the same as Part 1.

Grid Angular Controller

app.controller('personsListController', function ($scope, $rootScope, personService) {
    // Initialize required information: sorting, the first page to show and the grid options.
    $scope.sortInfo = {fields: ['id'], directions: ['asc']};
    $scope.persons = {currentPage: 1};

    $scope.gridOptions = {
        data: 'persons.list',
        useExternalSorting: true,
        sortInfo: $scope.sortInfo,

        columnDefs: [
            { field: 'id', displayName: 'Id' },
            { field: 'name', displayName: 'Name' },
            { field: 'description', displayName: 'Description' },
            { field: '', width: 30, cellTemplate: '<span class="glyphicon glyphicon-remove remove" ng-click="deleteRow(row)"></span>' }
        ],

        multiSelect: false,
        selectedItems: [],
        // Broadcasts an event when a row is selected, to signal the form that it needs to load the row data.
        afterSelectionChange: function (rowItem) {
            if (rowItem.selected) {
                $rootScope.$broadcast('personSelected', $scope.gridOptions.selectedItems[0].id);
            }
        }
    };

    // Refresh the grid, calling the appropriate rest method.
    $scope.refreshGrid = function () {
        var listPersonsArgs = {
            page: $scope.persons.currentPage,
            sortFields: $scope.sortInfo.fields[0],
            sortDirections: $scope.sortInfo.directions[0]
        };

        personService.get(listPersonsArgs, function (data) {
            $scope.persons = data;
        })
    };

    // Broadcast an event when an element in the grid is deleted. No real deletion is perfomed at this point.
    $scope.deleteRow = function (row) {
        $rootScope.$broadcast('deletePerson', row.entity.id);
    };

    // Watch the sortInfo variable. If changes are detected than we need to refresh the grid.
    // This also works for the first page access, since we assign the initial sorting in the initialize section.
    $scope.$watch('sortInfo.fields[0]', function () {
        $scope.refreshGrid();
    }, true);

    // Do something when the grid is sorted.
    // The grid throws the ngGridEventSorted that gets picked up here and assigns the sortInfo to the scope.
    // This will allow to watch the sortInfo in the scope for changed and refresh the grid.
    $scope.$on('ngGridEventSorted', function (event, sortInfo) {
        $scope.sortInfo = sortInfo;
    });

    // Picks the event broadcasted when a person is saved or deleted to refresh the grid elements with the most
    // updated information.
    $scope.$on('refreshGrid', function () {
        $scope.refreshGrid();
    });

    // Picks the event broadcasted when the form is cleared to also clear the grid selection.
    $scope.$on('clear', function () {
        $scope.gridOptions.selectAll(false);
    });
});

app.controller('personsListController', function ($scope, $rootScope, personService) {

// Initialize required information: sorting, the first page to show and the grid options.

$scope.sortInfo = {fields: ['id'], directions: ['asc']};

$scope.persons = {currentPage: 1};

$scope.gridOptions = {

data: 'persons.list',

useExternalSorting: true,

sortInfo: $scope.sortInfo,

columnDefs: [

{ field: 'id', displayName: 'Id' },

{ field: 'name', displayName: 'Name' },

{ field: 'description', displayName: 'Description' },

{ field: '', width: 30, cellTemplate: '<span class="glyphicon glyphicon-remove remove" ng-click="deleteRow(row)"></span>' }

multiSelect: false,

selectedItems: [],

// Broadcasts an event when a row is selected, to signal the form that it needs to load the row data.

afterSelectionChange: function (rowItem) {

if (rowItem.selected) {

$rootScope.$broadcast('personSelected', $scope.gridOptions.selectedItems[0].id);

}

};

// Refresh the grid, calling the appropriate rest method.

$scope.refreshGrid = function () {

var listPersonsArgs = {

page: $scope.persons.currentPage,

sortFields: $scope.sortInfo.fields[0],

sortDirections: $scope.sortInfo.directions[0]

};

personService.get(listPersonsArgs, function (data) {

$scope.persons = data;

})

};

// Broadcast an event when an element in the grid is deleted. No real deletion is perfomed at this point.

$scope.deleteRow = function (row) {

$rootScope.$broadcast('deletePerson', row.entity.id);

};

// Watch the sortInfo variable. If changes are detected than we need to refresh the grid.

// This also works for the first page access, since we assign the initial sorting in the initialize section.

$scope.$watch('sortInfo.fields[0]', function () {

$scope.refreshGrid();

}, true);

// Do something when the grid is sorted.

// The grid throws the ngGridEventSorted that gets picked up here and assigns the sortInfo to the scope.

// This will allow to watch the sortInfo in the scope for changed and refresh the grid.

$scope.$on('ngGridEventSorted', function (event, sortInfo) {

$scope.sortInfo = sortInfo;

});

// Picks the event broadcasted when a person is saved or deleted to refresh the grid elements with the most

// updated information.

$scope.$on('refreshGrid', function () {

$scope.refreshGrid();

});

// Picks the event broadcasted when the form is cleared to also clear the grid selection.

$scope.$on('clear', function () {

$scope.gridOptions.selectAll(false);

});

A few more attributes are required to configure the behaviour of the grid. The important bits are the data: 'persons.list' which binds the grid data to Angular model value $scope.persons, the columnDefs which allow us to model the grid as we see fit. Since I wanted to add an option to delete each row, I needed to add a new cell which call the function deleteRow when you click in cross icon. The afterSelectionChanges function is required to update the form data with the person selected in the grid. You can check other grid options here.

The rest of the code is self-explanatory and there is also a few comments in there. A special note about $rootScope.$broadcast: this is used to dispatch an event to all the other controllers. This is a way to communicate between controllers, since the grid, form and feedback messages have separate controllers. If everything was in only one controller, this was not required and a simple function call would be enough. Another possible solution if we want to keep the multiple controllers, would be to use Angular services. The used approach seems much cleaner since it separates the application concerns and does not require you to implement additional Angular services, but it might be a little harder to debug if needed.

Form HTML

<div class="form" ng-controller="personsFormController">
    <!-- Verify person, if there is no id present, that we are Adding a Person -->
    <div ng-if="person.id == null">
        <h3>Add Person</h3>
    </div>
    <!-- Otherwise it's an Edit -->
    <div ng-if="person.id != null">
        <h3>Edit Person</h3>
    </div>

    <div>
        <!-- Specify the function to be called on submit and disable HTML5 validation, since we're using Angular validation-->
        <form name="personForm" ng-submit="updatePerson()" novalidate>

            <!-- Display an error if the input is invalid and is dirty (only when someone changes the value) -->
            <div class="form-group" ng-class="{'has-error' : personForm.name.$invalid && personForm.name.$dirty}">
                <label for="name">Name:</label>
                <!-- Display a check when the field is valid and was modified -->
                <span ng-class="{'glyphicon glyphicon-ok' : personForm.name.$valid && personForm.name.$dirty}"></span>

                <input id="name" name="name" type="text" class="form-control" maxlength="50"
                       ng-model="person.name"
                       required ng-minlength="2" ng-maxlength="50"/>

                <!-- Validation messages to be displayed on required, minlength and maxlength -->
                <p class="help-block" ng-show="personForm.name.$error.required">Add Name.</p>
                <p class="help-block" ng-show="personForm.name.$error.minlength">Name must be at least 2 characters long.</p>
                <p class="help-block" ng-show="personForm.name.$error.maxlength">Name cannot be longer than 50 characters.</p>
            </div>

            <!-- Display an error if the input is invalid and is dirty (only when someone changes the value) -->
            <div class="form-group" ng-class="{'has-error' : personForm.description.$invalid && personForm.description.$dirty}">
                <label for="description">Description:</label>
                <!-- Display a check when the field is valid and was modified -->
                <span ng-class="{'glyphicon glyphicon-ok' : personForm.description.$valid && personForm.description.$dirty}"></span>

                <input id="description" name="description" type="text" class="form-control" maxlength="100"
                       ng-model="person.description"
                       required ng-minlength="5" ng-maxlength="100"/>

                <!-- Validation messages to be displayed on required, minlength and maxlength -->
                <p class="help-block" ng-show="personForm.description.$error.required">Add Description.</p>
                <p class="help-block" ng-show="personForm.description.$error.minlength">Description must be at least 5 characters long.</p>
                <p class="help-block" ng-show="personForm.description.$error.maxlength">Description cannot be longer than 100 characters.</p>
            </div>

            <!-- Display an error if the input is invalid and is dirty (only when someone changes the value) -->
            <div class="form-group" ng-class="{'has-error' : personForm.imageUrl.$invalid && personForm.imageUrl.$dirty}">
                <label for="imageUrl">Image URL:</label>
                <!-- Display a check when the field is valid and was modified -->
                <span ng-class="{'glyphicon glyphicon-ok' : personForm.imageUrl.$valid && personForm.imageUrl.$dirty}"></span>

                <input id="imageUrl" name="imageUrl" type="url" class="form-control" maxlength="500"
                       ng-model="person.imageUrl"
                       required/>

                <!-- Validation messages to be displayed on required and invalid. Type 'url' makes checks to a proper url format. -->
                <p class="help-block" ng-show="personForm.imageUrl.$error.required">Add Image URL.</p>
                <p class="help-block" ng-show="personForm.imageUrl.$invalid && personForm.imageUrl.$dirty">Invalid Image URL.</p>
            </div>

            <div class="avatar" ng-if="person.imageUrl">
                <img ng-src="{{person.imageUrl}}" width="400" height="250"/>
            </div>

            <!-- Form buttons. The 'Save' button is only enabled when the form is valid. -->
            <div class="buttons">
                <button type="button" class="btn btn-primary" ng-click="clearForm()">Clear</button>
                <button type="submit" class="btn btn-primary" ng-disabled="personForm.$invalid">Save</button>
            </div>
        </form>
    </div>
</div>

<h3>Add Person</h3>

</div>

<h3>Edit Person</h3>

</div>

<div>

<input id="name" name="name" type="text" class="form-control" maxlength="50"

ng-model="person.name"

required ng-minlength="2" ng-maxlength="50"/>

<p class="help-block" ng-show="personForm.name.$error.minlength">Name must be at least 2 characters long.</p>

<p class="help-block" ng-show="personForm.name.$error.maxlength">Name cannot be longer than 50 characters.</p>

</div>

<label for="description">Description:</label>

<input id="description" name="description" type="text" class="form-control" maxlength="100"

ng-model="person.description"

required ng-minlength="5" ng-maxlength="100"/>

<p class="help-block" ng-show="personForm.description.$error.required">Add Description.</p>

<p class="help-block" ng-show="personForm.description.$error.minlength">Description must be at least 5 characters long.</p>

<p class="help-block" ng-show="personForm.description.$error.maxlength">Description cannot be longer than 100 characters.</p>

</div>

<label for="imageUrl">Image URL:</label>

<input id="imageUrl" name="imageUrl" type="url" class="form-control" maxlength="500"

ng-model="person.imageUrl"

required/>

<p class="help-block" ng-show="personForm.imageUrl.$error.required">Add Image URL.</p>

<p class="help-block" ng-show="personForm.imageUrl.$invalid && personForm.imageUrl.$dirty">Invalid Image URL.</p>

</div>

</div>

<button type="button" class="btn btn-primary" ng-click="clearForm()">Clear</button>

</div>

</form>

</div>

Here is the looks:

A lot of codeis for validation purposes, but lets look into this a bit more in detail: each input element binds its value to person.something. This allows to model the data between the HTML and the Javascript controller, so we can write $scope.person.name in our controller to get the value filled in the form input with name, name. To access the data inside the HTML form we use the form name personForm plus the name of the input field.

HTML5 have its own set of validations in the input fields, but we want to use the Angular ones. In that case, we need to disable form validations by using novalidate at the form element. Now, to use Angular validations, we can use a few Angular directives in the input elements. For this very basic form, we only use required, ng-minlength and ng-maxlength, but you can use others. Just look into the documentation.

Angular assigns CSS classes based on the input validation state. To have an idea, these are the possible values:

State	CSS	On
`valid`	ng-valid	When the field is valid.
`invalid`	ng-invalid	When the field is invalid.
`pristine`	ng-pristine	When the field was never touched before.
`dirty`	ng-dirty	When the field is changed.

These CSS classes are empty. You need to create them and assign them styles in an included CSS sheet for the application. Instead, we’re going to use styles from Bootstrap which are very nice. For them to work, a few additional classes need to be applied to the elements. The div element enclosing the input needs the CSS class form-group and the input element needs the CSS class form-control.

To display an invalid input field we add ng-class="{'has-error' : personForm.name.$invalid && personForm.name.$dirty}" to the containing input div. This code evaluates if the name in the personForm is invalid and if it’s dirty. It the condition verifies, then the input is displayed as invalid.

Finally, for the form validation messages we need to verify the $error directive for each of the inputs and types of validations being performed. Just add ng-show="personForm.name.$error.minlength" to an HTML display element with a message to warn the user that the name input field is too short.

Form Angular Controller

// Create a controller with name personsFormController to bind to the form section.
app.controller('personsFormController', function ($scope, $rootScope, personService) {
    // Clears the form. Either by clicking the 'Clear' button in the form, or when a successfull save is performed.
    $scope.clearForm = function () {
        $scope.person = null;
        // For some reason, I was unable to clear field values with type 'url' if the value is invalid.
        // This is a workaroud. Needs proper investigation.
        document.getElementById('imageUrl').value = null;
        // Resets the form validation state.
        $scope.personForm.$setPristine();
        // Broadcast the event to also clear the grid selection.
        $rootScope.$broadcast('clear');
    };

    // Calls the rest method to save a person.
    $scope.updatePerson = function () {
        personService.save($scope.person).$promise.then(
            function () {
                // Broadcast the event to refresh the grid.
                $rootScope.$broadcast('refreshGrid');
                // Broadcast the event to display a save message.
                $rootScope.$broadcast('personSaved');
                $scope.clearForm();
            },
            function () {
                // Broadcast the event for a server error.
                $rootScope.$broadcast('error');
            });
    };

    // Picks up the event broadcasted when the person is selected from the grid and perform the person load by calling
    // the appropiate rest service.
    $scope.$on('personSelected', function (event, id) {
        $scope.person = personService.get({id: id});
    });

    // Picks us the event broadcasted when the person is deleted from the grid and perform the actual person delete by
    // calling the appropiate rest service.
    $scope.$on('deletePerson', function (event, id) {
        personService.delete({id: id}).$promise.then(
            function () {
                // Broadcast the event to refresh the grid.
                $rootScope.$broadcast('refreshGrid');
                // Broadcast the event to display a delete message.
                $rootScope.$broadcast('personDeleted');
                $scope.clearForm();
            },
            function () {
                // Broadcast the event for a server error.
                $rootScope.$broadcast('error');
            });
    });
});

// Create a controller with name personsFormController to bind to the form section.

app.controller('personsFormController', function ($scope, $rootScope, personService) {

// Clears the form. Either by clicking the 'Clear' button in the form, or when a successfull save is performed.

$scope.clearForm = function () {

$scope.person = null;

// For some reason, I was unable to clear field values with type 'url' if the value is invalid.

// This is a workaroud. Needs proper investigation.

document.getElementById('imageUrl').value = null;

// Resets the form validation state.

$scope.personForm.$setPristine();

// Broadcast the event to also clear the grid selection.

$rootScope.$broadcast('clear');

};

// Calls the rest method to save a person.

$scope.updatePerson = function () {

personService.save($scope.person).$promise.then(

function () {

// Broadcast the event to refresh the grid.

$rootScope.$broadcast('refreshGrid');

// Broadcast the event to display a save message.

$rootScope.$broadcast('personSaved');

$scope.clearForm();

function () {

// Broadcast the event for a server error.

$rootScope.$broadcast('error');

});

};

// Picks up the event broadcasted when the person is selected from the grid and perform the person load by calling

// the appropiate rest service.

$scope.$on('personSelected', function (event, id) {

$scope.person = personService.get({id: id});

});

// Picks us the event broadcasted when the person is deleted from the grid and perform the actual person delete by

// calling the appropiate rest service.

$scope.$on('deletePerson', function (event, id) {

personService.delete({id: id}).$promise.then(

function () {

// Broadcast the event to refresh the grid.

$rootScope.$broadcast('refreshGrid');

// Broadcast the event to display a delete message.

$rootScope.$broadcast('personDeleted');

$scope.clearForm();

function () {

// Broadcast the event for a server error.

$rootScope.$broadcast('error');

});

For the form controller, we need the two functions that perform the operations associated with the button Clear and the button Save which are self-explanatory. A quick note: for some reason, Angular does not clear input fields which are in invalid state. I did found a few people complaining about the same problem, but I need to investigate this further. Maybe it’s something I’m doing wrong.

REST services are called using save and delete from the $resource object which already implement the correspondent HTTP methods. Check the documentation. You can get a $resource with the following factory:

// Service that provides persons operations
app.factory('personService', function ($resource) {
    return $resource('resources/persons/:id');
});

// Service that provides persons operations

app.factory('personService', function ($resource) {

return $resource('resources/persons/:id');

});

The rest of the controller code, are functions to pickup the events created by the grid to load the person data in the form and delete the person. This controller also create a few events. If we add or remove persons, the grid needs to be updated so an event is generated requesting the grid to be updated.

Feedback Messages HTML

<!-- Specify a Angular controller script that binds Javascript variables to the feedback messages.-->
<div class="message" ng-controller="alertMessagesController">
    <alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
</div>

<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>

</div>

This is just the top section of the application, to display success or error messages based on save, delete or server error.

Feedback Messages Angular Controller

// Create a controller with name alertMessagesController to bind to the feedback messages section.
app.controller('alertMessagesController', function ($scope) {
    // Picks up the event to display a saved message.
    $scope.$on('personSaved', function () {
        $scope.alerts = [
            { type: 'success', msg: 'Record saved successfully!' }
        ];
    });

    // Picks up the event to display a deleted message.
    $scope.$on('personDeleted', function () {
        $scope.alerts = [
            { type: 'success', msg: 'Record deleted successfully!' }
        ];
    });

    // Picks up the event to display a server error message.
    $scope.$on('error', function () {
        $scope.alerts = [
            { type: 'danger', msg: 'There was a problem in the server!' }
        ];
    });

    $scope.closeAlert = function (index) {
        $scope.alerts.splice(index, 1);
    };
});

// Create a controller with name alertMessagesController to bind to the feedback messages section.

app.controller('alertMessagesController', function ($scope) {

// Picks up the event to display a saved message.

$scope.$on('personSaved', function () {

$scope.alerts = [

{ type: 'success', msg: 'Record saved successfully!' }

];

});

// Picks up the event to display a deleted message.

$scope.$on('personDeleted', function () {

$scope.alerts = [

{ type: 'success', msg: 'Record deleted successfully!' }

];

});

// Picks up the event to display a server error message.

$scope.$on('error', function () {

$scope.alerts = [

{ type: 'danger', msg: 'There was a problem in the server!' }

];

});

$scope.closeAlert = function (index) {

$scope.alerts.splice(index, 1);

};

});

This is the controller that push the messages to the view. Listens to the events created by the grid and the form controllers.

The End Result

Uff.. that was a lot of code and new information. Let’s see the final result:

~~There is also a live version running in http://javaee7-angular.radcortez.cloudbees.net, thanks to Cloudbees. It may take a while to open if the cloud instances is hibernated (because of no usage).~~
Unfortunately, Cloudbees stopped application hosting, but you can try using Codenvy in the following URL: https://codenvy.com/f?id=3qe4qr7mb8i86lpe. Check the post: Codenvy setup to demo applications using Docker: Java EE 7 with Angular.

Resources

You can clone a full working copy from my github repository and deploy it to Wildfly. You can find instructions there to deploy it. Should also work on Glassfish.

Java EE – Angular JS Source

Since I may modify the code in the future, you can download the original source of this post from the release 3.0. In alternative, clone the repo and checkout the tag from release 3.0 with the following command: git checkout 3.0.

Check also:

Final Thoughts

The form validation kicks in right after you start typing. Angular 1.3 will have an on blur property to validate only after loosing focus, but I’m still using Angular 1.2.x.
I have to confess that I found the validation code a bit too verbose. I don’t know if there is a way to simplify it, but you shouldn’t need to add each message validation to each input.
A few things are still lacking here, like parameters sanitisation or server side validation. I’ll cover those in a next blog post.

This was a very long post, actually the longest I’ve wrote on my blog. If you reached this far, thank you so much for your time reading this post. I hope you enjoyed it! Let me know if you have any comments.

Comments ( 50 )

ReplyJoao July 23, 2014
Great post! Been working on some stuff using Angular, but haven’t mixed it with Java yet.
A suggestion for next time: don’t leave the Java imports out of the snippets. I find them useful when reading Java code, maybe some other people do too.

ReplyRoberto Cortez July 23, 2014
Hi João. Thank you so much for your feedback. I’m glad you liked the post. Don’t worry, I can fix this right now. I just added the imports to the Java code.

ReplyJameel Ahamed September 5, 2014
Hi Roberto Cortez, please send angular js frontend and java backend simple application. login controller and full single page application controller example pls send Roberto Cortez.
ReplyJameel Ahamed September 5, 2014
I require an software like tally and I have been develop customer communication form.
In that application Admin want to send remainder message to user (sms) like way2sms.
Once admin collect user number from database and send automatic message through mobile in online application.
Let me know any free URL to update this concept kindly mention that code details (.Net programming language).
ReplyRoberto Cortez September 5, 2014
Hi Jameel,
I’m not sure if I understand what you require. Do you want the code sample from this post? It’s in the post Resources section: https://github.com/radcortez/javaee7-angular
Replyjameel September 6, 2014
I have been develop customer communication form.
In that application Admin want to send remainder message to user (sms) like way2sms.
Once admin collect user number from database and send automatic message through mobile in online application.
Let me know any free URL to update this concept kindly mention that code details (.Net programming language). pls send asp.net sms application pls help….

ReplyRoberto Cortez September 8, 2014
Hi Jameel,
I’m sorry, but I’m not a specialist in .Net. I can recommend you a few people instead. Is that ok?
Cheers,
Roberto

ReplyJameel Ahamed September 9, 2014
Ok….
ReplyJameel Ahamed September 9, 2014
please send point of sale application(POS) using angular js front end and java back end…

ReplyRoberto Cortez September 10, 2014
Hi Jameel,
I think that Java EE 7 with Angular JS – Part 1 and Java EE 7 with Angular JS – CRUD, REST, Validations – Part 2, can help you get started.
Did you had a look?
Cheers,
Roberto

ReplyJameel Ahamed September 11, 2014
Ok thanks. please one help, can you send ERP application and fully accounts maintable application. pls help Roberto.
ReplyDreyk January 17, 2015
Hello,
I don’t see here where it’s the database connection? I’m pretty new in AngularJs and Jersey. How can I connect my database here and change some attributes ?

ReplyRoberto Cortez January 19, 2015
Hi Dreyk,
Thank you for reading my blog.
In fact, the datasource used in the application is the default one from the application server. This uses a new features of Java EE 7 called Default Datasources. You can see additional information here and here.

Replytaysay May 2, 2015
Great work, Radcortez. God bless you loads for caring to share.

ReplyRoberto Cortez May 3, 2015
Thank you for your feedback taysay!

ReplyAnas May 15, 2015
Hello,
Great post, but I want to work with Tomcat 8 and MySQL database. How can I connect my database here ?!

ReplyRoberto Cortez May 21, 2015
Hi Anas,
Thank you! For Tomcat it going to be slightly different, because it doesn’t support Java EE. Have you ever consider moving to TomEE? It’s Tomcat plus Java Enterprise Edition. I can help you set up things there.

ReplyJames May 21, 2015
Hi,
Thanks a lot for these nice tips. It’s great!
Could I know your opinions about angularfaces?
Regards

ReplyRoberto Cortez May 23, 2015
Hi James,
Thank you for your feedback. Unfortunately I’ve never used angularfaces before, so I can’t really have an opinion about it. I’m sorry I couldn’t help.
Cheers,

Replymnpoonia June 26, 2015
Thanks for the wonderful post. I am stuck with image url link. Not able to save a new record because of that. How to provide a image link for avatar?

Replymnpoonia June 26, 2015
I mean can’t we give local image url for that?

ReplyRoberto Cortez June 30, 2015
Hi mnpoonia,
Thank you so much for your feedback.
Currently it doesn’t support local images, because I had no time to do it when I was working on the code. Wouldn’t you consider to implement it and submit a pull request? 🙂

ReplyAmsidh Lokhande September 7, 2015
Thanks Roberto Cortez,
This code and your earlier code part 1 helps me lot to understand angularjs very well. The back end part I converted to Spring Rest Controller and connected to my won database through hibernate and it is working fine.Thanks a lot posting such blogs on internet and helping others to understand the new technology like angaularjs.

ReplyRoberto Cortez September 8, 2015
Hi Amsidh,
Thank you very much for your comment and your feedback.
I’m very happy that my post helped you. How about sharing your work with us? 🙂
Cheers,
Roberto

ReplySteve B September 16, 2015
Thanks for such a useful and relevant post! I was hoping to see the running example (to help me debug some errors I am getting in the Angular code). When I click your link to http://javaee7-angular.radcortez.cloudbees.net, I get a server error. Is this service discontinued or has the Url changed? Is there anywhere else I can see your fine code in action?
Thank You,
Steve B.

ReplySteve B September 18, 2015
…further…I especially am trying to identify what versions of the .js and .css libraries you are using in the of the index.html? The bower-install does not work on my windows, and I do not know anything about npm, bower, or grunt to debug why that is failing. I really just need to figure out these libraries.
Thanks Again!

ReplyRoberto Cortez September 23, 2015

Hi Steve,

This should be what you are looking for:

<head>
    <title>javaee7-angular</title>

    <!-- build:css css/third-party.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="lib/dependencies/css/bootstrap.min.css" />
    <link rel="stylesheet" href="lib/dependencies/css/ng-grid.min.css" />
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:css css/application.css -->
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <!-- endbuild -->

    <!-- build:js lib/third-party.js -->
    <!-- bower:js -->
    <script src="lib/dependencies/jquery.min.js"></script>
    <script src="lib/dependencies/angular.min.js"></script>
    <script src="lib/dependencies/angular-resource.min.js"></script>
    <script src="lib/dependencies/ng-grid-2.0.11.min.js"></script>
    <script src="lib/dependencies/ui-bootstrap-tpls.min.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:js script/all.js -->
    <script src="script/person.js"></script>
    <!-- endbuild -->
</head>

<head>

<title>javaee7-angular</title>

</head>

If you are using the latest version of the sample, which you should be, you don’t need to worry about Bower, NPM or Grunt. They are just used to update stuff if needed, but all the files should be in the repo for the sample to work.

Let me know if you have any problem.

Cheers,
Roberto

ReplyRoberto Cortez September 23, 2015
Hi Steve,
Thank you for the feedback. Unfortunately Cloudbees.net stopped offering the hosting so the url doesn’t work anymore. I’ll update the post. In the meanwhile, you can try the sample here:
https://codenvy.com/f?id=3qe4qr7mb8i86lpe
Cheers,
Roberto

Replysam October 30, 2015
Hi Cortez,
I am storing a image in the DB as a blob. How could I show this image in the UI when i load the particular image. any suggestions.
Thanks in adavnce.

ReplyRoberto Cortez November 2, 2015
Hi Sam,
Here is the answer to your question:
http://stackoverflow.com/questions/2340406/how-to-retrieve-and-display-images-from-a-database-in-a-jsp-page
Cheers,
Roberto

ReplyLucas November 2, 2015
How i can run this project ?
i trying with
Java EE Luna

ReplyRoberto Cortez November 2, 2015
Hi Lucas,
I’m not very familiar with Eclipse IDE, but it should work just by importing the pom.xml file from the project.
Cheers,
Roberto

ReplyLucas November 2, 2015
# Java EE 7 – Angular – Sample Application #
## How to run ? ##
….
* Run the command ‘grunt’ to download all the web dependencies and build an optimized version of the project.
Hello Again, i have problem at run this command:
“Stack trace:
TypeError: Arguments to path.join must be strings
at Object.win32.join (path.js:233:13)”
Any idea ? ( i see some fix, but anyone work, sorry for my english).
Thknx for help 😀

ReplyRoberto Cortez November 4, 2015
Hi Lucas,
I suspect that this might be related with the node version. Which one are you using?

ReplyDmitry Smirnov April 15, 2016
Hi Roberto.
Just’ve stuck in the same problem for an hour. It is worth to mention this problem and point that is solved in master branch.
Reader probably will try code which match the article, and will stuck with versions problem.
Thanks for fixing in the master version and for using angular-grid istead of old ng-grid.

ReplyRoberto Cortez April 21, 2016
Thank you for your feedback Dmitry.
I guess I’ll have to review all posts and update them to match master.
Cheers,
Roberto

ReplyDmitry Smirnov March 4, 2016
Hi, Roberto! Thank you for excellent intro to angular for java developer. Probably the best tutorial I could find for this topic.

ReplyRoberto Cortez March 13, 2016
Hi Dmitry,
Thank you very much for reading and for your feedback.
Cheers,
Roberto

ReplyLarslemos March 16, 2016
Thank you for this wonderful post.
I used in JUG Hyderabad to give a AngularJS for Java Developers and they loved it.
Keep up the good work

ReplyRoberto Cortez March 21, 2016
Hi Larslemos,
Thank you very much for your comment and I’m glad that my work could help you.
Cheers,
Roberto

Replyfrancoj22 March 31, 2016
Hi , first thanks so much .
I tried to run the example given the url
and i got this error. Any idea. I tried in a different computer as well.
Unable to retrieve the resources from the runner.: {“message”:”Run action for this workspace is locked”}

ReplyRoberto Cortez March 31, 2016
Hi Fraco,
I think the account might have run out of free memory resources to run the container. I’ll have a look.
Thanks!

ReplyLucas De Cól April 14, 2016
Hello, i have this error, any idea ? .
C:\Users\Lucas De Cól\git\javaee7-angular>mvn clean install
[INFO] Scanning for projects…
[INFO]
[INFO] ————————————————————————
[INFO] Building javaee7-angular 3.6
[INFO] ————————————————————————
[INFO]
[INFO] — maven-clean-plugin:2.5:clean (default-clean) @ javaee7-angular —
Downloading: https://repo.maven.apache.org/maven2/org/apache/maven/maven-plugin-api/2.0.6/maven-plugin-api-2.0.6.jar
[INFO] ————————————————————————
[INFO] BUILD FAILURE
[INFO] ————————————————————————
[INFO] Total time: 1.366 s
[INFO] Finished at: 2016-04-13T23:35:22-03:00
[INFO] Final Memory: 6M/16M
[INFO] ————————————————————————
[ERROR] Failed to execute goal org.apache.maven.plugins:maven-clean-plugin:2.5:clean (default-clean) on project javaee7-angular: Execution default-clean of goal org.apache.maven.plugins:maven-clean-plugin:2.5:clean failed: Plugin org.apache.maven.plugins:maven-clean-plugin:2.5 or one of its dependencies could not be resolved: Could not transfer artifact org.apache.maven:maven-plugin-api:jar:2.0.6 from/to central (https://repo.maven.apache.org/maven2): repo.maven.apache.org: Unknown host repo.maven.apache.org -> [Help 1]
[ERROR]
[ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
[ERROR] Re-run Maven using the -X switch to enable full debug logging.
[ERROR]
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/PluginResolutionException

ReplyRoberto Cortez April 21, 2016
Hi Lucas,
Thanks for reading!
Looking into your log, I’ve noticed: “Unknown host repo.maven.apache.org”
Seems that you are not able to reach the Maven repo from your machine? Can you try to access the address http://repo.maven.apache.org/maven2/ with a web browser? If you can’t, there a connectivity problem somewhere. Might be a firewall issue. You need to be able to access the repo to download the required libraries.
Cheers,
Roberto

Replynani September 9, 2016
Hi Roberto Cortez,
this is nani from india . Thank you for excellent intro to angular for java developer. can you help me . plz send me sample ERP(min three module, like profile, tranction,batch) project java,angularjs,mysql, using eclipse IDE ,tomcat server .

ReplyRoberto Cortez December 1, 2017
Hi nani,
Thank you. I’m happy to help if you need something, but at this time I’m unable to do it.
Cheers,

Replyyair October 20, 2016
thank you very much Roberto, there is something that still can not understand, How is it that relates to or communicates the js with methods java?.
Again thank you very much.

ReplyRoberto Cortez December 1, 2017
It’s uses HTTP Rest. Java exposes the services as REST and JS is able to call them through HTTP, by doing a regular call. You can try opening up in your browser direct links from the HTTP Rest so you can see their response.

ReplyImran Shaikh February 3, 2017
Hi Roberto Cortez,
You posts are awesome.
I helped me alot.
Thanks for such wonderfull posts.

ReplyRoberto Cortez December 1, 2017
Thank you for the feedback 🙂

Roberto Cortez Java Blog

Java EE 7 with Angular JS – CRUD, REST, Validations – Part 2

The Application

The Setup

The Code

Backend – Java EE 7

UI – Angular JS

The End Result

Resources

Final Thoughts

Comments ( 50 )

Leave a Reply to Roberto Cortez Cancel reply