Creación de su primer Angular SPA AEM de en la introduction

[Para publicar desde AEM Sites con Edge Delivery Services, haga clic aquí.]{class="badge positive" title="AEM Publicación desde el a los Edge Delivery Services"}

Bienvenido a un tutorial de varias partes diseñado para desarrolladores nuevos en la SPA Editor de función en Adobe Experience Manager AEM (). Este tutorial explora la implementación de una aplicación de Angular para una marca ficticia de estilo de vida, la WKND. La aplicación de Angular AEM SPA está desarrollada y diseñada para implementarse con el Editor de, que asigna componentes de Angular AEM a componentes de la. SPA AEM AEM Los segmentos completados, implementados para la creación de informes de forma dinámica, se pueden crear con las herramientas de edición en línea tradicionales de la creación de informes de la versión en tiempo de ejecución de la versión en tiempo de ejecución de la.

SPA Implementación final de

SPA Implementación de WKND

Acerca de

El objetivo de este tutorial de varias partes es enseñar a un desarrollador cómo implementar una aplicación de Angular SPA AEM para trabajar con la función Editor de de. En un escenario real, las actividades de desarrollo se desglosan por persona, lo que a menudo implica un Desarrollador front-end y una Desarrollador back-end. AEM SPA Creemos que es beneficioso para cualquier desarrollador involucrado en un proyecto de Editor de completar este tutorial.

El tutorial está diseñado para trabajar con AEM as a Cloud Service y es compatible con AEM.5.4+ y AEM.4.8+. SPA La aplicación de la se realiza mediante:

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

Último código

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

El última base de código AEM está disponible como paquetes de descarga de la aplicación de descarga de.

Requisitos previos

Antes de iniciar este tutorial, necesita lo siguiente:

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

Entorno de desarrollo local local-dev-environment

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

NOTE
¿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.
AEM ¿Nuevo en la versión 6.5 de? Consulte la siguiente guía para configurar un entorno de desarrollo local.

Siguientes pasos next-steps

¿Qué estás esperando?! Inicie el tutorial navegando hasta SPA Proyecto de editor de SPA AEM y aprenda a generar un proyecto habilitado para el Editor de mediante el Tipo de archivo del proyecto de.

Compatibilidad con versiones anteriores compatibility

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

El UberJar Versión 6.4.4 se ha incluido como 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>

Un perfil de Maven adicional, denominado classic AEM se ha agregado para modificar la compilación en entornos de target 6.x:

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

El classic El perfil de está desactivado de forma predeterminada. AEM Si está siguiendo el tutorial con la versión 6.x, añada la variable classic perfil cada vez que se le indique que realice una compilación de Maven:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

AEM Cuando genere un nuevo proyecto para una implementación de, utilice siempre la versión más reciente de AEM Tipo de archivo del proyecto y actualice el aemVersion AEM para dirigirse a la versión de destino de la que está.

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