由于具有实现更高性能的浏览器和智能电话应用程序的潜力，单页应用程序 (SPA) 技术在软件行业引起了广泛的兴趣。在过去 5 年多的时间里，开发人员对 （一个开源 SPA 框架）的兴趣远超他们对其他 Web 框架（React、Backbone、Meteor 和 Ember）的兴趣，这从 StackOverflow 网站上针对每种 Web 框架的问题数量上可以判断出：
 （图像来源： ）
Web 和移动开发人员非常喜欢 Angular 2（2016 年 9 月发布）。Angular 2 不是 Angular 1 的一次升级，而是一个全新的、不同的、更高级的框架。精通 Angular 2 已成为构建高性能、可扩展、稳健、现代的跨平台应用程序的一种很吃香的技能。
TypeScript
Angular 2 支持 JavaScript、Dart 和 TypeScript。您将使用 作为本教程的项目的开发语言。该框架构建于 TypeScript 之上，大多数有关 Angular 的文档、图书和教程都侧重于将 TypeScript 作为开发语言。
本教程将介绍 Angular 2 中的重要构建块，演示如何在开发环境和沙箱服务器中使用 Angular 2 编写和运行 SPA。要充分掌握本教程，您需要具有一定的 Web 编程经验，包括 JavaScript、TypeScript 和 HTML 的各方面知识。无需提前拥有 Angular 经验。练习完示例项目后，您就会为使用 Angular 2 创建自己的 SPA 做好充足的准备。
可以从教程末尾的 “可下载资源” 部分下载针对沙箱应用程序的完整示例代码。
为什么使用 SPA 和 Angular 2？在用户启动 SPA 时，该应用程序仅呈现来自服务器的一个 HTML 页面。除了这个 HTML 页面，服务器还会向客户端发送一个应用程序引擎。该引擎控制整个应用程序，包括HTML 页面的处理、输入、输出、绘制和加载。通常，90–95% 的应用程序代码是在浏览器中运行；当用户需要新数据时或必须执行身份验证等安全操作时，就会在服务器中运行剩余代码。由于几乎消除了对服务器的依赖，所以 SPA 能在 Angular 2 环境中自动扩展：无论有多少用户同时访问服务器，在 90–95% 的时间里，应用程序的性能绝不会受到影响。
另外，因为大部分负载都在客户端上运行，所以服务器在大部分时间里都处于空闲状态。对服务器资源的低需求显著减少了服务器上的压力，也潜在地降低了服务器成本。
Angular 2 的另一个优势是，它可以帮助 SPA 有效地使用微服务。
“ 通常，90–95% 的 SPA 代码在浏览器中运行；当用户需要新数据或必须执行身份验证等安全操作时，就会在服务器中运行剩余代码。”
Angular 2 概念Angular 2 中的关键概念包括：
从现在开始，我将 Angular 2 简称为 Angular。
模块Angular 应用程序是模块化的。每个 Angular 应用程序拥有至少一个模块，即根模块，传统上将其命名为 AppModule。根模块可以是小型应用程序中唯一的模块，但大多数应用程序都拥有更多的模块。作为开发人员，您需要决定如何使用模块概念。通常，会将主要功能或特性映射到一个模块。假设您的系统中有 5 个主要区域。除了根模块之外，每个区域都将拥有自己的模块，总计 6 个模块。
组件组件 控制页面的一片区域，该区域被称为视图。您定义组件的应用程序逻辑 — 它如何支持类中的视图。类通过属性和方法的 API 与视图交互。一个组件包含一个类、一个模板和元数据。模板是一个 HTML 表单，用于告诉 Angular 如何呈现组件。一个组件只能属于一个模块。
服务服务 提供应用程序所需的任何值、功能或特性。服务通常是一个具有明确定义的较小用途的类；它应高效地执行具体的操作。组件大量使用服务。服务大量使用微服务。
路由路由 支持在用户执行应用程序任务时，从一个视图导航到下一个视图。路由等效于用于控制菜单和子菜单的机制。
了解 SPA 的优势并掌握 Angular 概念后，是时候在示例项目上开始实践了。 |
