Has anyone else tried creating single-page applications with AngularJS and Adobe CQ? I'm finding the combination difficult to work with when trying to keep the advantages of the CQ authoring tool. I'm hoping that someone here can relate some of their best practices.
In a nutshell, here is the conundrum I'm running into.
I'm using AngularJS routes to pull "partial" pages into a view. This is working properly in CQ at the moment, using a set of components, one per partial, linked to a super resource type and template which are emtpy. I have pages declared for each partial in the site tool, and their resourceType is declared properly. The end result is each partial is being pulled without any unnecessary header/footer information being added. That's all good. The problem comes when viewing the site in the authoring tool.
The way it's set up is that I have a main template component which draws the site header and footer, including all the script and style tags, then includes a parsys in the middle of the page. Into that parsys I've dropped an instance of a component I created that i'm calling "angularview". It contains nothing but:
<div data-ng-view></div>
Those familiar with angular will recognize this as a simple view declaration. This is the container tag for angular to drop the currently selected view into based on the route configuration.
The way this renders on screen is a header, a blank section, and a footer. All the sub-component partials used by AnguarJS are hidden from the author, and I see no way to obvious way to present them.
The only thing I've been able to think of is to add dialogs for each of the partials so that they appear in the sidekick, then create a dummy page in which I drop all the partials. Maybe I could just code them in using <cq:component>, then declare each partial as a container component? This is where I'm hoping someone can offer some advice. What's the best way to go here?