在AEM中创建第一个AngularSPA introduction

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

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

WKND SPA实施

关于

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

本教程专门设计用于 AEMas a Cloud Service 并且向后兼容 AEM 6.5.4+ 和 AEM 6.4.8+. 通过以下方式实施SPA：

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

最新代码

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

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

前提条件

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

虽然没有必要，但基本了解以下内容会很有帮助 开发传统AEM Sites组件.

本地开发环境 local-dev-environment

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

后续步骤 next-steps

你在等什么?!导航到 SPA编辑器项目 章中，并了解如何使用SPA项目原型生成启用AEM编辑器的项目。

向后兼容性 compatibility

本教程的项目代码是针对AEMas 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>

额外的Maven配置文件，名为 classic 已添加以修改内部版本并将其定位到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完成教程，请添加 classic 每当收到指示要执行Maven构建时的配置文件：

$ mvn clean install -PautoInstallSinglePackage -Pclassic

在为AEM实施生成新项目时，始终使用最新版本的 AEM项目原型 并更新 aemVersion 来定位您的AEM预期版本。