Angular：如何为不同的视图使用不同的模板？

Question

我有一个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>

我是miseram！这很难看，让我觉得我需要淋浴才能干掉。

有更好的解决方案吗？角有没有办法解决这个问题，我还没有遇到过？

注意： 我对使用angular-ui-route并不特别感兴趣...但我愿意相信。

Answer 1

好的，所以看起来最好的方法是使用ui-router。

为了它的价值：

假设以下页面布局类型：

• 的信息
• 的仪表板
• 的查找

此外，我们假设这些布局中的每一个都有不同的视图，例如：

• 仪表板/帐户/概述
• 仪表板/帐户/设置
• 仪表板/报告
• 仪表板/报告/摘要
• ......依旧......

首先，为您网站的每个级别创建模板（假设路径的“帐户”部分没有明确的模板 - 概述，设置，报告内容等等，所有这些都会加载到仪表板布局中。< / p>

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