AngularJS routing with Rails

0
votes

I begin to use AngularJS with my Rails application but when i tried to implement my route providers with Angular, it's not working and Rails view is displayed instead of my template.

routes.rb :

root 'tutorials#index'

TutorialsController :

    def index
    @tutorials = Tutorial.all

    respond_to do |format|
        format.html
        format.json { render :json => @tutorials }
    end
end

app/views/tutorials/index.html.erb :

<html ng-app="Tutorial">
<body>
    <div class="container" ng-view>
    </div>
</body>

assets/javascripts/tutorials.js :

var Tutorial = angular.module('Tutorial', ['ngRoute']);

Tutorial.config(function($routeProvider, $locationProvider){

$log.debug( "Configuring $routeProvider...");

$locationProvider.html5Mode(true);

$routeProvider.
when('/tutorials', {
    templateUrl: '../templates/tutorials/index.html',
    controller: 'TutorialController'
}).
otherwise({
    templateUrl: '../templates/tutorials/index.html',
    controller: 'TutorialController'
});

});

and assets/templates/tutorials/index.html just displayed tutorials' title with a controller not shown in tutorials.js because it's not relevant here.

So instead having my angular route provider redirect me to index.html, i have a blank page representing my index.html.erb.

Any idea ?

Thanks!

1
javascriptruby-on-railsangularjs

1 Answers

0
votes

This problem is largely caused by Turbolinks.

You should remove the following line from your app/assets/javascripts/application.js file:

//= require turbolinks

if you already removed the turbolinks, change this line something like this:

from

$locationProvider.html5Mode(true);

to

$locationProvider.html5Mode({
  enabled: true,
  requireBase: false
});