协同译者
书名：Developing a Web Application Using Angular (Part 2)
镜像
：
https://dzone.com/articles/developing-a-web-application-using-angular-part-2译者者：Tocy, 永恒之母, wilde, aaronday, 我是红人我自豪, ismdeep, 科灰藓紫菊
在用 Angular 合作开发 Web 应用领域（Part 1）中，他们深入探讨了 Web 插件的基本上介面（UI）结构设计，并为他们的工程项目打下了此基础，透过采用 Angular 配置文件介面（CLI）为他们聚合两个金属结构工程项目。在责任编辑中，他们将为他们的 Web 插件合作开发两个构架，并已经开始将他们的 Web 插件从抽象化到具体内容的类的同时实现。
合作开发架构
就像他们为采用 Java 和 Spring 建立 REST Web 服务工程项目（第1部份）中后端 Web 服务工程项目合作开发的通常构架那样，很多 Web 插件都遵从完全相同的基本上构架。
从最吻合使用者的模块已经开始，他们有两个与控制系统终端使用者最间接的数据数据传输的 UI。
在 UI 和 Web 服务工程项目间，他们有两个服务工程项目层能抽象化与 Web 服务工程项目的可视化USB，来PCBLZ77数据传输协定（HTTP）操作形式（如 GET，POST 等）。最终，他们获得由 Web 服务工程项目聚合并由 UI 层表明的天然资源。
尽管存有以严苛PG形式表明大部份多层构架的态势（当中几层间接坐落于另几层其内），但从 UI 层、服务工程项目层和天然资源间的可视化视角上看他们的构架，却更加不利，如下表所示图右图：
在此种构架中，倍受倚赖的层是天然资源层，它负责管理则表示从 Web 服务工程项目索引天然资源；服务工程项目层负
一旦更改完成，UI 层将指示服务工程项目层将这些更改提交到后端，这又导致服务工程项目层对后端执行 HTTP 调用。
这个过程能在下面的序列图中看到，它描述了编辑 ID 为 1 的订单的步骤。请注意 OrderService 和 OrderResource 类分为用作订单的服务工程项目和天然资源。
如上图右图，使用者的动作驱动 UI 层，接着，UI 层指示服务工程项目层与后端 Web 服务工程项目进行可视化。然后，服务工程项目层建立新的天然资源，或采用 UI 层传递现有天然资源， 来则表示收到或发送到 Web 服务工程项目的订单。
在整个过程中，服务工程项目层是负责管理建立天然资源的唯几层。此外，UI 层并不间接与 Web 服务工程项目可视化，而是采用订单天然资源与服务工程项目层进行可视化。
此种去耦合形式允许他们的层改变，但不会造成多米诺效应而改变其他层。例如，如果 Web 服务工程项目已改变（如，连接 Web 服务工程项目的 URL 改变），则只有服务工程项目层必须改动（更具体内容地说，只有与受影响的天然资源可视化的服务工程项目必须改变）。尽管 Web 服务工程项目发生了变化，但 UI 层模块保持不变。
随着他们的构架的固化，他们现在能继续同时实现他们的 Web 插件。他们将从同时实现天然资源层已经开始，因为它不倚赖于其他层，并且被他们所倚赖。
接下来，他们将同时实现服务工程项目层，因为它倚赖于 UI 层；最终，他们将同时实现 UI 层，因为它不被任何其他层所依赖，但倚赖于另外两层。
同时实现天然资源层
同时实现天然资源层的第一步是枚举他们将在控制系统中拥有的天然资源。由于他们与两个简单的 Web 服务工程项目进行USB，他们只有两个天然资源：订单。
基于他们的 Web 服务工程项目的结构设计，他们期望 Web 服务工程项目把天然资源发送给他们，类似以下内容（以 JSON 格式，即 JavaScript 对象则表示法）：
这意味着他们必须确保他们的订单天然资源能从上述 JSON 中反序列化，并能在他们的 UI 层中采用，为此，他们建立以下一组类：
从顶部已经开始，他们建立 Link 类，将超媒体抽象化为插件状态引擎（Hypermedia as the Engine of Application State, HATEOAS）。
接下来，他们抽象化出 OrderLinks 类，它包含了从 Web 服务工程项目预期的各种镜像。最终，他们建立 Order 类，它抽象化了他们从 Web 服务工程项目收到的 JSON 订单天然资源。
值得注意的是 Order 类包含了两个 deserialize 和两个 serialize 方法，这允许 Oder 对象能够从原始的 JSON 订单天然资源所建立，并且对于已有的 Oder 对象也能被串行化为两个原始的 JSON 订单天然资源。
当他们手动执行串行化和反串行化时有两个主要原因，尽管 TypeScript 具有自动执行这些操作形式的能力：
1、他们能变化 Oder 类内部字段的名字。Typerscript 所采用的默认的串行化技术采用字段名，这限制了他们将他们的字段命名为用在所希望的 JSON 中的同样的名字。
举例来说，他们将会被要求命名两个字段存储 HATEOAS 镜像 _links ，因为这个名字已被后台所采用。这将会透过后台所采用的结构连接他们天然资源类的内部结构。
2、为了他们类的方法是可调用的，他们需要手动地将两个类型的对象示例化。举例来说，他们将采用默认的反串行化逻辑 const order = someRawJson 作为 Oder ，但是如果他们试图调用 order.toggleComplete() （或任何其他方法），他们将获得两个函数 toggleComplete 不能在给定类型中找到的错误状态。
这是由于订单类型并非 Oder ：如果它是对象的话，他们只是简单地将某些原始的 JavaScript 对象看成无类型的，但是当他们视图调用那个对象的方法的时候，两个错误就会由于对象的同时实现类型不是 Order 而出现（因此也不会有所希望的方法），尽管所声明的类型是 Order 。
第二个问题如果手动地建立所希望的对象（采用 new 运算符）是非常难解决的。对于这个问题的更多信息请参看 this StackOverflow post。 因此，他们将手动地执行 Order 对象的串行化和反串行化 。
在具有更多天然资源的更大规模控制系统中，此种方法也许是不可行的。在那样的情况下，对 Typerscript 的串行化和反串行化技术将会继续被讨论。
下两个必须解决的问题是 costInCents 域的私有化。他们所连接的 Web 服务工程项目以美分为单位存储成本值，这样就不必操作形式小数点（这可能会导致便士丢失）。
尽管后端 Web 服务工程项目以此种形式维护其成本值，但是他们的 Order 天然资源能用有多重好处的十进制形式处理成本。
当中最重要的是以可读的形式表明成本。例如，向使用者表明成本以美分为单位，而不是以美元表明，例如$4.56。
其次，UI 可能会以小数的形式更改值。例如，允许他们的 Order 天然资源被编辑的输入字段可能包含两个小数，以便使用者能将该值输入为4.56而不是456。
因此，他们将采用 Typescript 类提供的PCB来维护他们的以美分为单位的成本值，同时允许外部模块改变或阅读成本的以美元为单位的小数。
由于此种转换逻辑（以美分和十进位美元计算）可能难以获得正确的结果，因此用自动化单元测试来同时实现此功能是两个不错的想法。
尽管自动化单元测试通常采用 Java、Ruby、Python 或其他通用非前端编程语言的后端合作开发。但他们聚合的 Angular 工程项目包含对 Jasmine 中的自动化单元测试的原生支持。 他们的类的单元测试规范如下表所示右图：
在设置测试套件和单个测试用例之前，他们建立两个 OderderFactory ，将用来帮助他们建立想要的 Order 对象。 例如，他们正在测试天然资源的成本值时，他们编写两个工厂方法 createWithPrice() 来建立具有特定价格的对象。
接下来，他们采用 describe() 方法（由 Jasmine 提供）建立他们的测试套件。在本测试套件中，他们采用 it() 方法添加单独的测试用例。 在每个测试用例中，他们只需建立两个所需成本为零的原始天然资源，然后采用 expect 方法对方法的输出进行断言处理。
请注意，Angular 插件中的常见约定是将单元测试文件放在包含被测文件的同一目录中，并将 spec 添加到文件名中。例如，如果他们的 Order 天然资源包含在 src/app/order.resource.ts 中，他们要将 Jasmine 单元测试放在
src/app/order.resource.spec.ts 中。尽管他们只采用了 Jasmine 的基本上功能，但是还有很多其他强大的机制，使得 Jasmine 在其功能方面非常类似于标准的单元测试架构，例如 JUnit 。更多有关建立 Jasmine 测试的信息，请参阅“Jasmine简介”。要运行他们的单元测试，只需执行以下命令：
一旦测试被编译和执行，浏览器窗口就会打开。新窗口中的内容应类似于以下内容，则表示大部份测试已透过：
在下一篇文章中，他们将继续同时实现他们的 Web 服务工程项目，从服务工程项目层已经开始，最终完成 UI 层，并采用他们 Web 插件与订单管理 Web 服务工程项目进行可视化。
