Cree su primer SPA de Angular en AEM

Le damos la bienvenida a un tutorial en varias partes diseñado para desarrolladores que utilicen la función SPA Editor de Adobe Experience Manager (AEM) de forma nueva. Este tutorial explica la implementación de una aplicación de Angular para una marca ficticia de estilo de vida, la WKND. La aplicación de Angular se desarrollará y se diseñará para implementarse con AEM Editor de SPA, que asigna componentes de Angular a componentes de AEM. El SPA completado, implementado en AEM, se puede crear dinámicamente con herramientas de edición en línea tradicionales de AEM.

SPA final implementado

Implementación de WKND SPA

Acerca de

El objetivo de este tutorial de varias partes es enseñar a un desarrollador cómo implementar una aplicación de Angular para trabajar con la función SPA Editor de AEM. En un escenario real, las actividades de desarrollo se desglosan por persona, con frecuencia involucrando a un desarrollador de Front End y a un desarrollador de Back End. Creemos que es beneficioso para cualquier desarrollador que esté involucrado en un proyecto AEM Editor SPA completar este tutorial.

El tutorial está diseñado para funcionar con AEM como Cloud Service y es compatible con AEM 6.5.4+ y AEM 6.4.8+. El SPA se implementa mediante:

Calcule entre 1 y 2 horas para pasar por cada parte del tutorial.

Último código

Todo el código del tutorial se encuentra en GitHub.

El código base más reciente está disponible como paquetes AEM descargables.

Requisitos previos

Antes de iniciar este tutorial, necesita lo siguiente:

Aunque no es necesario, resulta beneficioso tener una comprensión básica del desarrollo de componentes tradicionales de AEM Sites.

Entorno de desarrollo local

Se necesita un entorno de desarrollo local para completar este tutorial. Las capturas de pantalla y el vídeo se capturan usando el SDK de AEM as a Cloud Service que se ejecuta en un entorno de Mac OS con Visual Studio Code como IDE. Los comandos y el código deben ser independientes del sistema operativo local, a menos que se indique lo contrario.

NOTA

¿Es novato en el uso de AEM as a Cloud Service? Consulte la siguiente guía para configurar un entorno de desarrollo local con el SDK de AEM as a Cloud Service.

¿Es nuevo en AEM 6.5? Consulte la siguiente guía para configurar un entorno de desarrollo local.

Pasos siguientes

¡¿Qué estás esperando?! Inicie el tutorial navegando hasta el capítulo SPA Editor Project y aprenda a generar un proyecto habilitado para Editor de SPA con el tipo de archivo del proyecto AEM.

Compatibilidad con versiones anteriores

El código de proyecto de este tutorial se ha creado para AEM como Cloud Service. Para que el código del proyecto sea compatible con versiones anteriores para 6.5.4+ y 6.4.8+ se han realizado varias modificaciones.

El UberJar v6.4.4 se ha incluido como una dependencia:

<!-- 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>

Se ha añadido un perfil Maven adicional, denominado classic, para modificar la compilación y dirigirla a entornos de AEM 6.x:

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

El perfil classic está deshabilitado de forma predeterminada. Si sigue el tutorial con AEM 6.x, añada el perfil classic siempre que se le indique que realice una compilación de Maven:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Al generar un nuevo proyecto para una implementación AEM, utilice siempre la versión más reciente del AEM tipo de archivo del proyecto y actualice el aemVersion para dirigirse a la versión de AEM que desee.

En esta página