单页面应用程序 single-page-applications

单页应用程序 (SPA)已达到临界质量，被广泛认为是使用web技术构建无缝体验的最有效模式。 通过遵循SPA模式，您可以创建一个与桌面或移动设备应用程序性能相同的应用程序，但由于该应用程序在开放Web标准中的基础，因此可以实现多种设备平台和外形规格。

一般而言，SPA比传统的基于页面的网站更能显示效果，因为它们通常加载完整的HTML页面 仅一次 （包括CSS、JS和支持字体内容），然后只加载每次应用程序中发生状态更改时所需的内容。 这种状态更改所需的内容可能因所选技术集而异，但通常包括用于替换现有“view”的单个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/:id?lang=zh-Hans)的路径时，应由home/products.template.html模板处理该路径，并使用“contentphonegemetrixxoutdoorsenhomeproducts”控制器。

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

页面控制者 page-controllers

用Angular自己的话来说，“控制器是一个JavaScript构造函数，用于扩大Angular范围。” (来源)AEM应用程序中的每个页面都会自动连接到控制器，该控制器可通过指定 frameworkType of angular. 以ng-text组件为例(https://experienceleague.adobe.com/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;
        });
    }
])

在上例中，您会注意到我们使用 $routeParams 服务，然后将其按摩到存储JSON数据的目录结构中。 通过处理SKU id 通过这种方式，我们能够提供单个产品模板，该模板可以呈现潜在数千个不同产品的产品数据。 这是一个扩展性更强的模型，它要求在（可能）庞大的产品数据库中为每个项目提供单独的路径。

此处还包含两个组件：ng-product通过它从上面提取的数据来扩展范围 $http 呼叫。 此页面上还有一个ng图像，该图像反过来也通过从响应中检索的值来扩展范围。 由于Angular $http 服务中，每个组件将耐心等待，直到请求完成并履行它创建的承诺。

后续步骤 the-next-steps

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