前言
Angular2.0 是一个出色的前端框架，它简化了前端应用的构建过程，提高了开发效率和应用性能。而今天我们将会学习如何通过 Angular2.0 构建响应式 SPA 应用。
响应式设计简介
响应式设计是一种设计模式，其可以使网站在不同的设备屏幕上拥有最佳的浏览体验。该模式通过使用 CSS3 和 HTML5 相关技术，使页面与其内容能够自适应不同的屏幕大小。
Angular2.0 中的响应式特性
Angular2.0 具有许多引人注目的特性，其中包括构建响应式应用的内置支持。为了使 Angular2.0 在 Web 应用程序中简化响应式设计，它提供了以下几个主要特性：
Reactive Extensions (RxJS)
Angular2.0 中采用 Reactive Extensions（RxJS） 让应用程序的响应式设计变得更加容易。RxJS 的意思是对事件序列进行处理，我们可以使用它简化许多异步编程场景。RxJS 是一种流式编程语言，它允许我们使用简单的操作符来表达复杂的事件流处理逻辑。
FormBuilder & ReactiveFormsModule
Angular2.0 为响应式表单设计提供了 FormBuilder 和 ReactiveFormsModule API。它们允许我们轻松地创建类似登录、注册等Web表单。
Pipes
Angular2.0 中的 pipes 能够使我们创建更好的模板，模板会返回处理过的数据而不是原始的数据。它们允许我们以特定的方式修改数据以满足我们的需求。一些已经內置的 pipes包括 currency、date、decimal 和 percent pipes。
示例应用程序
下面我将提供一些 Angular2.0 构建响应式 SPA 应用的代码示例。本例子是一个简单的注册表单。
引入必要的依赖项
首先，我们需要安装最新版的 Angular2.0 并依赖rxjs（用来处理响应式数据的），以及@angular/forms（用来处理表单的）。
npm install @angular/core @angular/platform-browser @angular/platform-browser-dynamic rxjs @angular/forms
建立数据模型
过多的代码常常导致出错，基于这个原因我们需要一个清晰的数据模型用于展示数据
export class User {
name: string;
email: string;
}建立组件
接下来，我们需要建立表单组件，并且通过 FormBuilder 和 ReactiveFormsModule 来处理表单。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ ---------- ---------- - ---- -----------------
------ - ---- - ---- ---------
------------
--------- -----------
------------ ----------------------
--
------ ----- ------------ -
--------- ----------
----- -----
------------------- --- ------------ -
----------------------
-
---------- -
--------- - -----------------------
-
---------------- -
------------- - ---------------
------- ------ ---------------------
-------- ------ ---------------------------------------- -------------------
---
-
------------------ ---- -
----- --------- - --------------------
----- --------- ---- - -
----- -------------- -- -------
------ --------------- -- ------
--
------ ---------
-
-编写模板
与建立表单相关的模板也应准备好，我们可以使用 FormBuilder 创建表单并通过 Validators 应用必要的验证规则。
-- -------------------- ---- -------
----- ---------------------- ------------------------
-----
------ -----------------------
------ ----------- --------- -----------------------
------
-----
------ -------------------------
------ ----------- ---------- ------------------------
------
-----
------- ------------- ----------------------------------------
------
-------运行应用
现在，我们就可以执行以下三个命令以启动示例应用程序，然后在浏览器中运行 http://localhost:4200 页面就可以看到我们刚刚编写的表单了：
ng new my-app cd my-app ng serve
结论
Angular2.0 是构建响应式 SPA 应用的最佳选择，许多企业已经采用它来简化他们应用程序的构建过程。通过我们的示例，你应该已经了解了如何在 Angular2.0 中构建响应式应用程序并且基于我们的示例，你可以建立你自己的响应式应用程序了！
参考链接
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674ab841a1ce006354a0c414