AEM angular

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
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


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


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

app.service('HttpService', function($http) {
    this.getPosts=function () {
       var promise = $http.get("");
       return promise;

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

app.controller('FeedController', function($scope, HttpService) {
    HttpService.getPosts().then(function(posts) {
        console.log("The request success: " +;
        $scope.posts =;
        $scope.length = $scope.posts.length;
    }, function(result) {
        console.log("The request failed: " + result);

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

app.component('feed', {
    templateUrl: 'feed.html',
    bindings: {
        posts: "<"
    controller: 'FeedController'

 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

var app = angular.module('angular-app', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
    when('/tab1', {
        templateUrl: 'tab1.html',
        controller: 'FeedController'
    when('/tab2', {
        templateUrl: 'tab2.html',
        controller: 'FeedController'
        redirectTo: '/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
Open the feed.html file of aem feed component and then add below code, here I am loading angular component using feed tag

<div  ng-app="angular-app">
<sly data-sly-include="feed.angular.html"></sly>

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

<script type = "text/ng-template" id = "feed.html">
   <p><a href = "#!/tab1">Tab 1</a></p>
      <p><a href = "#!/tab2">Tab 2</a></p>
      <div ng-view></div>
<script type = "text/ng-template" id = "tab1.html">
   <div ng-controller="FeedController">
       <div ng-repeat="post in posts">
       <ul><li>Tab 1 data....{{post.title}}</li></ul></div></div>
<script type = "text/ng-template" id = "tab2.html">
   <div ng-controller="FeedController">
       <ul ng-repeat="post in posts"><li>Tab 2 data....{{post.title}}</li></ul></div>

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

Download Code

[sociallocker] Angular integration with aem[/sociallocker]

By coderss

Leave a Reply

Your email address will not be published. Required fields are marked *