AEM + SPA with Angular

AEM + SPA editor Frameworks with Angular

Hello Everyone,

 This Blog is about AEM SP2, Adobe has released AEM 6.4 SP2 frameworks recently. Also we know that it came up with SPA editor frameworks features, a long waiting solution for Single page Application with AEM better authoring experience or I would say same authoring experience as normal AEM pages.There are some features as listed below.

• Modularity
• 
  
• Re-usability
• It provides one to one mapping of AEM components with Angular component so we can create page with drag n drop one component multiple time and while page rendering it will helpful to render with same layout.
• Portability
• Sometimes we need to run our web application in various platforms so we might need to execute our application outside of AEM like Node server or any application server. Then also it is possible.
• Easy to Integration

Here I would like to write about how AEM + SPA is working with use of SPA Editor framework. So it might be helpful when we want to adapt a SPA framework while designing Single Page Application.

How AEM and SPA frameworks working? 

Step to Write AEM + Angular Custom Component for SPA
1. Create AEM Component : For AEM component we need to create one text and title component which will have two field (text and title). So in CRX/DE or any IDE which we are using create on CQ_Dialog as below SS.
 

2. Create TextandTitle Model exporter OSGI class:To export node's content data as json we would need to write Sling Modal exporter class for TextandTitle component

@Model(adaptables = SlingHttpServletRequest.class, adapters = {ComponentExporter.class}, resourceType = TextandTitle.RESOURCE_TYPE) @Exporter(name = ExporterConstants.SLING_MODEL_EXPORTER_NAME, extensions = ExporterConstants.SLING_MODEL_EXTENSION) public class TextandTitle implements ComponentExporter {     /*      * Path of resource type (Component path)      */ static final String RESOURCE_TYPE = "we-retail-journal/components/textandtitle";     /**      * Name of the resource property that will store the text.      */     private String propertyTEXT = "text";     /**      * Name of the resource property that will store the title.      */     private String propertyTITLE = "title";     @ScriptVariable     private ValueMap properties;     /*      * Get methods for Text and title      */     @Nullable     public String getText() {         return properties.get(propertyTEXT, String.class);     }     @Nullable     public String getTitle() {         return properties.get(propertyTITLE, String.class);     }     /**      * @see ComponentExporter#getExportedType()      */     @Nonnull     @Override     public String getExportedType() {         return RESOURCE_TYPE;     } }

Angular application code - In angular application code base we need to setup Node server and in package.json file make sure we import and install Adobe angular code library to map with AEM + angular component.(Node setup with Angular frameworks document I will update later on - it is also available at Adobe's website).

below 3 Adobe's node dependency mainly we need to add.

"@adobe/cq-angular-editable-components": "~1.0.2", - This provides the Angular components to get you started with integrating with the AEM Site Editor. The library code is the one in projects/cq-angular-editable-components For nowplease refer to the official WeRetail Journal for the sample application.
    "@adobe/cq-spa-component-mapping": "~1.0.3",
This module provides helpers to map resource types with SPA components.

    "@adobe/cq-spa-page-model-manager": "~1.0.1",
This module provides the API to manage the model representation of the pages that are composing a SPA.

1. Create textandtitle Angular component :  create angular component which as below, which will map one to one with AEM component.

• HTML - HTML file code will have HTML attributes and will useful to render content on page whether it is author, publish or standalone. 
• textandtitle.component.ts - This Type-Script file will contain actual business logic to read json and parse it to HTML to display.
• textandtitle.component.spec.ts - code coverage test cases 
• textandtitle.component.css - This file we will have to write css for component layout.

2. Create angular component Mapping with AEM component :  in "mapping.ts" file we need to write mapping for Angular component with respective AEM component. this mapping will help component to render as well as display content on browser.

Also, we will write edit configuration for initial drag n drop component default view (like normal AEM component on page)

import the Angular component which we have created above textandtitle component as per angular code and method

import { WeatherComponent } from "./weather/weather.component"; import {TextandTitleComponent} from "./textandtitle/textandtitle.component";

Component Edit Configuration - write component's edit configuration (AEM placeholder) for authoring page view empty component as below (I have addd condition for text property only...)

const TextandTitleEditConfig = {     emptyLabel: 'Text and Title',     isEmpty: function(cqModel) {         return !cqModel || !cqModel.text || cqModel.text.trim().length < 1;     } };

MapTO Function: As shown below we need to pass AEM component path and editconfig(in this case TextandTitleEditConfig)

MapTo('we-retail-journal/components/weather')(WeatherComponent); MapTo('we-retail-journal/components/textandtitle')(TextandTitleComponent, TextandTitleEditConfig);

3. app.module.ts -  Finally we are ready to import and use as module our AEM+Angular component to create Angular SPA application based on requirement.

Once we are finish with above steps to create custom AEM angular SPA editor component,we need to deploy content package, Angular code as well as OSGI bundle.
run ng build / maven build to create respective packages and then  deploy to AEM instance respectively.

SPA as a Stand Alone: TObe done