Location of AngularJS views within Rails app
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)
After some researching, I found there are two ways to deal with this. The first option is the way both Mahbub and Adnan Doric mention: store the files in the public folder because they are staic html files anyway.
Although this works it feels not natural for me, because then the files get scattered. Some are in the public folder, and others are in the assets/javascripts folder. Not my preferred option, but it might work well for other people.
The second option is to store the routes in a specific file, like "assets/javascripts/routes.js.erb". Because of the ".erb" it is possible to use the Rails asset_path within the file and create a relative path like this:
when('/books', { templateUrl: "<%= asset_path('book-overview.html.haml') %>", controller: BooksOverviewCtrl });
Maybe not the perfect solution, but for me this works best, because now all my Angular files are kept together within the "assets/javascripts" folder.