Fix AngularJS from loading twice error on Rails 4

If you’re running a Rails 4.x app with AngularJS, and you’re getting increasingly frustrated with receiving “AngularJS loaded twice” errors and you can’t seem to figure out what went wrong, perhaps you might want to make sure you do two things first:

First, remove Turbolinks Gem

Remove require ‘turbolinks’ from your application.js

It is not apparent at first but turbolinks inject its own form of javascript into your views and when run, it will actually overwrite your normal angular behavior.

I ran into this issue when routing to an angular page through ngRoute and than hitting the back() button on my browser.

Turbolinks somehow intercepted it and cause angularJS to load twice causing the controller function to not display the correct view in ng-view.

Hope this helps!

Extra Tip

Make sure that for all the templates in your routing controller, you remove any instance of ng-controller in it as routeProvider would already initialize the controller.

ie.

$routeProvider.when('/movies/:id', {
  templateUrl: 'movies/show.html',
  controller: 'moviesDisplayCtrl'
});

Make sure that in your movies/show.html, it doesn’t have the following in it.

<div ng-controller="moviesDisplayCtrl">
</div>

This would also sometimes cause the double-loading error.