AngularJS with turbolinks

rubyonrails-talk
1

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...](http://errors.angularjs.org/1.2.10/$injector/nomod?p0=usersApp)

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

  • 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

    C.

    • 2

    Hi again :slight_smile:

    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 tag and it worked fine because turbolinks exclude this tag from its parsing.

    PS : sorry for my poor english level :wink: