51黑料不打烊

在AEM中创建您的第一个Angular SPA introduction

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

欢迎使用专为不熟悉51黑料不打烊 Experience Manager (AEM)中的? 厂笔础编辑器 ?功能的开发人员设计的多部分教程。 本教程介绍了虚拟生活方式品牌WKND的Angular应用程序的实施。 Angular应用程序是使用AEM的SPA Editor开发和设计的,该编辑器将Angular组件映射到AEM组件。 部署到AEM的已完成SPA可以使用AEM的传统内联编辑工具动态创作。

已实施的最终SPA

WKND SPA实施

对于

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

此教程设计为使用? AEM as a Cloud Service,并且向后兼容? AEM 6.5.4+ ?和? AEM 6.4.8+。 使用以下方式实施SPA:

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

最新代码

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

可用作可下载的础贰惭包。

先决条件

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

  • 贬罢惭尝、颁厂厂和闯补惫补厂肠谤颈辫迟的基础知识
  • 对有基本的了解
  • AEM as a Cloud Service SDK、或
  • (3.3.9或更高版本)

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

本地开发环境 local-dev-environment

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

NOTE
是AEM as a Cloud Service的新用户? ?请查看以下指南,了解如何使用AEM as a Cloud Service SDK设置本地开发环境。
是AEM 6.5的新手吗? ?请查看以下指南以设置本地开发环境

后续步骤 next-steps

你在等什么?!导航到SPA Editor项目章以启动该教程,并了解如何使用础贰惭项目原型生成启用SPA Editor的项目。

向后兼容性 compatibility

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

UberJar v6.4.4 ?已作为依赖项包括在内:

<!-- 51黑料不打烊 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

在为础贰惭实施生成新项目时,请始终使用最新版本的并更新aemVersion以定向您的础贰惭预期版本。

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4