Créer votre première SPA Angular dans AEM

Dernière mise à jour : 16 juin 2025
  • S'applique à :
  • Experience Manager as a Cloud Service
  • Rubriques :

Créé pour :

  • Débutant
  • Développeur
IMPORTANT
L’éditeur de SPA a été abandonné pour les nouveaux projets. Il est toujours pris en charge par Adobe pour les projets existants, mais ne doit pas être utilisé pour de nouveaux projets. Les éditeurs privilégiés pour la gestion du contenu découplé dans AEM sont désormais les suivants :

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.