Creación de su primera SPA de Angular en AEM introduction
Bienvenido a un tutorial en varias partes diseñado para desarrolladores que se inician en la función Editor SPA de Adobe Experience Manager (AEM). Este tutorial explica la implementación de la aplicación Angular para la marca ficticia de estilo de vida, WKND. La aplicación de Angular se ha desarrollado y diseñado para implementarse con el editor de SPA de AEM, que asigna componentes de Angular a componentes de AEM. La SPA completada, implementada en AEM, se puede crear dinámicamente con las herramientas tradicionales de edición en línea de AEM.
Implementación de SPA de WKND
Acerca de
El objetivo de este tutorial en varias partes es enseñar a los desarrolladores a implementar una aplicación de Angular para trabajar con la función del editor de SPA de AEM. En un escenario real, las actividades de desarrollo se desglosan por persona y a menudo involucran un desarrollador front-end y un desarrollador back-end. El completar este tutorial resulta beneficioso para cualquier desarrollador que participe en un proyecto con el editor de SPA de AEM.
El tutorial está diseñado para trabajar con AEM as a Cloud Service, además es compatible con versiones anteriores de AEM 6.5.4+ y AEM 6.4.8+. La SPA se implementa usando lo siguiente:
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.
La base de código más reciente está disponible como paquetes descargables de AEM.
Requisitos previos
Antes de iniciar este tutorial, necesita lo siguiente:
- Comprender los conceptos básicos de HTML, CSS y JavaScript
- Familiaridad básica con Angular
- SDK de AEM as a Cloud Service, AEM 6.5.4+ o AEM 6.4.8+
- Java
- Apache Maven (3.3.9 o posterior)
- Node.js y npm
Aunque no es necesario, es útil tener un conocimiento básico 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 con el SDK de AEM as a Cloud Service, que se ejecuta en el entorno del SO de 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.
Siguientes pasos next-steps
Inicie ya el tutorial en el capítulo Proyecto de editor de SPA para generar un proyecto habilitado con el editor de SPA mediante el arquetipo de proyecto de AEM.
Compatibilidad con versiones anteriores compatibility
El código de proyecto de este tutorial se ha creado para AEM as a Cloud Service. Se han realizado varias modificaciones para que el código del proyecto sea compatible con versiones anteriores para 6.5.4+ y 6.4.8+.
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>
Se ha añadido un perfil de Maven adicional, denominado classic, para modificar la versión y dirigirla a los entornos de AEM 6.x de destino:
<!-- AEM 6.x Profile to include Core Components-->
<profile>
<id>classic</id>
<activation>
<activeByDefault>false</activeByDefault>
</activation>
<build>
...
</profile>
El perfil classic está desactivado de forma predeterminada. Si sigue el tutorial con AEM 6.x, añada el perfil classic cada vez 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 de AEM, use siempre la última versión del arquetipo del proyecto AEM y actualice aemVersion para que se adapte a la versión de AEM deseada.