伴隨著年度互聯網商業銷售額超過 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：http://blog.techmagic.co/angular-2-vs-react-what-to-chose-in-2017/）。

有許多關於使用 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 應用程序必須完成/實現的任務。以下是一個簡單的列表：

1. 查看現有訂單。

2. 按描述搜索訂單。

3. 創建新訂單。

4. 編輯現有訂單。

5. 刪除一個現有訂單。

雖然這可能看起來過於簡單，但我們很快就會看到即使是最簡單的用例，也需要注意其細節。重要的是，不要低估 Web 應用程序中最簡單的任務，因為它們通常代表著我們應用程序中最常用的 facet，因此需要仔細檢查。

通過已枚舉的用例，我們現在可以進入 UI 的實際設計了。有無數的方法來開始設計 UI，但我們採用的是首先創建一個簡單的草圖，其中涵蓋我們希望應用程序要做的工作，包括用戶將看到的各種屏幕以及屏幕上每個組件在點擊或使用時要處理的操作。這種草圖的一個例子如下圖所示。

在我們的草圖中，我們有兩個簡單的組件：（1）訂單列表組件和（2）保存訂單組件。由於這是一個 SPA，我們不會在瀏覽器中重新載入網頁，以實現從一個組件遷移到另一個組件。相反，我們將從一個轉換到另一個，例如，當用戶單擊創建按鈕時，我們將轉換到保存訂單組件（其中用戶可以創建新的訂單）。雖然我們可以使用諸如 Photoshop（或其他視覺設計程序）之類的程序創建更加成熟的模型，但是手動創建的第一個草圖可以讓我們快速地獲取我們的想法。這個過程中的這個步驟更偏向於藝術，而不是科學。

重要的是要注意，雖然這個草圖闡述了我們想向用戶展示的基本想法，但這絕對不是完整的。在實現我們的 Web 應用程序的過程中，我們將看到做出的改變，我們原以為不錯的 UI 部分可能並不是那麼好。在一個實際的項目中，與客戶共同努力是非常重要的。客戶可能期望我們模型中的組件呈現在最終系統中，因此，在將最終的 Web 應用程序呈現給客戶之前，將模型所需的更改傳達給客戶至關重要。我們需要傳遞給用戶的是驚喜，而不是驚嚇。我們希望客戶在定製應用程序中成為活躍的一份子，從而使應用程序儘可能好地達到其目的。

同樣重要的是，為了設計好一個偉大的 Web 應用程序的視覺部分，需要強調兩個主要方面： (1) UI 和 (2) UX。關於這兩個主題已有數十本書，兩者的區別可以歸結為以下一點：

UI 設計專註於應用程序的介面的靜態，而 UX 側重於動態。

通常，UI 設計聚焦的是應用的外觀。它給人的第一印象就像是一棟新房子的外觀。它無關乎到房子的價值，只是房子看起來漂亮或者美觀。另一方面，UX（用戶體驗）則是處理用戶使用應用程序時使用的易用性和樂趣。對於應用程序來說，這是一個更加動態的方面，就像房子的便利設施和功能一樣。例如，房子是否有足夠的空間容納一個家庭需要的所有汽車? 是否有足夠的地下室？在半夜，從卧室到浴室是否容易？房子的布局是否符合業主的生活方式?

換句話說，UX （用戶體驗）聚焦的是用戶如何與產品交互的所有方面。檢索訂單容易嗎? 為完成目標所做的操作是否繁瑣? 使用公司提供的產品會帶來便利還是麻煩? 我使用這個應用程序，是因為它的易用性，還是被逼無奈? 所有這些難以測量的指標組合起來形成了 UX （用戶體驗）的概念。儘管有很多訣竅和技巧來創建一個好的 UI，並實現一個積極的用戶體驗，我們還是可以使用下面的這些規則來捕獲 UI 和 UX（用戶體驗）的一般概念：

減少用戶生活中的摩擦。

這個簡單的規則借鑒自 Jeff Rosenblum 的《衝突:顛覆時代的熱情品牌》一書（對讀者的警告：這本書包含一些成人話題）。儘管按照商業的規則，我們可以以相同的方式將其應用於這個較窄的範圍內：我們對應用程序的外觀以及所有設計決策都以減少用戶生活中的衝突為目的。這樣，我們將簡化 UI，並確保用戶能樂於使用該程序。

項目設置

隨著我們的草案設計的完成，我們現在可以將軟體組裝在一起，使我們的設計誕生。由於我們將使用 Angular 創建 Web 應用程序，所以我們首先必須設置開發環境，然後我們可以創建一個簡單的項目，來為我們添加新的類和組件提供一些輔助工具。

設置開發環境

設置開發環境的第一步是安裝 Node.js 和 Node Package Manager (npm)。由此安裝 Node.js 也會安裝 npm。一旦 Node.js 和 npm 安裝完成，我們就可以使用 npm 來安裝 Angular 命令行介面 (CLI) 工具：

npm install -g @angular/cli

經過兩個簡單的步驟，我們現在擁有所有用於創建新的 Angular 項目所需要的包了。

創建簡單的項目

在 Angular 首次發時，設置基本項目需要多個步驟和一些手動配置，但現在 Angular 自帶 Angular CLI（使用 ng 作為命令名），這使得可以運行一個簡單命令來創建一個簡單的基本項目。要創建一個新的 Angular 項目，只需執行以下命令：

ng new order-angular-frontend

新的項目一旦創建，我們就可以使用以下命令集來啟動我們的應用程序：

cd order-angular-frontend
npm install
npm start

應用程序一旦啟動，它就可以通過 http://localhost:4200 訪問。更多關於創建 Angular 項目的信息，請參考 Angular 快速入門指南。在本系列的下一篇文章中，我們將轉入應用程序軟體曾的設計和在每一層實現多種組件。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！