Hi all, today I was trying to use AngularJS with Sightly in AEM6. You may ask how did I come to this situation. Well, the point is that I need to develop a Filter component, that depending on the user’s input, filters some subcomponents to be loaded. My happy idea was to load have a Servlet in Adobe AEM, that provided AngularJS an array of JSON Objects, each of them with the path of the resource to be rendered plus some special properties that could help me to show or hide the component with use of the ng-show and ng-hide directives.
Why AngularJS? Simple answer, because I like it a lot and I prefer to do magic with it instead of picking jQuery and writing things like “Ok, jQuery now, take all the elements with that class, if bla, then bla, if foo then add class buttonBlue” etc. That was incredible before discovering Angular, now it seems to me a little bit like assembly in comparison with Java.
The first approach was promising, I started really simple, but safe. I included the AngularJS in the head section of my page and tried to put the ng-app directive on the component with a simple expression like {{ 1 + 3 }}, it worked! 4 was shown! I know, that is a shit compared what it can be done with this framework but Angular was at least there… Then, encouraged with this amazing results I added a simple Angular module, no dependencies, no functions, nothing: it was only getting a $scope and on that Scope I inserted a property name, initialized to world… like $scope.name = “world”; You can imagine what comes next… yeah an input for that name and a fabulous HTML paragraph with the text Hello {{name}} that at the beginning displayed the world famous “Hello world” message and as soon as you tipped something on the input, it changed the displayed message instantly: Awesome, Angular at work.
The problem came when trying to use data-sly-include={{component.path}}… Why? Because Sightly tries to include the thing before rendering the page and Angular isn’t there until the page is loaded… So.. we have a conflict of nature… Here I had three ideas:
- I could give some attribute to the data-sly-include div and then use Angular to search for it… but that wasn’t the way I wanted to use it.
- Another way could be load all the component information in a JSON Object and use some kind of template… but that goes against the principles of Sling.
- As the solution this time doesn’t feel to fit together in a natural manner, be a good engineer and go for a trade off, go for jQuery.
This time chose the third one. But you know I like to do this kind of stuff and try to innovate every time I can, so lets see what comes next!