WKND Events for Angular and AEM SPA Editor

angular-logo

This tutorial builds single-page application (SPA) experience for a fictional company WKND Events, using AEM SPA Editor and the Angular framework.

The focus of this tutorial explains how AEM SPA Editor and its supporting functionalities, support the creation of Angular application in an unobtrusive manner. This tutorial explores best practices and strategies for accelerating front-end development and decreasing the developer's dependency on AEM. 


Tutorial overview

An abridged overview of the Getting Started with Angular and AEM SPA Editor tutorial.

Github.com and the source code

All the source code and configuration created and used in this project is available on Github.com.

The end-state of each chapter is available via branches in the Github repository as well as in a single, easy to download ZIP file.

Note that this project houses a sister project that addresses React development. Please make sure to use branches and release files denoted as angular.

Downloads

Local development environment

A local development environment is necessary to complete this tutorial. Screenshots and video are captured from a Mac OS environment but the commands and code used should be independent of the local operating system, unless otherwise noted.

New to AEM? Check out the following guide to setting up a local development environment.

Required software

The following should be installed:

Start by double checking that the above tools have been installed and available via the command line path. Open up a new terminal and run the following commands:

Integrated Development Environment (IDE)

This tutorial uses Visual Studio Code as the IDE, however any IDE that has support for Angular, Java and Maven projects can be used. The reliance on specific IDE features in this tutorial is minimal.

For detailed steps for using Visual Studio Code for local development with AEM check out the following guide.

Next steps

Want to skip to the end?

Install the final AEM packages on AEM 6.5 or 6.4 SP2:

  1. Download the following ZIP files from the latest Github release for [Angular] WKND Events.
    • aem-guides-wknd-events.ui.apps-0.0.1-SNAPSHOT.zip
    • aem-guides-wknd-events.ui.content-0.0.1-SNAPSHOT.zip
  2. Navigate to AEM Package Manager
  3. Upload and install both AEM packages via AEM Package Manager
  4. Navigate to AEM > Sites > WKND Events > Angular > Home and explore the SPA Editor experience!

Help!

If you get stuck or have additional questions make sure to check out the Experience League forums for AEM or view existing GitHub issues

Didn't find what you were looking for? Think you found an error? Please file a GitHub issue for the WKND Events project

Pull requests resolving specific issues (rather than adding or changing functionality) are welcome!

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy