带有Angular JS的Java EE 7 – CRUD，REST，验证

这是Angular JS承诺的Java EE 7的后续版本–第1部分。花了比我预期更长的时间（找到时间来准备代码和博客文章），但是终于到了！

应用程序

第1部分中的原始应用程序只是带有分页的简单列表，以及提供列表数据的REST服务。

javaee7-angular-list

在本文中，我们将添加CRUD（创建，读取，更新，删除）功能，绑定REST服务以在服务器端执行这些操作并验证数据。

设置

该设置与第1部分中的设置相同，但是这里是供参考的列表：

Java EE 7
角JS
ng-grid
UI引导程序
野蝇

编码

后端– Java EE 7

后端不需要很多更改。由于我们希望能够创建，读取，更新和删除，因此我们需要在REST服务中添加适当的方法来执行以下操作：

人员资源

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 {@PersistenceContextprivate 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;}@GETpublic 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);}@POSTpublic 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));}
}

该代码与普通的Java POJO完全相同，但是使用Java EE批注来增强行为。 @ApplicationPath("/resources")和@Path("persons")将在URL yourdomain/resources/persons （ yourdomain将是运行应用程序的主机@Path("persons")公开REST服务。 @Consumes(MediaType.APPLICATION_JSON)和@Produces(MediaType.APPLICATION_JSON)接受REST请求和响应并将其格式化为JSON。

对于REST操作：

注释/ HTTP方法	Java方法	网址	行为
`@GET / GET`	listPersons	http：// yourdomain / resources / persons	返回10个人的分页列表。
`@GET / GET`	getPerson	http：// yourdomain / resources / persons / {id}	通过其ID返回一个Person实体。
`@POST / POST`	savePerson	http：// yourdomain / resources / persons	创建或更新人员。
`@DELETE / DELETE`	deletePerson	http：// yourdomain / resources / persons / {id}	通过其ID删除一个Person实体。

每个操作调用的url非常相似。提交请求时，HTTP方法本身定义了区分需要调用哪个操作的魔术。检查HTTP方法定义。

对于getPerson和deletePerson请注意，我们添加了注释@Path("{id}") ，该注释定义了调用服务的可选路径。由于我们需要知道要获取或删除的对象，因此需要以某种方式指示该id 。这是在要调用的服务网址中完成的，因此，如果要删除ID为1的Person，我们将使用HTTP方法DELETE调用http://yourdomain/resources/persons/1 。

后端内容就是这样。仅30行代码添加到了旧的REST服务。我还向Person对象添加了一个新属性，以保留指向图像的链接，目的是显示此人的化身。

UI – Angular JS

对于UI部分，我决定将其分为3个部分：网格，表单和反馈消息部分，每个部分都有自己的Angular控制器。网格与第1部分中的网格基本相同，但确实需要对新内容进行一些调整：

网格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>

这里没什么特别的。与第1部分几乎相同。

网格角控制器

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);});
});

还需要一些其他属性来配置网格的行为。重要的data: 'persons.list'是data: 'persons.list' ，它将网格数据绑定到Angular模型值$scope.persons ， columnDefs允许我们根据需要对网格进行建模。由于我想添加一个选项来删除每一行，因此我需要添加一个新单元格，当您单击十字图标时，该单元格将调用函数deleteRow 。需要afterSelectionChanges函数来与网格中选定的人更新表单数据。您可以在此处检查其他网格选项。

其余代码是不言自明的，其中也有一些注释。关于$rootScope.$broadcast特别说明：用于将事件调度到所有其他控制器。这是控制器之间进行通信的一种方式，因为网格，表单和反馈消息具有单独的控制器。如果所有内容都只在一个控制器中，则不需要这样做，只需一个简单的函数调用就足够了。如果我们要保留多个控制器，另一种可能的解决方案是使用Angular服务。所使用的方法看起来更加简洁，因为它可以将应用程序问题分开，并且不需要您实现其他Angular服务，但是如果需要的话，调试起来可能会有些困难。

表格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>

外观如下：

javaee7-angular-form

许多代码用于验证目的，但让我们更详细地研究一下：每个input元素将其值绑定到person.something 。这允许在HTML和JavaScript控制器之间的数据进行建模，所以我们可以写$scope.person.name在我们的控制器到达填好了表单输入与名称值， name 。要访问HTML表单中的数据，我们使用表单名称personForm加上输入字段的名称。

HTML5在输入字段中有自己的一组验证，但是我们想使用Angular验证。在这种情况下，我们需要通过在form元素上使用novalidate来禁用表单验证。现在，要使用Angular验证，我们可以在input元素中使用一些Angular指令。对于这种非常基本的形式，我们仅使用required ， ng-minlength和ng-maxlength ，但您可以使用其他形式。只需查看文档即可。

Angular根据输入验证状态分配CSS类。想一想，这些是可能的值：

州	CSS	上
`valid`	ng有效	该字段有效时。
`invalid`	ng无效	当该字段无效时。
`pristine`	ng-原始	当领域从未被触及过。
`dirty`	ng-dirty	更改字段时。

这些CSS类为空。您需要创建它们，并在随附CSS表单中为应用程序分配样式。相反，我们将使用Bootstrap中非常好的样式。为了使它们起作用，需要将一些其他类应用于这些元素。包含输入的div元素需要CSS类form-group ，而input元素需要CSS类form-control 。

要显示无效的输入字段，我们将ng-class="{'has-error' : personForm.name.$invalid && personForm.name.$dirty}"到包含的输入div中。此代码评估personForm中的名称是否无效以及名称是否肮脏。条件验证后，输入将显示为无效。

最后，对于表单验证消息，我们需要为每个输入和要执行的验证类型验证$error指令。只需将ng-show="personForm.name.$error.minlength"到带有消息HTML显示元素，以警告用户名称输入字段太短。

表单角度控制器

// 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');});});
});

对于表单控制器，我们需要两个功能来执行与按钮“清除”和“保存”按钮相关的操作，这两个功能是不言自明的。快速说明：出于某种原因，Angular不会清除处于无效状态的输入字段。我确实发现一些人抱怨同样的问题，但我需要对此进行进一步调查。也许这是我做错了。

使用已实现相应HTTP方法的$resource对象中的save和delete调用REST服务。检查文档。您可以通过以下工厂获得$resource ：

REST服务

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

控制器代码的其余部分具有拾取由网格创建的事件的功能，以在表单中加载人员数据并删除人员。该控制器还会创建一些事件。如果我们添加或删除人员，则需要更新网格，以便生成一个事件，要求更新网格。

反馈消息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>

这只是应用程序的顶部，用于根据保存，删除或服务器错误显示成功或错误消息。

反馈消息角度控制器

// 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);};
});

这是将消息推送到视图的控制器。侦听由网格和表单控制器创建的事件。