AEM with Angular2

In this post, I will be sharing my view on Integrating AEM 6.1 with Angular2 and other front-end technologies with an example.

Getting started
Requirement
AEM component with Angular2.
Create an AEM with Angular2 Form Component which displays address suggestions to the user when the user starts typing in the address field and when the user selects one of the address suggestions, it should auto-populate the country, state, and zip code fields.

Leverage Angular2 Http Service to make Ajax calls to google maps API for the address suggestions and address details and display the response using Angular data-binding feature.

Leverage AEM Authoring capabilities to make the Form component labels authorable from the component dialog.

AEM Project Setup
Generate the project structure using maven archetype 10 and remove unwanted modules (ui.content, it.tests and it.launcher) for this project. Now we have two modules.
Core – contains Java files.
ui.apps – contains templates, components, Clientlibs, and Angular2 code.

Maven archetype 10 gives the basic project setup with the template, page components, and Clientlibs. So I’m directly jumping on to creating the Form component.

Creating the Contact Details Form Component
Create an AEM component with the name “contactdetails” under apps/ng2-aem/components/content/.
Use bootstrap ui framework to build the Form component UI.
Create the Touch UI dialog to make the Form title, description, first name, last name, email, and address field’s labels authorable.

Backend Code
ContactDetails POJO class
– /NG2-AEM.core/src/main/java/com/ng2/aem/core/models/ContactDetails.java

The ContactDetails class contains class members to match the fields specified in the component’s dialog, and also contains their getter and setter methods.

ContactDetailsUse class

– /NG2-AEM.core/src/main/java/com/ng2/aem/core/components/ContactDetailsUse.java

The ContactDetailsUse is the server-side part of the AEM component and it extends the WCMUsePojo class.

Contactdetails component HTL file
– apps/ng2-aem/components/content/contactdetails/contactdetails.html

Assuming that you are already familiar with creating components and dialog in AEM, I’m not showing the steps here to create it.

Component Dialog
Setting up the Angular2 code
Create a folder named “web” under /NG2-AEM.ui.apps/src/main/. This folder will contain our Angular2 code and its build configuration.
Build configuration

Create the following files under the web folder.
package.json

Few words about scripts
build: invokes the “gulp build” task which then calls the “run-webpack” task to transpile Typescript code into JavaScript and bundle all the JS files into two files and place it into the AEM clientlib folder.

aemsync: invokes the “gulp aemsync” task to sync the generated JavaScript files under “etc/designs” to running AEM Instance.

watch: invokes the “gulp watch” task to watch for the changes in typescript files, and when there is a change in typescript files it calls the “run-webpack” task.

NPM Packages
Angular 2 is broken into a lot of packages under @angular organization in NPM. We’ll need to install them and also need RxJS, Zone.js, and some shims which Angular2 depends on.
tsconfig.json

typings.json
Typings will be downloaded to the typings folder and they will be downloaded on “npm install”.

Webpack.config.js
In the Webpack config file, we specify all the source files where they are available and how to compile, and then after compilation where to put them.

Here I’m using webpack to transpile the Typescript code to JavaScript and bundle all the files into two JS files and place them into /etc/designs/ng2-aem/clientlib-site/js Clientlib folder.
app.js – contains the application code.
pollifills.js – contains the browser supporting libraries.

gulpfile.js
Gulp JS file contains the following tasks.
clean: deletes the JS files from “/etc/designs/Ng2-AEM/clientlib-site/js” clientlib folder before webpack task runs.
run-webpack: executes the webpack config file.
aemsync: sync the JS files created with webpack to running AEM Instance.
watch: watches for the changes made on Typescript files and runs the run-webpack task.

Angular2 Components
Angular2 is component-based. The component is the combination of an HTML template and a component class that controls a portion of the screen.

Every component begins with a @Component decorator function that takes a metadata object. The metadata object describes how the HTML template and component class work together.

The selector property tells Angular to display the component’s html inside a custom () tag.

The templateUrl property specifies the URL to an external file containing the html for the view.
ContactDetails Angular2 component
– web/src/app/components/contactdetails.component.ts

AddressSuggestion Model class
– web/src/app/models/address-suggestion.ts

ContactForm Model class
– web/src/app/models/contact-form.ts

ContactDetailsService Interface
– web/src/app/services/Icontactdetails.service.ts

ContactDetailsService class
– web/src/app/services/contactdetails.service.ts

Application Module
– web/src/app/app.module.ts

Application bootstrap
– web/src/main.ts