Créer votre première SPA Angular dans AEM

Pour la publication d’AEM aux Edge Delivery Services, cliquez ici.

Bienvenue dans un tutoriel en plusieurs parties conçu pour les développeurs et développeuses qui découvrent l’éditeur de SPA dans Adobe Experience Manager (AEM). Ce tutoriel décrit l’implémentation d’une application Angular pour une marque de style de vie fictive, WKND. L’application Angular est développée et conçue pour être déployée avec l’éditeur de SPA d’AEM, qui mappe les composants d’Angular à ceux d’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 finale implémentée.

Implémentation de la SPA WKND

À propos

Ce tutoriel en plusieurs parties a pour objectif d’apprendre aux développeurs et développeuses comment implémenter une application Angular pour travailler avec la fonctionnalité d’éditeur de SPA d’AEM. Dans un scénario réel, les activités de développement sont réparties en rôles, comprenant souvent un développeur ou une développeuse front-end et back-end. Nous pensons qu’il est bénéfique pour toute personne développeuse chargée d’un projet d’éditeur de SPA d’AEM de suivre ce tutoriel.

Le tutoriel est conçu pour fonctionner avec AEM as a Cloud Service et est rétrocompatible avec AEM 6.5.4+ et AEM 6.4.8+. La SPA est implémentée à l’aide des éléments suivants :

Comptez 1 à 2 heures pour parcourir chaque partie du tutoriel.

Dernier code

Vous trouverez tout le code du tutoriel sur GitHub.

La base de code la plus récente est disponible sous forme de packages AEM téléchargeables.

Prérequis

Avant de commencer ce tutoriel, il vous faut :

Bien que cela ne soit pas une nécessité, il est préférable de posséder des connaissances élémentaires en développement de composants traditionnels d’AEM Sites.

Environnement de développement local

Pour suivre ce tutoriel, un environnement de développement local est nécessaire. Les captures d’écran et les vidéos sont enregistrées à l’aide du SDK AEM as a Cloud Service exécuté dans un environnement macOS avec Visual Studio Code comme IDE. Sauf indication contraire, les commandes et le code doivent être indépendants du système d’exploitation local.

REMARQUE

Étapes suivantes

Qu’attendez-vous ? Commencez le tutoriel en accédant au chapitre du projet d’éditeur de SPA et découvrez comment générer un projet où l’éditeur de SPA est activé à l’aide de l’archétype de projet AEM.

Rétrocompatibilité

Le code de projet de ce tutoriel a été créé pour AEM as a Cloud Service. Pour rendre le code du projet rétrocompatible avec les versions 6.5.4+ et 6.4.8+, plusieurs modifications ont été apportées.

L’UberJar v6.4.4 a été inclus comme 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 profil Maven supplémentaire nommé classic a été ajouté pour modifier la version afin de cibler les environnements AEM 6.x :

  <!-- 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, ajoutez le profil classic lorsqu’indiqué pour créer une version Maven :

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Lors de la génération d’un nouveau projet pour une implémentation AEM, utilisez toujours la dernière version de l’archétype de projet d’AEM et mettez à jour aemVersion pour cibler la version d’AEM prévue.

Sur cette page