Rails Turbolinks And AngularJS

Having writing a lot of angular within Rails myself, I was surprised why it took me sometime to rezlie the insynchrony of angular and turbolinks.

The problem is, angular bootstraps everytime the document ready event is triggered, something not triggered by the turbolinks. Most online resources suggest using manual bootstrapping, i.e.:

$(document).on("page:load ready", function(){
    angular.bootstrap(document.getElementById('app_id'), 'app_module'); 
});

The main drawbacks:

  • not DRY
  • annoying to include in every page with different angular modules

I have came up with a solution, which can be embeeded in the main javascript code:

$(document).on("page:load ready", function(){
    var i, collection = $("[ng-app]"), module_name;
    for (i = 0 ; i < collection.length ; i++) {
        module_name = $(collection[i]).attr("ng-app");
        angular.bootstrap(collection[i], module_name || undefined);
    }
});

The code speaks for itself :)

Gist @ GitHub