AEM with Angularjs | Community
Skip to main content
pranavku
pranavku
Level 2
October 11, 2017
Solved

AEM with Angularjs

  • October 11, 2017
  • 5 replies
  • 4384 views

I am new to AEM6.3 with Angularjs. I have been working on AEM for sometime now but I have never worked on Angularjs.

We have a requirement to develop single page application in AEM involving authoring and navigation and consuming some APIs. Can anyone here help me/guide me for initial understanding on whether is it possible or not. If yes how to approach this ?

Regards,

Pranav

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by __96

Hi pranavku,

The development of SPA in AEM is not that simple and will need lot of time and understanding. I can tell from my past experience with developing sites in AEM with Angularjs, it will need a lot of details but just from an overview point.

Yes it is possible to have angularjs based SPA in AEM but with angularjs < 2 version.

Angularjs is nothing but set of js libraries which you need to package as clientlibs and include in templates.

Authoring of single page application content is tricky as the main container only injects content from HTML partials and if you create HTML partial page UI in authoring will break. So in order to author them include all js css in the partial HTML(which will be template in your case) only in wcm.edit mode.

When injecting the partials into parent page(different template in your case)  all js and css should be included.

Other tricky thing is routing in angular. You have to identify which framework you want to use to route your pages.

There are a lot of other things which I can help you with in detail once you start the implementation.

Regards,

Samir

5 replies

Techaspect_Solu
Techaspect_Solu
Level 7
October 11, 2017

Hi Pranav,

You can integrate the AngularJS Framework into Adobe Experience Manager thereby enabling you to build components that take advantage of the AngularJS framework. Please refer below link. It guides you through the process of creating an AEM component that uses basic AngularJS functionality.

https://helpx.adobe.com/experience-manager/using/AngularJS.html

For more information about AngularJS, see https://angularjs.org/

We hope this information helps!

Regards,

TechAspect Solutions

__96
__96Accepted solution
Level 4
October 11, 2017

Hi pranavku,

The development of SPA in AEM is not that simple and will need lot of time and understanding. I can tell from my past experience with developing sites in AEM with Angularjs, it will need a lot of details but just from an overview point.

Yes it is possible to have angularjs based SPA in AEM but with angularjs < 2 version.

Angularjs is nothing but set of js libraries which you need to package as clientlibs and include in templates.

Authoring of single page application content is tricky as the main container only injects content from HTML partials and if you create HTML partial page UI in authoring will break. So in order to author them include all js css in the partial HTML(which will be template in your case) only in wcm.edit mode.

When injecting the partials into parent page(different template in your case)  all js and css should be included.

Other tricky thing is routing in angular. You have to identify which framework you want to use to route your pages.

There are a lot of other things which I can help you with in detail once you start the implementation.

Regards,

Samir

pranavku
pranavkuAuthor
Level 2
October 11, 2017

Hi, I have gone through all the available links on web and nothing looks helpful from implementation point of view. All the links talk about only component level customizations and not template level. Also there will be components involved on page which fetch values from dialogs which none of the articles on the web talk about. That's exactly where I need help specifically.

pranavku
pranavkuAuthor
Level 2
October 11, 2017

Thanks Samir, Can you point to any example which I can refer to understand it better.

__96
__96
Level 4
October 11, 2017

sorry pranavku​ exact example for implementation will not be available anywhere on the web. You have to join the puzzled pieces with some of POCs on your end and hopefully it will work.

I would suggest you to just start by understanding the routing concept with angularjs. Also how angular renderes content. Only after you have understood these concepts you can start tweaking AEM and it works. I have implemented around 4 such projects successfully.

Terms & ConditionsAccessibility statement

Loading footer...