18

Railsアプリ内にAngularJSを統合しようとしています。ブックコントローラーとブックモデルを備えた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 / asset / javascripts / anglejs / books/book-overview.html.haml」にあります。ページをロードすると、ページが見つかりませんと表示されます。RailsアプリのどこにAngularJSビューを保存する必要がありますか？これはエラーです：

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

調査の結果、これに対処する方法は2つあることがわかりました。最初のオプションは、MahbubとAdnanDoricの両方が言及する方法です。ファイルはとにかくstaichtmlファイルであるため、パブリックフォルダーに保存します。

これは機能しますが、ファイルが散らばってしまうため、私には自然ではありません。パブリックフォルダーにあるものと、assets/javascriptsフォルダーにあるものがあります。私の好みのオプションではありませんが、他の人にとってはうまくいくかもしれません。

2番目のオプションは、「assets / javascripts/routes.js.erb」などの特定のファイルにルートを保存することです。「.erb」があるため、ファイル内でRailsのasset_pathを使用して、次のような相対パスを作成できます。

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

完璧な解決策ではないかもしれませんが、私にとってはこれが最も効果的です。これは、すべてのAngularファイルが「assets/javascripts」フォルダー内にまとめられているためです。

于 2013-02-12T18:56:54.577 に答える
3

angle-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'、controller：'SampleCtrl'}）

このように、すべてのAngularコードは1つのフォルダーに存在し、あちこちに散らばっていません。また、Rails Asset Pipelineは、Angularのコントローラーとサービスの縮小と圧縮に活用できます。

于 2014-07-08T00:01:31.953 に答える
1

AngularRailsテンプレートの使用もお勧めします

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'と、アセットフォルダを検索して正しいビューが検索されます。

于 2016-11-21T18:31:33.327 に答える
0

config / application.rbでアセットパイプラインをオフにし、すべてのファイルをパブリックフォルダーに配置しました。クライアント側のファイル（angularJSプロジェクト）は処理やフィルターを必要としないため、私はその方法を選択しました。

于 2012-12-18T09:21:49.883 に答える
0

2つを完全に分離したい場合は、次のようにするとよいでしょう。

/ngapp/dist1つのオプションは、または/ngapp/buildフォルダーと/publicフォルダーまたは内のサブフォルダーの間にファイルシステムのシンボリックリンクを作成することです/public。grunt / nodeサーバーを使用して開発とテストを行うので、毎回再構築する必要はなく、リモートサーバーにプッシュする準備ができたらgrunt buildリンクフォルダーに再構築する必要はありません。/ngapp/dist

これにより、AngularJSフォルダーはRailsアプリから分離されますが、AngularJSアプリフォルダー内のソースファイルではなく、最終的なビルドファイルにのみアクセスできます。

于 2013-10-02T03:54:46.523 に答える
0

宝石を使ってみることができますjs_assets

AngularJS用のスリム

たとえば、AngularJSアプリでテンプレートスリムを使用したいとします。テンプレートをに入れましょう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 に答える