英文原文：
Developing a Web Application Using Angular (Part 1)
伴随着年度互联网商业销售额超过 2 万亿美元，世界现有网站达到 12.4 亿个，开发整洁、简练、直观的网络应用程序对于大多数软件市场至关重要。特别地，单页面应用（SPA）已成为主要的范例，允许用户轻松地从一个页面导航到下一个页面，而无需被应用程序的流程和用户体验（UX）所打断。
近年来，已经有许多 SPA 框架受到了用户喜爱，其中出头的是 Angular。Angular 是 Google 于 2010 年创建，最初是使用 JavaScript（准确说是 AngularJS）开发的，在 2016 年，Google 发布了基于 Microsoft 的 Typescript 编程语言的 Angular 新版本。自此以后，创建 Angular 应用程序和创建 Java 应用程序非常类似，因此，也促成了无数公司使用 Angular，包括 PayPal、Nike、HBO、Sony 和通用汽车（更多信息，请参阅 Angular 2 vs. React）。
有许多关于使用 Angular 创建简单 SPA 的教程，本教程将重点介绍一种使用 Angular SPA 的实际实现，该方法将消耗开放源代码订单管理系统 REST Web 服务。本文可以被认为是使用 Java 和 Spring 系列文章创建 REST Web 服务的扩展。虽然创建独特的用户界面（UI）可以自己消耗卷，但我们还可以创建一个基本但高度函数化的界面，用于查看，创建，编辑和删除存储在我们现有订单管理 Web 服务。
本教程将探讨设计和实现 UI 的基础知识，帮助解决在 Web 应用程序开发中无处不在的最常见的 SPA 和 UI 挑战。要成为该领域的专家还需要多个月和多年的经验，但本教程将带大家深入了解用 Angular 创建 Web 应用程序的根本。
本教程中使用的全部代码可以在以下 GitHub 存储库中找到。虽然本教程将介绍订单管理 Web 应用程序中的每个主要模块和类，但不会面面俱到。建议读者在完成本教程后，探索该存储库，了解应用程序的各个部分如何互连，以及本文中的说明如何具体创建这些重要部分。
一旦克隆了该存储库，只需执行以下一系列命令（假设已安装 Node.js）即可启动 Angular 前端：
npm install
npm start
一旦启动，在 http://localhost:4200 可查看应用程序。
开始之前
在创建我们的 Angular Web 应用程序之前，需要解决几个问题。首先是期望读者必备的前提知识，其次是启动订单管理 REST 服务作为我们的 SPA 的后端。
背景知识
本教程并不专注于教授 Typescript 编程语言的基础知识。尽管我们只会在创建 SPA 时使用该语言的基础知识，但我们完成的许多步骤没有详细说明。要对 Typescript 有个基础的了解，请参阅“5 分钟了解 Typescript”一文。同样的，本文不会专注于介绍用于创建 SPA 时需要安装的 Angular 依赖的各种软件包的基础知识。有关设置 Angular 项目的更多信息，请参阅“Angular 快速入门指南”。这里还强烈建议读者熟悉 Angular 团队所创建的“Tour of Heroes”教程。本教程将作为我们不同类型的 Angular Web 应用程序的辅助参考资料。
配置 Web Service
在我们与订单管理 REST 服务交互之前，必须将其启动。REST 服务的源代码可以在此找到。可以通过执行以下命令克隆此 Web 服务：
git clone https://github.com/albanoj2/order-rest-backend.git
克隆后，将目录切换到 Web 服务的根目录并执行以下命令：
mvn spring-boot:run
这将在 localhost:8080 上启动 Web 服务，可以通过 http://localhost:8080/order 访问。 一旦启动，我们现在就可以创建用户接口，以便与订单管理 Web 服务进行交互。
我们需要完成什么？
在进入我们的 Web 应用程序的设计和实现之前，我们必须评估下我们需要完成的那些任务。虽然我们本身并没有客户，我们也需要知道 Web 应用程序的意图和预期的用途，如下述文字所示：
用户应该可以查看系统中所有的现有订单的列表。由于可能会有很多订单，用户能够通过订单的描述过滤一些订单。用户还能够创建一个新的订单，并且在创建后，新的订单会出现在现有订单的列表中。用户还能够编辑和删除现有的订单，更新或删除操作应该反映在现有订单列表中。
这个假设将推动我们的 Web 应用程序的设计和实现，并且在构建我们的应用程序的整个过程中，我们将需要确保我们采取的每一步都能够满足这个假设。随着我们的设定的建立，我们现在进入实现我们的应用程序的第一步：确定从哪里开始。
何处入手
启动一个项目可能是最困难的任务之一，创建 Web 应用程序也是如此。当出现许多不同方面的问题需要处理时，就会感到无所适从，进而滋生惰性。要突破这一障碍，我们需要从最直接影响用户的系统开始：UI。
在软件开发过程中可能遇到难题和困惑时，我们很容易忽视我们创建该应用程序的初衷：为客户服务。一切事物都都取决于我们是否顺利完成了这一目标，包括公司的利润和利益相关者的满意度。我们可以创建技术最高端、最完善的系统和最优雅的 UI，但如果我们无法满足客户和用户的需求，那么这一切都是白搭。因此，我们首先开始的是搞清楚用户如何与我们的系统交互。
此过程的第一步是枚举用户使用我们的 Web 应用程序必须完成/实现的任务。以下是一个简单的列表：
查看现有订单。
按描述搜索订单。
创建新订单。
编辑现有订单。
删除一个现有订单。
虽然这可能看起来过于简单，但我们很快就会看到即使是最简单的用例，也需要注意其细节。重要的是，不要低估 Web 应用程序中最简单的任务，因为它们通常代表着我们应用程序中最常用的 facet，因此需要仔细检查。
通过已枚举的用例，我们现在可以进入 UI 的实际设计了。有无数的方法来开始设计 UI，但我们采用的是首先创建一个简单的草图，其中涵盖我们希望应用程序要做的工作，包括用户将看到的各种屏幕以及屏幕上每个组件在点击或使用时要处理的操作。这种草图的一个例子如下图所示。
在我们的草图中，我们有两个简单的组件：（1）订单列表组件和（2）保存订单组件。由于这是一个 SPA，我们不会在浏览器中重新加载网页，以实现从一个组件迁移到另一个组件。相反，我们将从一个转换到另一个，例如，当用户单击创建按钮时，我们将转换到保存订单组件（其中用户可以创建新的订单）。虽然我们可以使用诸如 Photoshop（或其他视觉设计程序）之类的程序创建更加成熟的模型，但是手动创建的第一个草图可以让我们快速地获取我们的想法。这个过程中的这个步骤更偏向于艺术，而不是科学。
重要的是要注意，虽然这个草图阐述了我们想向用户展示的基本想法，但这绝对不是完整的。在实现我们的 Web 应用程序的过程中，我们将看到做出的改变，我们原以为不错的 UI 部分可能并不是那么好。在一个实际的项目中，与客户共同努力是非常重要的。客户可能期望我们模型中的组件呈现在最终系统中，因此，在将最终的 Web 应用程序呈现给客户之前，将模型所需的更改传达给客户至关重要。我们需要传递给用户的是惊喜，而不是惊吓。我们希望客户在定制应用程序中成为活跃的一份子，从而使应用程序尽可能好地达到其目的。
同样重要的是，为了设计好一个伟大的 Web 应用程序的视觉部分，需要强调两个主要方面： (1)
UI 和 (2) UX。关于这两个主题已有数十本书，两者的区别可以归结为以下一点：
UI 设计专注于应用程序的接口的静态，而 UX 侧重于动态。
本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接。
2KB翻译工作遵照
CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。
2KB项目（www.2kb.com，源码交易平台）,提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务
