Joh*_*ohn 18 ruby-on-rails-3 angularjs
我正在尝试将AngularJS集成到Rails应用程序中.我有一个带有书籍控制器和书籍模型的Rails应用程序.在Rails索引视图中我有这个,AngularJS应该从这里接管:
.page_text{"ng-app" => "books"}
.row
.twelve.columns
%div{"ng-view" => ""}
Run Code Online (Sandbox Code Playgroud)
AngularJS控制器看起来像这样:
function BooksOverviewCtrl($scope, $http) {
$http.get('/books.json').success(function(data) {
$scope.books = data;
});
}
BooksOverviewCtrl.$inject = ['$scope', '$http'];
Run Code Online (Sandbox Code Playgroud)
这是routeProvider:
angular.module('books', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/books', { templateUrl: 'books/book-overview.html.haml', controller: BooksOverviewCtrl });
}]);
Run Code Online (Sandbox Code Playgroud)
目前,AngularJS视图位于"app/assets/javascripts/angularjs/books/book-overview.html.haml"中.当我加载页面时,它说找不到页面,那么我在哪里可以将AngularJS视图存储在我的Rails应用程序中?这是错误:
GET http://localhost:3000/books/book-overview.html.haml 404 (Not Found)
Run Code Online (Sandbox Code Playgroud)
nat*_*tes 21
我使用$ templateCache来处理这个问题.所以我认为:
<script type="text/ng-template" id="bookOverview.html">
<%= render partial: "book-overview" %>
</script>
Run Code Online (Sandbox Code Playgroud)
然后使用$ routeProvider你可以:
$routeProvider
.when('/books', {
templateUrl: 'bookOverview.html',
controller: BooksOverviewCtrl
});
Run Code Online (Sandbox Code Playgroud)
这样,您可以将视图保留在app/views/books通常保留它们的目录中.
经过一番研究,我发现有两种方法可以解决这个问题.第一个选项是Mahbub和Adnan Doric提到的方式:将文件存储在公共文件夹中,因为它们无论如何都是staic html文件.
虽然这对我来说感觉不自然,因为那时文件会分散.有些位于公用文件夹中,有些位于assets/javascripts文件夹中.不是我的首选,但它可能适用于其他人.
第二种选择是将路由存储在特定文件中,例如"assets/javascripts/routes.js.erb".由于".erb",可以在文件中使用Rails asset_path并创建如下的相对路径:
when('/books', { templateUrl: "<%= asset_path('book-overview.html.haml') %>", controller: BooksOverviewCtrl });
Run Code Online (Sandbox Code Playgroud)
也许不是完美的解决方案,但对我来说这是最好的,因为现在我的所有Angular文件都保存在"assets/javascripts"文件夹中.