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" => ""}
function BooksOverviewCtrl($scope, $http) {
$http.get('/books.json').success(function(data) {
$scope.books = data;
});
}
BooksOverviewCtrl.$inject = ['$scope', '$http'];
angular.module('books', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/books', { templateUrl: 'books/book-overview.html.haml', controller: BooksOverviewCtrl });
}]);
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.