How to integrate AEM with Angular 1+

 

In this article, I am going to explain how to integrate AEM with angular 1+, I am using angular 1.6 version so that  I can build angular components instead of angular directives, the main advantage we get is it helps to upgrade to angular 2 very easy because the angular 2  completely works on component based architecture

If you are new to angular then I suggest you just get a basic idea of what is angular? before proceeding to next sections

The first thing what I am going to do is creating an aem clientlib under “etc/designs/” folder to store all js files, the category name for this clientlib is “toolkit.all”, please refer below screen shot, I am not going to cover much about AEM clientlibs here, I assume that the people who are reading this article are aware of how to create clientlibs etc…? if anyone is not familiar then I request you refer this article

clientlibs

Once, the clientlib is created then, what you need to do is loading angular related dependencies, first, you need to load angular 1.6+ javascript and then load angular-routes javascript files

angular.js

This s file loads angular 1.6+ related javascript which is the main entrypoint for angular applications

angular-route.js

This javascript file handles all routing related functionalities

Building Angular Feed Service

First, I am going to build angular service, this service contains a method called getPosts() which will return the feed data, inside this method I am making a request to the feed URL using angular built-in $http service

Building Angular Feed Controller

Next, I am going to build a controller that will make a request to getPosts() method of our custom “HttpService” gets  data and finally, it will be stored into posts object

Building Angular Feed Component

Next, I am going to build angular component, in simple terminology, this component will get the posts data and render it using on the page using feed.html file

 Angular Module

Next, you need to create app module which is an entry point for you angular application., here I am using routeProvider, to handle redirects, when user clicks on tab1 link then it will redirect to tab1.html file, similar way for tab2 also and the default redirect for this is feed.html

Building AEM Feed component

I am not going to explain what is AEM component here if you are new to AEM then I suggest you read this AEM Components article

I have created an AEM feed component, please refer below screenshot for component information

aem-angular-component

Open the feed.html file of aem feed component and then add below code, here I am loading angular component using feed tag

In the feed.angular.html file, add the below templates related code

Now, open the page and you should see something like below, on clicking of tab1 button the tab1 data will be loaded and on click of tab2 button the same data will be loaded once again with different HTML

aem-feed-angular-component

 

Download Code