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 Éditeur d’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 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 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 un développeur front-end et un développeur back-end. Nous pensons qu’il est bénéfique pour tout développeur qui sera impliqué dans un projet AEM SPA Editor de suivre 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 la version 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.

La dernière base de code est disponible en tant que packages d’AEM téléchargeables.

Prérequis

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

Bien que cela ne soit pas nécessaire, il est préférable de posséder une compréhension de base du 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 la vidéo sont capturées à l’aide de AEM as a Cloud Service SDK 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?! Commencez le tutoriel en accédant au chapitre SPA Projet de l’éditeur et apprenez à générer un projet activé SPA Éditeur à l’aide de l’archétype de projet d’AEM.

Compatibilité descendante

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

La balise UberJar v6.4.4 a été incluse 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 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 profil classic est désactivé par défaut. Si vous suivez le tutoriel avec AEM 6.x, ajoutez le profil classic chaque fois que vous êtes invité à exécuter une version de Maven :

$ mvn clean install -PautoInstallSinglePackage -Pclassic

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

Sur cette page