Rails应用程序中AngularJS视图的位置

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通常保留它们的目录中.


Joh*_*ohn 9

经过一番研究,我发现有两种方法可以解决这个问题.第一个选项是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"文件夹中.

  • 虽然这种方法可以帮助您启动并运行,但它会导致服务器往返.解决方案在这里讨论https://groups.google.com/forum/#!topic/angular/V3hMGIDwE3o (4认同)