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>
...

通常，站点布局是在视图上方和下方的布局内容中定义的。

与我们的设计师合作，现在我有了三种不同的基本页面布局。所有原始视图都有相同的（通用）布局，但有六个新页面，每个页面都有两种新布局之一。

我想我可以将每个布局的页眉内容移动到部分中，并将每个布局的页脚内容移动到部分中。然后我必须在每个视图中执行一个 ng-include，如下所示：

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

啊，我的悲惨！ 这很难看，让我觉得我需要洗个澡才能擦干。

有更好的解决方案吗？角度是否有办法处理我还没有遇到的这个问题？

注意： 我对使用 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 回答