18

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

9 回答 9

21

我使用$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通常保存它们的目录中。

于 2013-10-31T16:35:47.347 回答
9

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

于 2013-02-12T18:56:54.577 回答
3

如果您使用angular-rails-templates gem，您可以将它们放入 rails 资产管道并使用 angular 的模板缓存。

链接：

于 2014-09-16T04:33:02.500 回答
2

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

于 2013-02-12T15:01:39.570 回答
1

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

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

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

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

于 2014-07-08T00:01:31.953 回答
1

我还建议使用Angular Rails 模板

宝石文件

gem 'angular-rails-templates'

$ bundle install

应用程序.js

//= require angular-rails-templates

应用程序.js

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

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

于 2016-11-21T18:31:33.327 回答
0

I've turned the asset pipeline off in config/application.rb and put all the files in public folder. Since the client side files (angularJS project) don't need any processing, filters, i chose that way.

于 2012-12-18T09:21:49.883 回答
0

您可以尝试使用 gemjs_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 
});
于 2014-07-08T09:28:36.303 回答
0

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

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

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

于 2013-10-02T03:54:46.523 回答