单页应用程序

注意

Adobe建议对需要基于单页应用程序框架的客户端渲染(例如,React)的项目使用SPA编辑器。 了解更多.

单页应用程序 (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

AEM应用程序中的单页应用程序框架支持AngularJS应用程序的高性能,同时使作者(或其他非技术人员)能够通过触控优化的拖放编辑器环境创建和管理应用程序的内容,该环境传统上是用于管理网站的保留环境。 是否已使用AEM构建站点? 您会发现,使用AEM应用程序可以轻松地重复利用您的内容、组件、工作流、资产和权限。

AngularJS应用程序模块

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的$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-Hans)时,应由home/products.template.html模板处理该路径并使用“contentphonegapgeometrixxouthomeproducts”控制器。

templateUrl属性指定了请求此路由时要加载的模板。 此模板将包含页面中包含的AEM组件的HTML以及连接应用程序客户端所需的任何AngularJS指令。 有关Geometrixx组件中AngularJS指令的示例,请查看swipe-carousel的template.jsp(/apps/geometrixx-outdoors-app/components/swipe-carousel/template.jsp?lang=zh-Hans)的第45行。

页面控制器

在Angular自己的话中,“控制器是用于扩大角范围的JavaScript构造函数。” ()AEM应用程序中的每个页面都会自动连接到控制器,该控制器可由任何指定以下项的控制器进行 frameworkType 增强 angular。 以ng-text组件为例(/libs/mobileapps/components/angular/ng-text?lang=zh-Hans),包括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;
        });
    }
])

在上例中,您会注意到,我们将从服务中选取一个参数,然后将其按摩到JSON数据所存储的目录结构中。 $routeParams 通过这种方式处 id 理sku,我们能够提供单个产品模板,该模板可呈现可能数千个不同产品的产品数据。 这是一个可扩展性更强的模型,它要求(可能)庞大的产品数据库中每个项目都有单独的路由。

此处还有两个组件:ng-product使用它从上述呼叫中提取的数据来扩大范 $http 围。 此页上还有一个ng-image,它又用它从响应中检索的值来扩大范围。 凭借Angular公司的服 $http 务,每个部件都将耐心等待,直到请求完成,它所创造的承诺得到履行。

后续步骤

了解单页应用程序后,请参阅使用PhoneGap CLI 开发应用程序

在此页面上