AngularJS with turbolinks

163 views

Skip to first unread message

Cyril Rouyer

unread,

Feb 2, 2014, 1:03:45 PM2/2/14

to rubyonra...@googlegroups.com

Hi,

I'm trying to implement a part of my Rails app with AngularJS 1.2.10. I'm working with Rails 4 which comes with turbolinks by default. The problem is that when turbolinks fetch the page containing my Angular App, I've got an error saying that I have no angular module :

Failed to instantiate module usersApp due to:
[$injector:nomod] http://errors.angularjs.org/1.2.10/$injector/nomod?p0=use...

On Google, multiple persons give a solution which seems to work with AngularJS 1.0.8 :

[coffeescript]

$(document).on 'ready page:load', ->

angular.bootstrap($('#ngusers')[0], ['usersApp'])

It assumes that you removed the ng-app attribute on your DOM tag on which angular bootstraps.

But, with AngularJS 1.2.10, I sometimes have this error message : Error: [ng:btstrpd] which means that the Angular for my App is already bootstrapped (http://docs.angularjs.org/error/ng:btstrpd).

I tried to disable turbolinks on the <li> tag which includes the link giving access to the angular App with 'data-no-turbolink' but if I empty my Browser cache, I've got a white page, with no error...

I don't see any other idea, except remove turbolinks from my Gemfile, but I don't like this solution.

Could you please help me ?

Thank you by advance

Cyril Rouyer

unread,

Feb 2, 2014, 1:26:49 PM2/2/14

to rubyonra...@googlegroups.com

Hi again :)

I found the reason of this error. In my view I was using a 'content_for :additionnaljs' instruction in order to place at the bottom of the body the specific javascript files (angular.min.js, and my usersApp.js). But each time I clicked on the link giving access to this view, these files was added again at the bottom of my body.

I moved the according yield section of my layout in the <head> tag and it worked fine because turbolinks exclude this tag from its parsing.