I have recently started incorporating AngularJS into my Rails application. However, I am facing an issue where my route providers with Angular are not functioning as expected. Instead of displaying my template, the Rails view is being displayed.
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 simply displays tutorials' titles with a controller not included in tutorials.js for brevity.
Instead of redirecting me to index.html as intended by the angular route provider, I am getting a blank page showing my index.html.erb file.
Any suggestions on how to fix this issue?
Thank you!