Angular and Turbolinks…
Still not convinced if this was worth it, but if you find yourself adding features to a full stack rails app that may involve some heavy javascript, there’s no reason you can’t install Angular and use it on just some segments of the application without fully converting everything over. However, there are some extra complications here that you wouldn’t normally face when writing a rails angular app from scratch.
One big one is turbolinks. Angular and turbolinks do not play nicely with each other. One of the first steps in setting up an Angular-rails app is adding an ng-app attribute to an outer element like body or html. If your front end is entirely in Angular, you’ve likely already turned off turbolinks, so bootstrapping Angular this way works fine.
But if turbolinks is turned on, as it is by default, that process won’t work properly. Turbolinks works to speed up traditional rails apps by retrieving linked page content asynchronously (through AJAX) and swapping the body of the response in for the current page. In other words, partial page reloading. If ng-app is attached to an outer element, it may not have opportunity to fire.
One solution to this is to skip adding ng-app attribute, and instead add an event handler to you application.js file that fires when turbolinks loads. This post on stackoverflow explains it pretty well, and the solution seemed to work at first. But I’ve seen weird anomalies creep up involving the digest cycle, and some research online shows others have as well.
Which brings me to solution number two. Just disable turbolinks! There are no doubt large scale rails apps that benefit greatly from turbolinks, but for smaller ones, it’s likely pretty minimal. I did, and noticed no perceivable difference in performance.
