In this post, I will be sharing my view on Integrating AEM 6.1 with Angular2 and other front-end technologies with an example.
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 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.
ContactDetails POJO class
The ContactDetails class contains class members to match the fields specified in the component’s dialog, and also contains their getter and setter methods.
The ContactDetailsUse is the server-side part of the AEM component and it extends the WCMUsePojo class.
Contactdetails component HTL file
Assuming that you know how to create a component and dialog in AEM, so i’m not showing the steps to create it.
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 build configuration.
Create the following files under web folder.
Few words about scripts
watch : invokes the “gulp watch” task to watch the for the changes in typescript files, and when there is a change in typescript files it calls the “run-webpack” task.
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.
Typings will be downloaded to typings folder and they will be downloaded on “npm install”.
In 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.
- app.js – contains the application code.
- pollifills.js – contains the browser supporting libraries.
Gulp JS file contains 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 run-webpack task.
Angular2 is component based. 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
AddressSuggestion Model class
ContactForm Model class