1

既存の Ruby on Rails フロントエンドを Angular に移植しようとしています。これまでのところ、Angular ルートに応じて ng-view のコンテンツを切り替える単一ページ アプリを配置することができました。これは素晴らしいことですが、私の RoR レイアウトには、コンテンツを配置できる定義済みの領域がいくつかあります。これらはすべて、メイン ビューのコンテキストです。例: サイドバーと見出し。

RoR では、アクション ビュー内から次の操作を実行して、サイドバー コンテンツを設定できます。

<p>Product page content</p>

<% content_for :sidebar do %>
    <% render :partial => 'product_sidebar' %>
<% end %>

Angular でこれを達成するための最良の方法を決定するのに苦労しています。私はそれを2つの方法で動作させました:

  1. SidebarUrl がルート定義に追加され、ルート変更イベントは、ng-include ディレクティブがレイアウトで使用するスコープ変数を更新します。

  2. ng-view に読み込まれたテンプレートと共に提供されるカスタム ディレクティブ。

    <p>Main content for the view</p>

<sidebar>
   Content for sidebar
</sidebar>

ディレクティブは基本的に、その innerHTML をメイン レイアウトの sidebar 要素にコピーしてから、それ自体を削除します。属性によって定義されたターゲット要素にコンテンツを配置して、より一般的で再利用可能にするように記述できます。

結果がRuby on Railsの方法に最も近いので、この方法は私にとってより自然ですが、それがまともな解決策なのか、後で問題に遭遇するものなのかはわかりません(私はAngularに非常に慣れていません)。

ご意見やご提案は大歓迎です。

更新 18/06

Angular UI Router プロジェクトを見つけました: https://github.com/angular-ui/ui-routerこれは私の要件を公式にカバーしているようです。現時点での解決策としてそれに傾いています。

4

1 に答える 1