在前端开发中，单页面应用 (SPA) 已成为一种常见的应用程序架构，Angular2 作为一种流行的前端框架，已经成为了一个SPA开发的重要工具。但是，Angular2 描述的程序架构仅仅是应用的骨架，还需要使用合适的技术栈来完善这个应用程序。
本文将介绍一些最流行的技术栈，它们与 Angular2 的特色相称，这些技术栈将为您构建高质量的应用程序提供帮助。
RxJS
RxJS 是一种支持从异步数据流 (如所示，用户输入、外部 API 调用等) 中构建基于事件的应用程序的库。提供了通用的概念和工具，使得在应用程序中进行复杂的数据流处理变得更加方便。
RxJS 与 Angular2 的结合非常紧密。Angular2 内部使用 RxJS 构建及处理异步数据流。如果您希望构建高质量的并具有响应性的应用程序，则 RxJS 是不可或缺的一部分。
以下是 Angular2 如何使用 RxJS 以及与之交互的示例代码：
------ - ---------- ------ - ---- ----------------
------ - ---------- - ---- -------
------------
--------- --------------
------------ ---------------------------
---------- ----------------------------
--
------ ----- ---------------- ---------- ------ -
------ -------------------
---------- -
---------- - --------------------
--------- -- ------------
------------ -- -
-------------------
------ ------------------
---
-
-这些代码演示了如何使用 RxJS 发送 HTTP 请求并且处理来自异步数据源的数据。
NgRx
NgRx 库提供一种流量机制，用于在应用程序中编写可重用的单向数据流。它受到 Redux 和 Elm 架构的启发。在 Redux 中，所有的应用程序数据都存储在一个单一的状态树中。这个状态树可以由多个 Store 维护，每个 Store 控制一个部分，由 React 组件处理。
NgRx 在 Angular2 中使用的场景和 Redux 几乎可以看作一致的，今天它已被视为为Angular2应用程序管理状态的标准解决方案。它的主要目标是增加应用程序的可预测性，提高可维护性。
以下是使用 NgRx 提供状态管理的示例代码：
----- ------------ - -
------ --- ------------
--
------ -------- ------------- - ------------- ------- ---- -
------ ------------- -
---- ------------
------ ----------------- ------ - ------ -------------- ---
--------
------ ------
-
-这段代码演示了一个简单的 reducer 函数，它为应用程序状态提供了一个初始值，并通过接受 action 以更改状态。
Unit Testing
Angular2 为测试应用程序提供了多种可能性。对于单元测试，您可以使用 Jasmine、Mocha 或其他流行的测试框架。Angular2还提供了自己的测试类 TestBed，我们可以使用它来开发单元测试和组件测试。
以下是关于如何使用 TestBed 测试服务的示例代码：
------ - -------- ----- - ---- ------------------------
------ - --------- - ---- ---------------
--------------------- -- -- -
------------------- -- -
--------------------------------
---------- -----------
--
---------------------
----
---------- ------ --- --------- ----- -- -- -
----- --------- - -----------------------
-------------------------------
---
---这些代码演示了如何测试 MyService 这个服务名称，它只是一个 return 一个随机数组的函数。
Angular Elements
Angular Elements 是一个新的 Angular 技术，可以在其他应用程序中使用您的 Angular 组件。Angular Elements 可以将 Angular 组件打包为 Web 组件，您可以将其添加到其他应用程序中。
以下是 Angular Elements 对话框组件的示例代码，此组件可以在非 Angular 应用程序中使用：
------ - ---------- ----- - ---- ----------------
------ - ------------------- - ---- --------------------
------------
--------- ------------
------------ -------------------------
--
------ ----- --------------- -
-------- ------------ -------
------ --------- -
--------------------------
-
-
----- ------------ - ----------------------
----- ------ - ------------------------------------ - --------- ------------- ---
-- ----------------------------------- -
----------------------------------- --------
-这些代码演示了 Angular 2 如何创建自定义元素，定义元素名称为“my-dialog-component”，以及创建 Dialog 组件需要的依赖注入器。
结论
综上所述，Angular2 与其他技术的结合可以为您构建更好的 SPA 应用程序提供帮助。使用 Angular2 和这些优秀的技术栈，您可以为用户提供一个具有响应性的、易于维护和利于扩展的应用程序。
参考文献
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670ca91e5f551281025b52bb