在AEM中创建您的第一个AngularSPA

欢迎使用多部分教程,该教程专为不熟悉Adobe Experience Manager(AEM)中​SPA Editor​功能的开发人员设计。 本教程将指导您实施一个Angular应用程序,以打造一个虚构的生活方式品牌WKND。 将开发并设计该Angular应用程序以与AEM SPA Editor一起部署,后者将Angular组件映射到AEM组件。 部署到AEM的已完成SPA可以使用AEM的传统在线编辑工具进行动态创作。

已实施最终SPA

WKND SPA实施

关于

此多部分教程的目标是教开发人员如何实施Angular应用程序以使用AEM的SPA编辑器功能。 在现实场景中,开发活动按角色划分,通常涉及​前端开发人员​和​后端开发人员。 我们认为,对于任何将参与AEM SPA Editor项目的开发人员来说,完成本教程将会有所帮助。

本教程旨在将​AEM用作Cloud Service,并且向后兼容​AEM 6.5.4+​和​AEM 6.4.8+。 SPA的实施方式如下:

估计需要1-2小时才能完成教程的每个部分。

最新代码

所有教程代码都可以在GitHub上找到。

最新代码库可作为可下载的AEM包提供。

前提条件

在启动本教程之前,您需要满足以下条件:

虽然不需要,但对开发传统的AEM Sites组件有基 本的了解

本地开发环境

要完成本教程,需要本地开发环境。 屏幕截图和视频是使用AEM作为Cloud ServiceSDK捕获的,该SDK在Mac OS环境中运行,并且IDE为Visual Studio代码。 除非另有说明,否则命令和代码应独立于本地操作系统。

注意

初次使用AEM as aCloud Service? 请参阅以 下指南,以使用AEM as a Cloud ServiceSDK设置本地开发环境

AEM 6.5的新增功能? 请参阅以 下指南以设置本地开发环境

后续步骤

你在等什么?!启动本教程的方法是导航到SPA Editor项目章节,并了解如何使用AEM项目原型生成启用SPA Editor的项目。

向后兼容性

本教程的项目代码是为AEM as a Cloud Service构建的。 为了使项目代码向后兼容​6.5.4+​和​6.4.8+,做了若干修改。

UberJar v6.4.4​已作为依赖项包含在内:

<!-- Adobe AEM 6.x Dependencies -->
<dependency>
    <groupId>com.adobe.aem</groupId>
    <artifactId>uber-jar</artifactId>
    <version>6.4.4</version>
    <classifier>apis</classifier>
    <scope>provided</scope>
</dependency>

添加了名为classic的其他Maven配置文件,用于修改到目标AEM 6.x环境的内部版本:

  <!-- AEM 6.x Profile to include Core Components-->
    <profile>
        <id>classic</id>
        <activation>
            <activeByDefault>false</activeByDefault>
        </activation>
        <build>
        ...
    </profile>

默认情况下,classic配置文件处于禁用状态。 如果遵循AEM 6.x教程,请在指示您执行Maven内部版本时添加classic配置文件:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

为AEM实施生成新项目时,始终使用最新版本的AEM项目原型并更新aemVersion以定位您的目标AEM版本。

在此页面上