Créer votre première SPA Angular dans AEM

Bienvenue dans un tutoriel en plusieurs parties conçu pour les développeurs qui découvrent la fonction SPA Editor de Adobe Experience Manager (AEM). Ce tutoriel présente la mise en oeuvre d'une application d'Angular pour une marque fictive de style de vie, le WKND. L’application d’Angular sera développée et conçue pour être déployée avec AEM SPA Editor, qui mappe les composants d’Angular aux composants AEM. Les SPA terminées, déployées sur AEM, peuvent être créées dynamiquement à l’aide des outils de modification en ligne traditionnels d’AEM.

SPA final mis en oeuvre

Implémentation de la SPA WKND

À propos d’

L’objectif de ce didacticiel en plusieurs parties est d’apprendre à un développeur comment mettre en oeuvre une application d’Angular pour travailler avec la fonction SPA éditeur d’AEM. Dans un scénario réel, les activités de développement sont ventilées par personne, impliquant souvent un développeur frontal et un développeur dorsal. Nous pensons qu'il est bénéfique pour tout développeur qui sera impliqué dans un projet AEM SPA Editor de compléter ce tutoriel.

Le tutoriel est conçu pour fonctionner avec AEM en tant que Cloud Service et est rétrocompatible avec AEM 6.5.4+ et AEM 6.4.8+. La SPA est mise en oeuvre en utilisant :

Estimez 1 à 2 heures pour passer en revue chaque partie du tutoriel.

Dernier code

Vous trouverez tout le code du didacticiel sur GitHub.

La dernière base de code est disponible sous forme de paquets AEM téléchargeables.

Conditions préalables

Avant de commencer ce didacticiel, vous aurez besoin des éléments suivants :

Bien qu'il ne soit pas nécessaire, il est bénéfique de bien comprendre de base le développement des composantes traditionnelles de l'AEM Sites.

Environnement de développement local

Un environnement de développement local est nécessaire pour compléter ce tutoriel. Les captures d’écran et la vidéo sont capturées à l’aide de l’AEM en tant que SDK Cloud Service s’exécutant sur un environnement Mac OS avec Visual Studio Code en tant qu’IDE. Sauf indication contraire, les commandes et le code doivent être indépendants du système d'exploitation local.

REMARQUE

Vous découvrez AEM as a Cloud Service ? Consultez le guide suivant pour configurer un environnement de développement local à l’aide de l’AEM en tant que SDK Cloud Service.

Nouveau à AEM 6.5 ? Consultez le guide suivant pour la configuration d'un environnement de développement local.

Étapes suivantes

Qu'attendez-vous ? ! Début du didacticiel en accédant au chapitre SPA Editor Project et en apprenant comment générer un projet SPA Editor activé à l’aide de l’archétype de projet AEM.

Compatibilité descendante

Le code de projet de ce didacticiel a été créé pour AEM en tant que Cloud Service. Afin de rendre le code du projet rétrocompatible pour 6.5.4+ et 6.4.8+, plusieurs modifications ont été apportées.

Le UberJar v6.4.4 a été inclus en tant que dépendance :

<!-- 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 autre profil Maven, nommé classic a été ajouté pour modifier la version en environnements cible 6.x AEM :

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

Le profil classic est désactivé par défaut. Si vous suivez le tutoriel avec AEM 6.x, veuillez ajouter le profil classic dès que vous avez reçu l'ordre d'exécuter une compilation Maven :

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Lors de la génération d'un nouveau projet pour une mise en oeuvre AEM, utilisez toujours la dernière version de l'AEM Archétype de projet et mettez à jour aemVersion afin de cible la version que vous souhaitez de l'AEM.

Sur cette page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free