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 le Éditeur de SPA dans Adobe Experience Manager (AEM). Ce tutoriel décrit la mise en oeuvre d’une application d’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 AEM SPA Editor, qui mappe les composants d’Angular aux composants 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’.

SPA finale implémentée

Implémentation SPA WKND

À propos

L’objectif de ce tutoriel en plusieurs parties est d’apprendre à un développeur comment mettre en oeuvre une application d’Angular pour travailler avec la fonctionnalité d’éditeur SPA d’AEM. Dans un scénario réel, les activités de développement sont ventilées par persona, impliquant souvent une Développeur front-end et un Développeur principal. Nous pensons qu’il est bénéfique pour tout développeur impliqué dans un projet d’AEM SPA Editor 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 mise en oeuvre à l’aide des éléments suivants :

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

Dernier code

Vous trouverez tout le code du tutoriel sur GitHub.

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

Prérequis

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

Bien qu’il ne soit pas nécessaire, il est préférable de posséder une compréhension élémentaire de la fonction développement des composants AEM Sites traditionnels.

Environnement de développement local

Un environnement de développement local est nécessaire pour terminer ce tutoriel. Les captures d’écran et les vidéos sont capturées à l’aide AEM SDK as a Cloud Service s’exécutant dans un environnement Mac OS avec Visual Studio Code comme IDE. Les commandes et le code doivent être indépendants du système d’exploitation local, sauf indication contraire.

REMARQUE

Étapes suivantes

Qu'attendez-vous?! Démarrez le tutoriel en accédant à la SPA Editor Project chapitres et découvrez comment générer un projet activé pour SPA Editor à l’aide d’AEM Project Archetype.

Compatibilité descendante

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 6.5.4+ et 6.4.8+ plusieurs modifications ont été apportées.

Le 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 AEM environnements 6.x :

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

Le classic profile est désactivé par défaut. Si vous suivez le tutoriel avec AEM 6.x, ajoutez le classic profile chaque fois qu’il est invité à effectuer une génération Maven :

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Lors de la génération d’un projet pour une mise en oeuvre AEM, utilisez toujours la dernière version de la variable AEM Archétype de projet et mettre à jour la variable aemVersion pour cibler la version d’AEM prévue.

Sur cette page