本文描述了如何使用Angular和javaee构建我们自己的单页应用程序

网络世界一直是令人眼花缭乱的。今天，在可见的网络上有超过18亿个网页，其中大多数都提供了你在互联网上的某种想法、业务、事业或者其他任何东西。越来越多的人每天都对网络感兴趣，内容也在第二天被创造出来。你就会明白为什么web开发是最繁荣的工作之一。随着用户体验技术的快速发展，用户体验也在迅速发展。这种追求使得SPA等技术成为行业领先的技术。他们的增长惊人，用户似乎对新的升级非常满意。今天，我们将使用Angular和JavaEE构建我们自己的单页应用程序，为我们自己的实现制定步骤。

什么是SPA？

单页应用程序是一种设计模式，特别是一种决定程序流程的体系结构设计模式。其思想是一次加载所有数据和元素，以防止在用户使用页面时需要刷新页面。例如，我们可能已经注意到，一旦Gmail第一次加载，它甚至可以脱机工作，而且速度非常快。Gmail、Facebook、GitHub和许多其他应用程序都使用SPA来提供自然的UX，以保持不受干扰的使用。随着PWA采用同样的理念，提供光自然的几乎离线的体验，这个想法正在逐渐发展成为一个设计方向。

传统页面生命周期与SPA生命周期

实际上，SPA有很多优点，使它成为开发人员的首选。

例如，使用SPA，随着编写服务器呈现代码的需要随着SPA的消失，开发过程变得越来越简单。SPA应用程序直接渲染到浏览器。移动应用程序与应用程序的集成更容易，因为我们可以使用相同的web后端。当然，在应用程序的生命周期中，大多数资源(如HTML、CSS和脚本)只加载一次，这使得应用程序更快，因为只有数据在需要时来回移动。这一切都要归功于Javascript框架，它为我们完成了大部分繁重的工作。

使用SPA确实有一些缺点，比如SEO变得有些难以管理，但是我们将在完成应用程序之后讨论如何解决这个问题。今天我们要使用的框架是著名的Angular。

为什么有Angular？

好吧，你可能想知道为什么每个人都在大肆宣传Angular。毕竟，目前的排名显示Angular是JS框架王国的统治之王。它是迄今为止使用最多的框架，拥有最大的社区之一和大量的文档。Angular允许我们使用双向数据绑定构建动态web应用程序。当你在一个电子商务上导航时，你不希望每次你签出一个新产品或者同一产品的其他版本时都重新加载页面，Angular允许你这样做。它的构建和调试也很容易，因此使用Angular这一web开发的核心步骤可以使测试变得更加容易。为了达到这个目的，互联网上有很多角度的教程和程序，人们可以在上面寻找必要的信息。

为什么选择javaee？

javaenterpriseedition是一组健壮的技术和api的集合，用于在企业级构建可伸缩的、事务性的和分布式的应用程序，以满足关键的业务需求和约束。它旨在保持Java开发的更新，以满足当今应用程序的标准。javaee提供了一套庞大的规范，可以满足需求。这就是为什么javaee将成为我们创建第一个SPA的理想之旅。我们将使用Java创建一个REST服务，供我们的Angular前端使用。

我们开始吧。我们将设计一个简单的应用程序，在一个表中显示演员的名字和他们著名的昵称。请注意，为了不把本文变成Java/Angular程序，并将重点放在SPA开发上，将省略一些代码。

后端

javapersistenceapi将允许我们管理和操作应用程序和服务器之间的数据。通过使用

@Entity

注释，我们可以将对象类建模为数据库内部的数据库实体。你可能已经猜到了

@ID

设置此关系的主键，这是真的。我们可以使用

@table

指定特定表属性的符号，如唯一约束(数据成员必须是唯一的，即候选键)和表名。以及

@namedqueries

允许我们准备某些查询以用于关系。然后我们继续使用构造函数、setter和getter构建基类。

参与者实体类

我们通过创建

persistence.xml

JPA所需的文件，看起来像这样。这个

javax.persistence.schema-generation

它不仅允许我们以自然的方式运行SQL，还允许我们连接到尚未连接到的数据源。这样你就省去了这么做的麻烦。

持久性.xml文件

这里还有一件事要做，那就是创建Resources类，将这个数据库公开为一个资源类。@Get符号定义了httpget动词行为，并以非常好的方式格式化JSON响应。

Web服务类

前端

现在是时候跳到我们的前端了。我们将分两步来完成，首先，HTML文件，因为Angular扩展了典型HTML，并允许我们按照MVC设计，使用Javascript变量向组件添加自定义数据绑定。

HTML文件中没有太多的代码，这使得Angular非常有效。Angular拥有一个我们将在这里使用的网格组件，Bootstrap还提供了一个漂亮的组件集，我们可以使用它。

角度HTML文件

现在唯一剩下的就是制作一个Javascript文件，让所有的东西都变得栩栩如生。

Javascript文件将定义客户端行为，并使用我们先前创建的REST服务发出HTTP请求。这是真正的魔法在程序中的体现。

角码

角度搜索引擎优化

SPA的核心问题之一是SEO优化，这对于SPA的成功至关重要。谷歌在抓取Javascript内容时遇到了一些问题，只是还不能完全兼容JS，尽管他们正在努力。有多种方法可以解决这个问题，手动或者使用自定义服务。这个想法是从你的应用程序中创建一个HTML快照，直接服务于爬虫程序，而不是希望它能正确理解和索引你的角度代码。如果你不能手动完成任务，你可以使用预渲染平台，不要紧张。我们还可以做一些次要的事情，比如获取有意义的URL名称，而不是随机生成的URL名称。维护用户友好的url反过来会给用户和应用程序带来很多好处。你应该使用一些工具来关注SPA的表现，并监控任何需要的改变。