的Gemfile

Question

我正在尝试将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)

Answer 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目录中，通常会保留它们。

Answer 2

经过一番研究，我发现有两种方法可以解决这个问题。第一个选项是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 });

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

Answer 3

如果你使用angular-rails-templates gem，你可以将它们带入rails资产管道并使用角度的template cache。

链接：

Answer 4

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

Answer 5

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

现在引用一个视图，让我们说一下sample.html。这就是我的templateUrl路径。

.when（'/ sample'，{ templateUrl：'/assets/angular/views/sample.html'，控制器：'SampleCtrl' }）

这样，所有Angular代码都驻留在一个文件夹中，并且不会遍布整个地方。此外， Rails Asset Pipeline 可用于缩小和压缩Angular的控制器和服务。

Answer 6

我还建议使用 Angular Rails模板

的Gemfile

gem 'angular-rails-templates'

$ bundle install

的application.js

//= require angular-rails-templates

app.js

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

现在，当您加入templateUrl: 'books/book-overview.html.haml'时，它会在您的资源文件夹中搜索正确的视图。

Answer 7

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

Answer 8

如果你想让两者完全分开，可能会有以下情况。

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

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

Answer 9

您可以尝试使用gem js_assets

为AngularJS

修剪

例如，我们想在AngularJS app中使用模板化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 
});

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

9 个答案:

的Gemfile

的application.js

app.js

为AngularJS