Integrating Ionic Framework into AEM

[doeringa]

Hi, 

I am currently developing an App in AEM based on the PhoneGap Starter Kit. The bootstrap project does bring in the Ionic css in their clientlibs, but I need to add the ionic.js as well. I've tried different approaches and ended up adding ionic.js and ionic-angular.js to the clientlibs. 

I can see in the developer tools that Ionic is being loaded but it is not compiling the html accordingly (meaning Ionic behaviour is not being applied). Adding 'ionic' to the angular-app-module-list.js.jsp brings up an Angular Module error. 

Does anybody know how to add Ionic to an AEM project? 

Any help is greatly appreciated. 

Thanks, Alex

[Anthony_R · Accepted solution]

Since this question has come up multiple times recently I've created a branch [0] on the starter kit that explores this option. This branch upgrades to ionic 1.1 and includes all the JS as well. The main issue revolves around loading all the JS in the proper order. Currently the branch solves this by using the version of angular that ionic uses in its bundle instead of the built in AEM angular.js clientlib. I think this could be cleaned up some more but to get started this branch will result in an app that includes all the ionic JS without throwing any errors. I haven't tested all the directives yet to see if they work but in theory they should if you build up your DOM according to Ionic patterns.

[0] https://github.com/Adobe-Marketing-Cloud-Apps/aem-phonegap-starter-kit/tree/feature/ionic-1.0