云服务器多网站解析,品牌 网站建设,国外很炫酷的网站,wordpress首页在哪angular java今天的帖子将向您展示如何使用Java EE 7和Angular JS构建一个非常简单的应用程序。 在去那里之前#xff0c;让我告诉您一个简短的故事#xff1a; 我必须承认#xff0c;我从来都不是Java语言的忠实拥护者#xff0c;但是我仍然记得我第一次使用它。 我不记得… angular java 今天的帖子将向您展示如何使用Java EE 7和Angular JS构建一个非常简单的应用程序。 在去那里之前让我告诉您一个简短的故事 我必须承认我从来都不是Java语言的忠实拥护者但是我仍然记得我第一次使用它。 我不记得确切的年份但大概是90年代中期。 我的页面上有3帧是的帧还记得吗那段时间很受欢迎当我单击第3帧上的链接时我想重新加载2帧。 当时Javascript被用来在网页上做一些花哨的事情并不是每个浏览器都支持Javascript甚至有些浏览器甚至要求您打开它。 快速发展到今天景观发生了巨大变化。 Javascript现在是完整的开发堆栈您可以开发仅用Javascript编写的整个应用程序。 对我来说不幸的是有时我仍然认为我回到了90年代并且对Javascript的评价不高因此这是我尝试更好地了解Javascript的尝试。 为什么选择Java EE 7 好吧我喜欢Java新的Java EE版本非常不错。 使用Wildfly或Glassfish时 不会太详细速度很快。 它为您提供了满足您需要的大量规范这是Java世界的标准。 为什么选择Angular JS 我可能正在关注有关Angular的大肆宣传。 由于我对Javascript的经验不足所以我不太了解这些提议因此我只是听从一些朋友的建议并且我也注意到上一个Devoxx对Angular的广泛接受。 每个进行Angular演讲的房间都坐满了所以我想尝试一下自己找个机会。 应用程序 对于应用程序这是一个带有分页的简单列表以及一个提供列表数据的REST服务。 每次我启动一个新的企业项目时通常通常是我们编写代码的第一件事创建表存储一些数据并列出一些随机数据所以我认为这是适当的。 设置 Java EE 7 角JS ng-grid UI引导程序 野蝇 代码最终 后端– Java EE 7 从后端开始让我们定义一个非常简单的Entity类为简单起见省略了一些代码 人.java Entity
public class Person {Idprivate Long id;private String name;private String description;} 如果您不熟悉Java EE JPA规范则可以通过使用注释Entity连接到具有相同名称的数据库表和使用注释Id标识表主数据库来将对象类建模到数据库表中键。 接下来是persistence.xml persistence.xml ?xml version1.0 encodingUTF-8?
persistence version2.1xmlnshttp://xmlns.jcp.org/xml/ns/persistencexmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://xmlns.jcp.org/xml/ns/persistence http://xmlns.jcp.org/xml/ns/persistence/persistence_2_1.xsdpersistence-unit namemyPU transaction-typeJTApropertiesproperty namejavax.persistence.schema-generation.database.action valuedrop-and-create/property namejavax.persistence.schema-generation.create-source valuescript/property namejavax.persistence.schema-generation.drop-source valuescript/property namejavax.persistence.schema-generation.create-script-source valuesql/create.sql/property namejavax.persistence.schema-generation.drop-script-source valuesql/drop.sql/property namejavax.persistence.sql-load-script-source valuesql/load.sql//properties/persistence-unit
/persistence 我在Java EE 7上最喜欢的两个新功能现在您可以使用属性javax.persistence.schema-generation.*以标准方式运行sql并且如果您不提供默认数据源它还将您绑定到默认数据源。 因此在这种情况下将为我们的应用程序使用内部Wildfly H2数据库。 最后要提供列表数据我们需要查询数据库并将其公开为REST服务 PersonResource.java Stateless
ApplicationPath(/resources)
Path(persons)
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 ListPerson 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();}public PaginatedListWrapperPerson findPersons(PaginatedListWrapperPerson wrapper) {wrapper.setTotalResults(countPersons());int start (wrapper.getCurrentPage() - 1) * wrapper.getPageSize();wrapper.setList(findPersons(start,wrapper.getPageSize(),wrapper.getSortFields(),wrapper.getSortDirections()));return wrapper;}GETProduces(MediaType.APPLICATION_JSON)public PaginatedListWrapperPerson listPersons(DefaultValue(1)QueryParam(page)Integer page,DefaultValue(id)QueryParam(sortFields)String sortFields,DefaultValue(asc)QueryParam(sortDirections)String sortDirections) {PaginatedListWrapperPerson paginatedListWrapper new PaginatedListWrapper();paginatedListWrapper.setCurrentPage(page);paginatedListWrapper.setSortFields(sortFields);paginatedListWrapper.setSortDirections(sortDirections);paginatedListWrapper.setPageSize(5);return findPersons(paginatedListWrapper);}
} 该代码与普通的Java POJO完全一样但是使用Java EE批注来增强行为。 ApplicationPath(/resources)和Path(persons)将在url yourdomain/resources/persons处公开REST服务 GET标记要由http GET方法和Produces(MediaType.APPLICATION_JSON)调用的逻辑Produces(MediaType.APPLICATION_JSON)将REST响应格式化为JSON格式。 只需几个注释就可以了。 为了更容易地交换分页列表所需的信息我还创建了以下包装器类 PaginatedListWrapper.java public class PaginatedListWrapperT {private Integer currentPage;private Integer pageSize;private Integer totalResults;private String sortFields;private String sortDirections;private ListT list;
} 我们已经完成了后端工作。 UI – Angular JS 为了显示数据我们将使用Angular JS。 Angular通过附加的自定义标签属性扩展了传统HTML以遵循MVC方法来绑定以Javascript变量表示的数据。 因此让我们看一下我们的html页面 index.html !DOCTYPE html
!-- Declares the root element that allows behaviour to be modified through Angular custom HTML tags. --
html ng-apppersons
headtitle/titlescript srclib/angular.min.js/scriptscript srclib/jquery-1.9.1.js/scriptscript srclib/ui-bootstrap-0.10.0.min.js/scriptscript srclib/ng-grid.min.js/scriptscript srcscript/person.js/scriptlink relstylesheet typetext/css hreflib/bootstrap.min.css/link relstylesheet typetext/css hreflib/ng-grid.min.css/link relstylesheet typetext/css hrefcss/style.css/
/headbodybrdiv classgrid!-- Specify a JavaScript controller script that binds Javascript variables to the HTML.--div ng-controllerpersonsList!-- Binds the grid component to be displayed. --div classgridStyle ng-gridgridOptions/div!-- Bind the pagination component to be displayed. --pagination direction-linkstrue boundary-linkstruetotal-itemspersons.totalResults pagepersons.currentPage items-per-pagepersons.pageSizeon-select-pagerefreshGrid(page)/pagination/div
/div/body
/html 除了Javascript和CSS声明外其中几乎没有代码。 非常令人印象深刻。 Angular也有大量现成的组件因此我使用ng-grid来显示数据和提供分页组件的UI Bootstrap 。 ng-grid也具有分页组件但是我更喜欢UI Bootstrap分页组件。 仍然缺少一些东西。 发生所有情况的Javascript文件 person.js var app angular.module(persons, [ngGrid, ui.bootstrap]);
// Create a controller with name personsList to bind to the html page.
app.controller(personsList, function ($scope, $http) {// Makes the REST request to get the data to populate the grid.$scope.refreshGrid function (page) {$http({url: resources/persons,method: GET,params: {page: page,sortFields: $scope.sortInfo.fields[0],sortDirections: $scope.sortInfo.directions[0]}}).success(function (data) {$scope.persons data;});};// 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;});// 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, function () {$scope.refreshGrid($scope.persons.currentPage);}, true);// 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};
}); Javascript代码非常干净且井井有条。 请注意如何将所有内容添加到应用程序控制器中从而使您可以将业务逻辑上的关注点多重分离。 为了实现所需的行为我们只需要添加一些函数即可通过调用REST服务来刷新列表并监视网格数据以刷新视图。 这是最终结果 下一步 对于与这些系列相关的以下帖子我打算 实施过滤 实施细节视图 实施下一个/上一个浏览 部署在云端 管理Javascript依赖项 资源资源 您可以从我的github存储库中克隆完整的工作副本然后将其部署到Wildfly。 您可以在此处找到有关部署它的说明。 也应该在Glassfish上工作。 Java EE – Angular JS源 更新资料 同时我用有关“ 管理Javascript依赖项”的帖子更新了原始代码。 请从1.0版下载此文章的原始来源。 您还可以克隆存储库并使用以下命令从发行版1.0中检出标记 git checkout 1.0 。 希望您喜欢这个帖子 让我知道您是否对此有任何评论。 翻译自: https://www.javacodegeeks.com/2014/07/java-ee-7-with-angular-js-part-1.htmlangular java
