1

AngularJS サイトを持っています。以前の index.html は次のようになっていました。

...
<div class="layout stuff headers whatever">My awesome header layout</div>
<div class="container" ng-view=""></div>
<div class="layout stuff footers whatever">My tubular footer layout</div>
...

通常、サイトのレイアウトは、ビューの上下のレイアウトで定義されていました。

デザイナーと協力して、3 つの異なる基本的なページ レイアウトを作成しました。元のビューはすべて同じ (共通の) レイアウトを持っていますが、それぞれ 2 つの新しいレイアウトのいずれかを持つ 6 つの新しいページがあります。

各レイアウトのヘッダーをパーシャルに移動し、各レイアウトのフッターをパーシャルに移動できると思います。次に、次のように、各ビューで ng-include を実行する必要があります。

<div ng-include src="'partials/layout1-header.html'"></div>
... view content here ...
<div ng-include src="'partials/layout1-footer.html'"></div>

おお、ミセラム！ それは醜く、乾かすためにシャワーが必要な気がします。

より良い解決策はありますか？angularには、まだ遭遇していないこれに対処する方法がありますか?

注: angular-ui-route の使用には特に興味はありませんが、納得していただけると幸いです。

4

1 に答える 1

1

わかりましたので、最適なアプローチは ui-router を使用することです。

それが価値があるもののために：

次のページ レイアウト タイプを想定します。

  • 情報
  • ダッシュボード
  • 調べる

さらに、これらの各レイアウトには、次のような異なるビューがあるとします。

  • ダッシュボード/アカウント/概要
  • ダッシュボード/アカウント/設定
  • ダッシュボード/レポート
  • ダッシュボード/レポート/概要
  • ... 等々 ...

まず、サイトの各レベルのテンプレートを作成します (パスの「アカウント」部分の明示的なテンプレートはないと仮定します。概要、設定、レポートなどはすべて、ダッシュボード レイアウトに読み込まれます。

./partials/dashboard.html
./partials/dashboard/account/overview.html
./partials/dashboard/account/settings.html

ui-router次のように設定します。

$stateProvider
  .state("dashboard", {
    url: "/dashboard",
    templateUrl: "partials/dashboard.html"
  })
  .state("dashboard.account", {
    url: "/account", // notice this chains from "/dashboard" implicitly
    template: "<div ui-view></div>" // we don't need a file for this pass-through
  })
  .state("dashboard.account.overview", {
    url: "/overview",
    templateUrl: "partials/dashboard/account/overview",
    controller: "DashboardAccountOverviewCtrl"
  })

等々。コントローラーは、予想どおりに指定できます (dashboard.account.overview を参照)。

これを行うと、「ダッシュボード」または「情報」などのレベルで使用するレイアウトを指定し、他のものにさまざまな「内部」テンプレートを使用できます (「ネストされたビュー」によって ui-view が意味するものです)。

HTH。

于 2013-11-01T18:50:54.477 に答える