This article elaborates on the usage of AngularJS and this in combination with AEM (Adobe Experience Manager). For this example, AEM version 6 has been used.
From a functional point of view, the (rather basic) software component will allow to enter a JCR path and, by using AngularJS, all the corresponding nodes will be automatically retrieved an displayed.
The UI form, being the main actor in our solution, would look the following. It’s obvious the lay-out could be improved quite a bit but this is not really the focus of this tutorial.
From a technical point of view, we’ll be using AngularJS (as mentioned before), jQuery and the DataTables jQuery plugin.
We first start with the HTML (view) and you’ll notice we did an effort to exclude all the business logic and to stick to the basic HTML.
As you can figure out from the comment, the AEM properties.jcrPath variable contains the initial value of the path to be queried. The value of the variable jcrPath is persisted in the JCR and has been defined during creation and configuration of our AEM component. Please find below an image of how the dialog of our component looks like.
In our view we display the value of our jcrPath variable and apply a basic filter but this is mostly for debugging or illustrative purposes.
In our module Angular module and controller, we assign the value of the properties.jcrPath variable to the scope.jcrpath variable and we add the slash. We’ll elaborate in a minute on the logic of the added slash.
As a next step, we trigger an HTTP GET request. In the above picture, you can see we actually have 2 JSP components being test3.jsp and test3.jcr.jsp. So basically we started from the test3.jsp servlet and from this servlet we trigger a second servlet that will be responsible for returning a JSON response.
We’ll quickly focus on the second servlet. This component uses the jcrPath parameter and triggers a request towards an OSGI bundle and it’s the OSGI bundle that will actually retrieve and return all the nodes related to a path.
The below small sequence diagram depicts once again the entire flow:
The watch function completes our example. In our watch function we define a listener and we invoke the getEntries method again but only when the end of our jcrPath contains a slash. You’ll agree there is no point in invoking the getEntries method every type the user enters a character in the jcrPath field and it only makes sense to retrieve the nodes when the jcrPath is complete.
The complete code can be found by using following urls:
And the 2 below images proof our AEM AngularJS component actually works (simply focus on the total number of entries as depicted in the small blue rectangle at the bottom).
I hope this article has been useful to understand how AngularJS can be used in combination with AEM. Don’t hesitate to ask questions or to recommend amendments.
All the best,
Wim Van den Brande.