using angularjs with turbolinks

using angularjs with turbolinks  using -'ruby-on-rails,angularjs,turbolinks'

I am trying to use Angularjs framework in my app with turbolinks. After page change it do not initialize new eventlisteners. Is it any way to make it work? Thanks in advance!

asked Oct 7, 2015 by akasati02
0 votes

8 Answers

0 votes

AngularJS vs. Turbolinks

Turbolinks as well as AnguluarJS can both be used to make a web application respond faster, in the sense that in response to a user interaction something happens on the web page without reloading and rerendering the whole page.

They differ in the following regard:

  • AngularJS helps you to build a rich client-side application, where you write a lot of JavaScript code that runs on the client machine. This code makes the site interactive to the user. It communicates with the server-side backend, i.e. with the Rails app, using a JSON API.

  • Turbolinks, on the other hand, helps to to make the site interactive without requiring you to code JavaScript. It allows you to stick to the Ruby/Rails code run on the server-side and still, "magically", use AJAX to replace, and therefore rerender, only the parts of the page that have changed.

Where Turbolinks is strong in allowing you use this powerful AJAX mechanism without doing anything by hand and just code Ruby/Rails, there might come a stage, as your application grows, where you would like to integrate a JavaScript framework such as AngularJS.

Especially in this intermedium stage, where you would like to successively integrate AngularJS into your application, one component at a time, it can make perfectly sense to run Angular JS and Turbolinks together.

How to use AngularJS and Turbolinks together

Use callback to manually bootstrap Angular

In your Angular code, you have a line defining your application module, something like this:

# app/assets/javascripts/
# without turbolinks
@app = angular.module("YourApplication", ["ngResource"])

This code is run when the page is loaded. But since Turbolinks just replaces a part of the page and prevents an entire page load, you have to make sure, the angular application is properly initialized ("bootstrapped"), even after such partial reloads done by Turbolinks. Thus, replace the above module declaration by the following code:

# app/assets/javascripts/
# with turbolinks
@app = angular.module("YourApplication", ["ngResource"])

$(document).on('ready page:load', ->
  angular.bootstrap(document, ['YourApplication'])

Don't bootstrap automatically

You often see in tutorials how to bootstrap an Angular app automatically by using the ng-app attribute in your HTML code.


But using this mechanism together with the manual bootstrap shown above would cause the application to bootstrap twice and, therefore, would brake the application.

Thus, just remove this ng-app attribute:


Further Reading

answered Oct 7, 2015 by mtabakade
0 votes

In case of bug

Uncaught Error: [ng:btstrpd] App Already Bootstrapped with this Element 'document'

after upgrade to angular 1.2.x you can use below to fix problem.

angular.module('App').run(function($compile, $rootScope, $document) {
  return $document.on('page:load', function() {
    var body, compiled;
    body = angular.element('body');
    compiled = $compile(body.html())($rootScope);
    return body.html(compiled);

In previous post @nates proposed to change angular.bootstrap(document, ['YourApplication']) to angular.bootstrap("body", ['YourApplication']) but this causes a flash of uncompiled content.

answered Oct 7, 2015 by kinnari
0 votes

Turbolinks attempt to optimize rendering of pages and would conflict with normal bootstraping of AngularJS.

If you are using Turbolinks in some places of your app and some parts use Angular. I propose this elegant solution:

Each link to a page that is angularapp (where you use ng-app="appname") should have this attribute:

Say NO to Turbolinks.

The second - mentioned on Stackoverflow is explicitly reloading/bootstrapping every ng-app by handling page:load event. I would that's intrusive, not to mention you're potentially loading something that isn't on a page hence wasting resources.

I've personally used the above solution.

Hope it helps

answered Oct 7, 2015 by sameer rathore
0 votes

Turbolinks doesn't quite make sense with an client side MVC framework. Turbolinks is used to to strip out the all but the body from server response. With client-side MVC you should just be passing JSON to the client, not HTML.

In any event, turbolinks creates its own callbacks.

answered Oct 7, 2015 by vibhorsingh
0 votes

Add the following event handler to your application. (This is Coffeescript.)

bootstrapAngular = ->
  $('[ng-app]').each ->
    module = $(this).attr('ng-app')
    angular.bootstrap(this, [module])

$(document).on('page:load', bootstrapAngular)

This will cause the angular application to be started after each page loaded by Turbolinks.

Credit to

answered Oct 7, 2015 by atulpariharmca
0 votes

The jquery.turbolinks plugin can trigger bootstrapping of modules via ng-app directives. If you're trying to manually bootstrap your modules, jquery.turbolinks can lead to ng:btstrpd errors. One caveat I've found is that jquery.turbolinks relies on the page:load event, which can trigger before any new page-specific