在AEM中创建第一个AngularSPA introduction

[要使用Edge Delivery Services从AEM Sites发布，请单击此处。]{class="badge positive" title="从AEM到Edge Delivery Services的Publish"}

欢迎使用专为Adobe Experience Manager (AEM)中​ SPA编辑器 ​功能的新手开发人员设计的多部分教程。 本教程介绍了虚拟生活风格AngularWKND的品牌应用程序的实施。 angular应用程序是使用AEM的SPA编辑器开发和设计的，该编辑器将Angular组件映射到AEM组件。 部署到AEM的已完成SPA可以使用传统的AEM内联编辑工具动态创作。

WKND SPA实现

关于

此多部分教程的目标是教开发人员如何实施Angular应用程序以使用AEM的SPA编辑器功能。 在真实情景中，开发活动按角色细分，通常涉及​ 前端开发人员 ​和​ 后端开发人员。 我们相信任何参与AEM SPA Editor项目的开发人员在完成本教程时都会受益。

此教程设计为使用​ AEM as a Cloud Service，并且向后兼容​ AEM 6.5.4+ ​和​ AEM 6.4.8+。 通过以下方式实施SPA：

预计需要1-2个小时来完成教程的每个部分。

最新代码

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

最新的代码库可用作可下载的AEM包。

先决条件

在开始本教程之前，您需要满足以下条件：

虽然不是必需的，但对开发传统AEM Sites组件有基本的了解是有益的。

本地开发环境 local-dev-environment

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

后续步骤 next-steps

你在等什么?!导航到SPA Editor项目一章，开始阅读本教程，并了解如何使用AEM项目原型生成启用SPA Editor的项目。

向后兼容性 compatibility

本教程的项目代码是为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版本。