Location of AngularJS views within Rails app

Question

I'm trying to integrate AngularJS within a Rails app. I have a Rails app with a books controller and book model. In the Rails index view I have this, and AngularJS should take over from here:

.page_text{"ng-app" => "books"}
  .row
    .twelve.columns
      %div{"ng-view" => ""}

And the AngularJS controller looks like this:

function BooksOverviewCtrl($scope, $http) {
  $http.get('/books.json').success(function(data) {
    $scope.books = data;
  });
}
BooksOverviewCtrl.$inject = ['$scope', '$http'];

And this is the routeProvider:

angular.module('books', []).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
      when('/books', { templateUrl: 'books/book-overview.html.haml',   controller: BooksOverviewCtrl });
}]);

Currently, the AngularJS view is in "app/assets/javascripts/angularjs/books/book-overview.html.haml". When I load the page, it says page not found, so where do I have to store the AngularJS views in my Rails app? This is the error:

GET http://localhost:3000/books/book-overview.html.haml 404 (Not Found)

Answer 1

I use the $templateCache to handle this. So in the view I have:

<script type="text/ng-template" id="bookOverview.html">
  <%= render partial: "book-overview" %>
</script>

Then with $routeProvider you can just:

$routeProvider
  .when('/books', {
    templateUrl: 'bookOverview.html',
    controller: BooksOverviewCtrl 
  });

This way you can just keep your views in the app/views/books directory where you would normally keep them.