<div dir="ltr"><font size="4" face="garamond, serif">Hi Everyone<br><br>One of my recent patches which enabled HTML5 based routing via Angular merged, some interesting things spun out. </font><div><font size="4" face="garamond, serif">I'd to scramble a few patches to get things<div class="gmail_default" style="display:inline">​​ back the same way </div>for all new Angular Panels. </font></div><div><font size="4" face="garamond, serif"><br></font></div><div><font size="4" face="garamond, serif">I also realized that getting Horizon to an SPA with Angular requires more thought than mere fixing the current burning issue. </font></div><div><font size="4" face="garamond, serif">This mail's intent is to spur a direction on how we do routing in Angular and how do Angular Panels go back/forth between themselves and older Django panels. </font></div><div><font size="4" face="garamond, serif"><br></font></div><div><font size="4" face="garamond, serif">The patch <a href="https://review.openstack.org/#/c/173885/" target="_blank">https://review.openstack.org/#/c/173885/</a> is possibly the first of many to use Angular based routing. </font></div><div><font size="4" face="garamond, serif">It currently uses ngRoute as the library was included in the xstatic-angular package. </font></div><div><font size="4" face="garamond, serif"><br></font></div><div><font size="4" face="garamond, serif">What I'm roughly thinking to solve some of the immediate issues (there's possbily much more that I'm not) </font></div><div><font size="4" face="garamond, serif"><br></font></div><div><font size="4" face="garamond, serif">1. If we are going to go with the SPA route, then all Panels need to indicate that they are Angular based. </font></div><div><font size="4" face="garamond, serif">For panels that are Angular, they need to declare routes they'd like to manage. </font></div><blockquote style="margin:0px 0px 0px 40px;border:none;padding:0px"><div><font size="4" face="garamond, serif"><br></font></div></blockquote><font size="4" face="garamond, serif">2. All tags on Angular Panels (including header, sidebar, footer) which don't route to Angular Panels will need the attribute target="_self" else Angular will not allow navigation to those links. </font><div><font size="4" face="garamond, serif"><br></font></div><div><font size="4" face="garamond, serif">All sidebar links currently have the attribute set but headers and footers don't. </font></div><div><font size="4" face="garamond, serif">Sidebar links for Angular shouldn't have the attribute else SPA like behavior will not happen. </font></div><div><div><font size="4" face="garamond, serif">This will need to be documen<div class="gmail_default" style="display:inline">​tation​</div><div class="gmail_default" style="display:inline">​</div><div class="gmail_default" style="display:inline">​</div><div class="gmail_default" style="display:inline">​</div>. </font></div></div><div><font size="4" face="garamond, serif"><br></font></div><div><font size="4" face="garamond, serif">3. That implies yet another problem with the Spinner Modal which gets activated on all sidebar clicks. </font></div><div><font size="4" face="garamond, serif">It'll need to be done differently for Angular routing vs hrefs still with Django. </font></div><div><font size="4" face="garamond, serif">The current spinner relies on a browser page refresh to disappear. </font></div><div><font size="4" face="garamond, serif"><br></font></div><div><font size="4" face="garamond, serif">Then there's ngRoute. </font></div><div><font size="4" face="garamond, serif">Routing needs in Angular may need to handle route conflicts and maybe nested routes. </font></div><div><font size="4" face="garamond, serif">There are other, possibly better options that we could consider </font></div><div><font size="4" face="garamond, serif">1. <a href="https://github.com/angular-ui/ui-router" target="_blank">https://github.com/angular-ui/ui-router</a> </font></div><div><font size="4" face="garamond, serif">2. <a href="https://angular.github.io/router/" target="_blank">https://angular.github.io/router/</a> </font></div><div><font size="4" face="garamond, serif"><br></font></div><div><font size="4" face="garamond, serif">I've been part of the community for not long enough yet and I'm not yet completely aware of what exists outside the Horizon codebase so I might be missing somethings as well. </font></div><div><font size="4" face="garamond, serif"><br></font></div><div><font size="4" face="garamond, serif">Regards </font></div><div><font size="4" face="garamond, serif">Rajat</font><br></div></div>