【问题标题】：Location of AngularJS views within Rails appAngularJS 视图在 Rails 应用程序中的位置
【发布时间】：2012-12-17 19:42:55
【问题描述】：

我正在尝试将 AngularJS 集成到 Rails 应用程序中。我有一个带有书籍控制器和书籍模型的 Rails 应用程序。在 Rails 索引视图中，我有这个，AngularJS 应该从这里接管：

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

AngularJS 控制器看起来像这样：

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

这是 routeProvider：

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

目前，AngularJS 视图位于“app/assets/javascripts/angularjs/books/book-overview.html.haml”中。当我加载页面时，它说找不到页面，那么我必须在哪里将 AngularJS 视图存储在我的 Rails 应用程序中？这是错误：

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

【问题讨论】：

标签： ruby-on-rails-3 angularjs

【解决方案1】：

我使用$templateCache 来处理这个问题。所以在我看来：

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

然后使用 $routeProvider 你可以：

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

这样您就可以将视图保存在您通常会保存它们的app/views/books 目录中。

【讨论】：

我花了一点时间才弄明白。

【解决方案2】：

经过一番研究，我发现有两种方法可以解决这个问题。第一个选项是 Mahbub 和 Adnan Doric 都提到的方式：将文件存储在公共文件夹中，因为它们无论如何都是静态的 html 文件。

虽然这可行，但对我来说感觉不自然，因为这样文件就会分散。有些在 public 文件夹中，有些在 assets/javascripts 文件夹中。不是我的首选，但它可能对其他人有用。

第二个选项是将路由存储在特定文件中，例如“assets/javascripts/routes.js.erb”。由于“.erb”，因此可以在文件中使用 Rails 资产路径并创建这样的相对路径：

when('/books', { templateUrl: "<%= asset_path('book-overview.html.haml') %>",   controller: BooksOverviewCtrl });

也许不是完美的解决方案，但对我来说这是最好的，因为现在我所有的 Angular 文件都保存在“assets/javascripts”文件夹中。

【讨论】：

虽然这种方法可以让您启动并运行，但它会导致服务器往返。解决方案在这里讨论groups.google.com/forum/#!topic/angular/V3hMGIDwE3o
但是你在哪里存储 book-overview.html.haml？我用 app/views 的视图测试了这个方法，得到了 404。
如果这确实会导致服务器往返..那么它几乎违背了拥有单页 Web 应用程序的目的，这是 angular 等框架的主要优点之一

【解决方案3】：

如果您使用 angular-rails-templates gem，您可以将它们放入 rails 资产管道并使用 angular 中的 template cache。

链接：

【讨论】：

【解决方案4】：

您将 AngularJS 部分放在公共文件夹中而不禁用资产管道，只需确保它可以在您的浏览器中通过指定的 URL 访问。

【讨论】：

【解决方案5】：

我在 App/Assets/Javascript 中创建了一个名为 Angular 的新文件夹。 Angular 文件夹包含控制器、视图、服务和指令的子文件夹。

现在要引用一个视图，比如说 sample.html。这就是我的 templateUrl 路径的样子。

.when('/sample', { templateUrl: '/assets/angular/views/sample.html', 控制器：'SampleCtrl' })

这样，所有 Angular 代码都驻留在一个文件夹中，不会分散在各处。此外，Rails 资产管道 可用于缩小和压缩 Angular 的控制器和服务。

【讨论】：

【解决方案6】：

我还建议使用 Angular Rails 模板

宝石文件

gem 'angular-rails-templates'

$ bundle install

application.js

//= require angular-rails-templates

app.js

angular.module('myApp', ['templates'])

现在，当您包含 templateUrl: 'books/book-overview.html.haml' 时，它将在您的资产文件夹中搜索正确的视图。

【讨论】：

【解决方案7】：

我已经在 config/application.rb 中关闭了资产管道，并将所有文件放在公用文件夹中。由于客户端文件（angularJS项目）不需要任何处理，过滤器，我选择了这种方式。

【讨论】：

【解决方案8】：

如果您想将两者完全分开，以下可能会很好。

一种选择可能是在/ngapp/dist 或/ngapp/build 文件夹与/public 文件夹或/public 中的子文件夹之间创建文件系统符号链接。使用 grunt/node 服务器进行开发和测试，因此您不必每次都重新构建，然后在准备推送到远程服务器时将 grunt build 链接到链接的 /ngapp/dist 文件夹。

这使 AngularJS 文件夹与 Rails 应用程序分开，但只允许访问最终构建文件，而不是 AngularJS 应用程序文件夹中的源文件。

【讨论】：

【解决方案9】：

你可以尝试使用 gem js_assets

AngularJS 的苗条

例如，我们想在 AngularJS 应用程序中使用模板 Slim。让我们的模板位于app/assets/webapp/。我们进行以下设置：

# config/application.rb
config.assets.paths << Rails.root.join('app', 'assets', 'webapp')

# config/initizlizers/assets_engine.rb
Rails.application.assets.register_engine('.slim', Slim::Template)

# config/environments/production.rb
config.assets.precompile += ['*.html']

别忘了在你的application.js中连接一个文件

//= require app_assets

现在对于模板app/assets/webapp/blogs/edit.html.slim，我们可以根据环境获取路径：

var path = asset_path('blogs/edit.html')

// the function will return for development:
// /assets/blogs/edit.html

// and for production
// /assets/blogs/edit-5eb3bb250d5300736006c8944e436e3f.html

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

【讨论】：