單頁應用程式

注意

Adobe建議針對需要單頁應用程式架構用戶端轉換的專案使用SPA編輯器(例如React)。 了解更多.

單頁應用程式 (SPA)已達到臨界規模,被廣泛認為是運用Web技術建立順暢體驗的最有效模式。透過遵循SPA模式,您可以建立與案頭或行動應用程式相同的應用程式,但由於應用程式以開放Web標準為基礎,因此可觸及到多種裝置平台和外形規格。

一般而言,SPA的效能會比傳統的頁面型網站更好,因為SPA通常只會載入一次​完整的HTML頁面(包括CSS、JS和支援字型內容),然後只載入每次應用程式狀態變更時所需的內容。​此狀態變更的必要項目可能會視所選技術而有所不同,但通常會包含單一HTML片段以取代現有的「檢視」,以及執行JS程式碼區塊以連線新檢視並執行任何可能必要的用戶端範本轉換。 支援範本快取機制,或使用Adobe PhoneGap離線存取範本內容,可進一步改善此狀態變更的速度。

AEM 6.1支援透過AEM Apps建立和管理SPA。 本文將介紹SPA的概念,以及它們如何運用AngularJS將您的品牌帶入App Store和Google Play。

AEM應用程式中的SPA

AEM Apps中的單頁應用程式架構可讓AngularJS應用程式發揮高效能,同時讓作者(或其他非技術人員)透過觸控最佳化拖放編輯器環境來建立和管理應用程式的內容,而傳統上,編輯器環境是專為管理網站而保留的。 已使用AEM建立網站? 您會發現,使用AEM Apps可輕鬆重複使用您的內容、元件、工作流程、資產和權限。

AngularJS應用程式模組

AEM Apps會為您處理大部分的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-app-module指令碼會重複您頂層應用程式頁面的所有子頁面,以產生一組「路由」,並設定Angular的$routeProvider服務上的每條路徑。 如需實際運作的範例,請參閱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'
})

上述範例特別說明將參數傳入路徑的範例。 在此範例中,我們指出當要求符合指定模式的路徑(/content/phonegap/geometrixx-outdoors/en/home/products/:id?lang=zh-Hant)時,應由home/products.template.html範本處理,並使用'contentphoneggeometrixxoutsenhomeproducts'控制器。

templateUrl屬性指定了在請求此路由時要載入的模板。 此範本將包含AEM元件(已包含在頁面上)的HTML,以及連接應用程式用戶端所需的任何AngularJS指令。 如需Geometrixx元件中AngularJS指令的範例,請檢視swipe-carousel的template.jsp(/apps/geometrixx-outdoors-app/components/swipe-carousel/template.jsp?lang=zh-Hant)的第45行。

頁面控制器

在Angular自己的單字中,「控制器是用於增大角度範圍的JavaScript建構子。」 (source)AEM App中的每個頁面都會自動連線至控制器,而控制器可讓任何指定angularframeworkType控制器加以擴充。 以ng-text元件為例(/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服務,每個元件將耐心等待,直到請求完成並完成其建立的承諾。

後續步驟

瞭解「單頁應用程式」後,請參閱「使用PhoneGap CLI開發應用程式」

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now