Question

我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
    })

如您所见，我创建了一个父（抽象）状态，它有两个子状态（登录和时间轴）。我的主要问题是，如何设置这个问题：

我是否需要为每个部分模板使用状态而不是使用“视图”？
如何在“标题”模板中加载“消息”和“个人资料”模板？
我只需要两个URL就可以在这种情况下使用两种状态吗？

Answer 1

大安，

在你的一条路线中说'content.login'，是'Login'控制器影响的所有视图（'messages'，'header'，'login'，'footer'）。是的，然后它没关系，但如果它是否，那么你不应该在路由器配置中有这些视图。相反，您应该将其添加到“内容”部分视图中。

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

简短的回答否则也许你应该清楚地知道什么是偏见。部分就像定义一个具有自己的视图，控制器和模型的页面块。您可以决定制作所需的子部分。但是，这取决于您的网络应用程序的复杂程度。如果你想拥有多个模板（.html）嵌套模板，并决定只有一个JS文件（对于模板的控制器），那就完美了。但是如果你觉得每个模板都有自己的更多功能，那么就可以嵌套部分。

如何在“标题”模板中加载“消息”和“个人资料”模板？

Nest partials

我只需要两个URL就可以在这种情况下使用两种状态吗？

如果它的'url / login'和'url / timeline'只需要两种状态。但是如果你有'url / timeline / abc'或'url / abc'，你将需要另外一个新状态。

如果您认为它非常混乱，请尝试使用'objects'作为状态，而不是使用这个凌乱的config（）。 - https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

AngularJS与ui-router和嵌套模板

1 个答案: