带有 ui-router 和嵌套模板的 AngularJS答案

【问题标题】：AngularJS with ui-router and nested templates带有 ui-router 和嵌套模板的 AngularJS
【发布时间】：2013-12-05 22:22:24
【问题描述】：

我有AngularJS 和angular-ui-router 可以更好地控制我的模板。我有两个网址

“/时间线”
“/登录”

我的想法是加载一个父状态，它同时具有 1 和 2 的 HTML 以及一些部分。

我有一个 index.html，它加载了名为“content”的局部视图：

<!doctype html>
<html lang="en" ng-app="myApp" id="ng-app">
  <body ng-controller="Login" class="auth-switch">
    <div class="body_wrap" ui-view="content"></div>
  </body>
</html>

这是我的部分视图“内容”的样子：

<div ui-view="header">
  <div ui-view="profile"></div>
  <div ui-view="messages" id="messages"></div>
</div>
<div ui-view="timeline"></div>
<div ui-view="login" ng-controller="Login"></div>
<div ui-view="footer"></div>

我尝试在这里创建一个结构并希望加载这些模板。这就是我在 app.js 中尝试做的事情：

  // Now set up the states
  $stateProvider
    .state('content', {
      abstract: true,
      views: {
        "content": { templateUrl: "partials/content.html" }
      },
      access: access.public
    })
    .state('content.login', {
      url: "/login",
      views: {
        "messages": { templateUrl: "partials/messages.html" },
        "header": { templateUrl: "partials/header.html" },
        "login": { templateUrl: "partials/login.html" },
        "footer": { templateUrl: "partials/footer.html" }
      },
      controller: 'Login',
      access: access.public
    })
    .state('content.timeline', {
      url: "/timeline",
      views: {
        "messages": { templateUrl: "partials/messages.html" },
        "header": { templateUrl: "partials/header.html" },
        "timeline": { templateUrl: "partials/timeline.html" },
        "login": { templateUrl: "partials/login.html" },
        "footer": { templateUrl: "partials/footer.html" }
      },
      access: access.user
    })

如您所见，我创建了一个父（抽象）状态，它有两个子状态（登录和时间线）。我的主要问题是，我怎样才能将其设置为干净：

我是否需要每个部分模板的状态而不是使用“视图”？
如何在“header”模板中加载“messages”和“profile”模板？
我只需要两个 URL 在这种情况下使用两个状态好吗？

【问题讨论】：

标签： angularjs templates routing state angular-ui-router

【解决方案1】：

大安，

在您的一条路线“content.login”中说，是受“登录”控制器影响的所有视图（“消息”、“标题”、“登录”、“页脚”）。是的，那么没关系，但如果不是，那么您不应该在路由器配置中拥有这些视图。相反，您应该将其添加到“内容”部分视图中。

我是否需要每个部分模板的状态而不是使用“视图”？

简短回答不。也许你应该清楚地理解什么是部分。部分就像定义一个拥有自己的视图、控制器和模型的页面块。您可以决定制作任意数量的子部分。但是，这取决于您的网络应用程序的复杂程度。如果您想拥有多个模板 (.html) 嵌套模板并决定只拥有一个 JS 文件（用于模板的控制器），那完全可以。但是，如果您觉得每个模板都有自己的更多功能，那么您可以嵌套部分模板。

如何在“header”模板中加载“messages”和“profile”模板？

嵌套部分

我只需要两个 URL 在这种情况下使用两个状态好不好？

如果它只有“url/login”和“url/timeline”，你将需要两种状态。但是，如果您有 'url/timeline/abc' 或 'url/abc' ，则需要为它们中的每一个设置另一个新状态。

如果您认为它非常混乱，请尝试使用“对象”来表示状态，而不是使用这种混乱的 config()。 - https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

【讨论】：

答案1和3我明白了，谢谢。但是对于答案 2，我的问题仍然存在，如果我只想有 2 个状态（时间线、登录），我如何定义更深的嵌套 .html 文件（如“标题”>“配置文件”）以及如何始终包含“header”（独立于时间线/登录）.html 文件（ui-router 方式）？你能举个例子吗？
我对“独立于时间线/登录”和“ui-router 方式”感到困惑。是header.html、profile.html和messages.html加载内容是基于url/login还是url/timeline？
header.html 和 messages.html 应该总是被加载，因为它们需要被每个控制器使用。只有当我们在时间轴控制器中时才需要加载 profile.html。所以基本上我如何在这种情况下设置我的控制器与状态
如果 header.html 和 messages.html 总是被加载，而不是为每个单独的 .html 文件添加 html 到 content.html 并根据需要授予对控制器的访问权限。如果 profile.html 只需要与timeline.html一起加载，那么状态'content.timeline'应该只有两个视图“timeline”：{templateUrl：“partials/timeline.html”templateUrl：“partials/login.html”（考虑到您会将 footer.html 移到 content.html)
网址坏了，能否重新上传一下？