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.
- Chapter 0 - Setting up the tutorial
- Chapter 1 - Bootstrapping the Angular application
- Chapter 2 - Setting up Angular routes and page resolution
- Chapter 3 - Mapping AEM content to Angular components
- Chapter 4 - Setting up the Angular development environment
- Chapter 5 - Setting up the Styles
- Chapter 6 - Building new and styling existing Angular components for AEM
- Chapter 7 - Layouting with AEM Responsive Grid
- Chapter 8 - Multi-page navigation with the List component
All the source code and configuration created and used in this project is available on Github.com.
Note that this project houses a sister project that addresses React development. Please make sure to use branches and release files denoted as angular.
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.
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.
Start the tutorial!
Install the final AEM packages on AEM 6.5 or 6.4 SP2:
- Download the following ZIP files from the latest Github release for [Angular] WKND Events.
- Navigate to AEM Package Manager
- Upload and install both AEM packages via AEM Package Manager
- Navigate to AEM > Sites > WKND Events > Angular > Home and explore the SPA Editor experience!