單頁應用程式 single-page-applications

單頁應用程式 (SPA)已達到關鍵數量，被廣泛視為使用Web技術建立無縫體驗的最有效模式。 遵循SPA模式，您可以建立與案頭或行動應用程式執行方式相同的應用程式，但因其以開放式Web標準為基礎，而涵蓋多種裝置平台和外型規格。

一般而言，SPA的效能較傳統以頁面為基礎的網站來得好，因為這類網站通常會載入完整的HTML頁面 僅一次 （包括CSS、JS和支援的字型內容），然後只載入每次應用程式中發生狀態變更時所需的專案。 此狀態變更的必要條件可能因所選技術集合而異，但通常包括單一HTML片段以取代現有的「檢視」，以及執行JS程式碼區塊以連線新檢視並執行任何可能必要的使用者端範本轉譯。 此狀態變更的速度可以透過支援範本快取機制進一步改善，甚至可在使用Adobe PhoneGap時離線存取範本內容。

AEM 6.1支援透過AEM應用程式建置和管理SPA。 本文介紹SPA背後的概念及其使用方式 AngularJS 將您的品牌帶到App Store和Google Play。

AEM應用程式中的SPA spa-in-aem-apps

AEM應用程式中的單頁應用程式架構可提供AngularJS應用程式的高效能，同時讓作者（或其他非技術人員）透過傳統上為管理網站而保留的觸控最佳化、拖放編輯器環境，建立和管理應用程式的內容。 已經有使用AEM建立的網站？ AEM應用程式可讓您輕鬆重複使用內容、元件、工作流程、資產和許可權。

AngularJS應用程式模組 angularjs-application-module

AEM應用程式可為您處理大部分AngularJS設定，包括整合應用程式的頂層模組。 依預設，此模組名為「AEMAngularApp」，負責產生此模組的指令碼可在/libs/mobileapps/components/angular/ng-page/angular-app-module.js.jsp找到（和覆蓋）。

應用程式初始化的部分步驟包括指定應用程式相依的AngularJS模組。 您的應用程式使用的模組清單由位於/libs/mobileapps/components/angular/ng-page/angular-module-list.js.jsp的指令碼指定，並且可以由您自己的應用程式的頁面元件覆蓋，以提取您的應用程式所需的任何其他AngularJS模組。 例如，將上述指令碼與Geometrixx實作(位於/apps/geometrixx-outdoors-app/components/angular/ng-geometrixx-page/angular-module-list.js.jsp)進行比較。

為了支援應用程式中不同狀態之間的導覽，angular — 應用程式 — 模組指令碼會逐一瀏覽頂層應用程式頁面的所有下級頁面，以產生一組「路由」，並設定Angular$routeProvider服務上的每個路徑。 如需此做法在實務中的範例，請檢視angular應用程式範例產生的Geometrixx Outdoors — 應用程式 — 模組指令碼： （連結需要本機例項） http://localhost:4502/content/phonegap/conference-app/en/home.angular-app-module.js

在挖掘產生的AEMAngularApp時，您會找到一系列指定的路由，如下所示：

$routeProvider
.when('/content/phonegap/geometrixx-outdoors/en/home/products/:id', {
    templateUrl: 'home/products.template.html',
    controller: 'contentphonegapgeometrixxoutdoorsenhomeproducts'
})

上述範例特別說明將引數作為路徑的一部分傳遞的範例。 在此範例中，這表示請求符合指定模式(https://experienceleague.adobe.com/content/phonegap/geometrixx-outdoors/en/home/products/%EF%BC%9Aid?lang=zh-Hant)的路徑時，該路徑應由home/products.template.html範本處理，並使用「contentphonegapgeometrixoutdoorsenhomeproducts」控制器。

templateUrl屬性指定請求此路由時要載入的範本。 此範本包含已包含在頁面上的AEM元件的HTML，以及連線應用程式使用者端所需的任何AngularJS指令。 如需Geometrixx元件中AngularJS指示詞的範例，請檢視swipe-carousel的template.jsp (https://experienceleague.adobe.com/apps/geometrixx-outdoors-app/components/swipe-carousel/template.jsp?lang=zh-Hant)的第45行。

頁面控制項 page-controllers

用Angular自己的話說，「控制器是用於擴大Angular範圍的JavaScript建構函式。」 (source)AEM App中的每個頁面都會自動連線至控制器，而控制器可由任何指定 frameworkType 之 angular. 以範例檢視ng-text元件(https://experienceleague.adobe.com/libs/mobileapps/components/angular/ng-text?lang=zh-Hant)，包括cq：template節點，每次將此元件新增至頁面時，都會包含此重要屬性。

如需更複雜的控制器範例，請開啟ng-template-page controller.jsp指令碼(在/apps/geometrixx-outdoors-app/components/angular/ng-template-page)。 其中特別值得關注的是它在執行時產生的JavaScript程式碼，其呈現方式如下：

// Controller for page 'products'
.controller('contentphonegapgeometrixxoutdoorsenhomeproducts', ['$scope', '$http', '$routeParams',
    function($scope, $http, $routeParams) {
        var sku = $routeParams.id;
        var productPath = '/' + sku.substring(0, 2) + '/' + sku.substring(0, 4) + '/' + sku;
        var data = $http.get('home/products' + productPath + '.angular.json' + cacheKiller);

        /* ng-product component controller (path: content-par/ng-product) */
        data.then(function(response) {
            $scope.contentparngproduct = response.data["content-par/ng-product"].items;
        });

        /* ng-image component controller (path: content-par/ng-product/ng-image) */
        data.then(function(response) {
            $scope.contentparngproductngimage = response.data["content-par/ng-product/ng-image"].items;
        });
    }
])

在上述範例中，引數來自 $routeParams 使用服務，然後將服務組合到儲存JSON資料的目錄結構中。 處理SKU id 透過這種方式，您便可傳送單一產品範本，以針對可能數千種不同的產品呈現產品資料。 這是一種更具擴充性的模式，需要（潛在）大型產品資料庫中每個專案的個別路由。

此外還有兩個元件在運作：ng-product會使用從上方擷取的資料來擴大範圍 $http 呼叫。 此頁面上也有一個ng-image，這反過來也會擴大其從回應中擷取之值的範圍。 憑藉Angular的 $http 服務時，每個元件會耐心等候，直到請求完成且完成其所建立的Promise為止。

後續步驟 the-next-steps

瞭解單頁應用程式後，請參閱 使用PhoneGap CLI開發應用程式.