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

[Para publicar desde AEM Sites usando Edge Delivery Services, haga clic aquí.]{class="badge positive" title="Publish AEM de los Edge Delivery Services a los"}

SPA Bienvenido a un tutorial de varias partes diseñado para desarrolladores nuevos en la función Editor de de 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 de trabajo 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 Se Implementó La Versión Final De La Implementación

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, a menudo involucrando a un desarrollador front-end y a un 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 funcionar con AEM as a Cloud Service AEM AEM y es compatible con 6.5.4+ y 6.4.8+. SPA La aplicación de la se realiza mediante:

Calcular de 1 a 2 horas para completar cada parte del tutorial.

Último código

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

AEM La base de código más reciente está disponible como paquetes de código descargables de la aplicación de descarga de la aplicación de código de la aplicación de código de.

Requisitos previos

Antes de iniciar este tutorial, necesita lo siguiente:

Aunque no es necesario, es beneficioso tener una comprensión básica del 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. Las capturas de pantalla y los vídeos se capturan mediante el SDK de AEM as a Cloud Service que se ejecuta en un entorno de sistema operativo Mac 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.

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

Siguientes pasos next-steps

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

Compatibilidad con versiones anteriores compatibility

El código de proyecto de este tutorial se ha creado para AEM as a 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.

UberJar v6.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>

AEM Se ha agregado un perfil de Maven adicional, denominado classic, para modificar la compilación a los entornos de destino de la versión 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 manera predeterminada. AEM Si está siguiendo el tutorial con la versión 6.x, agregue el perfil classic siempre que se le indique que realice una compilación de Maven:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

AEM AEM AEM Al generar un nuevo proyecto para una implementación de, utilice siempre la última versión del Arquetipo de proyecto y actualice aemVersion para que se dirija a la versión de la que desea que sea el tipo de archivo de la versión de la aplicación {}.

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