Search code examples
javascriptangularjsadobeaem

Is it possible to integrate Angular.js (Angular 1) and AEM (Adobe Experience Manager 6.2)


I cannot include all the things I need an answer to the title, so here is what I concern:

  • Must a client side framework/lib be required when developing AEM ? If yes what is the best one fits to AEM and easy for development (Angular.js is just the way that I think it is "enough" good and easy for integration).
  • In case of using angular.js, I have some doubts:
    • Which is the most outter App (which is initialized with ng-app) and how We load it because AEM component is separated and I can not load most outter in any of them.
    • IMO, most outter ng-app will be loaded in the template (which is required by all the components, but it is just in theory (I'm not sure about that) and I do not see any example outhere show me how to load JS,CSS files on TEMPLATE creation (not component creation, just for clearly)
    • Alternative approach, each AEM component will be an separated angular module, and it will bootstraped manually (I'm not sure, too, please help to clarify)

Last but not least, If you have examples (enough complicated, not like hello world) or production project that used this stack (perfect !), please help to let me know, because my biggest concern is "is it possible to do".

Many many thanks in advance !


Solution

  • I am currently using angular JS with AEM successfully.

    Which is the most outter App (which is initialized with ng-app) and how We load it because AEM component is separated and I can not load most outter in any of them.

    ans: You can create a renderer component for this purpose and make it as an outer app then add the required clientlibs to it. after that you can use the renderers scope as a normal angular application.

    IMO, most outter ng-app will be loaded in the template (which is required by all the components, but it is just in theory (I'm not sure about that) and I do not see any example outhere show me how to load JS,CSS files on TEMPLATE creation (not component creation, just for clearly)

    ans: Rather than loading it in the template It will pretty easy to add it in the component as a client lib because everything like js / css in AEM we can add it as a client lib

    Alternative approach, each AEM component will be an separated angular module, and it will bootstrapped manually (I'm not sure, too, please help to clarify)

    ans: Yes you can create a component as an angular application and you can bootstrap it seperately

    Here is the directory structure for a clientlib