Question

我正在学习Angular，我正在练习编写一个基于this example使用ngRoute的简单应用程序。

<-- index.html -->
<html>
    <head> ... </head>
    <body>
        <div ng-view></div>
    </body>
</html>

示例中的代码显示有关各种“Javascript项目”的信息。我的问题是，我如何创建另一个显示该模型信息的视图？

例如，假设我想在页面下方再创建一个ngView，只显示项目名称而不描述它们？（见the example）

似乎我不得不以某种方式将它们彼此区分开来。也许是这样的？

<body>
    <div ng-view="fullView"></div>
    ...
    <div ng-view="projectNameView"></div>
</body>

但我在documentation中没有看到类似的内容，所以我认为这可能不正确。然后我想也许我应该使用这样一个单独的控制器：

<body>
    <div ng-controller="fullViewController">
        <div ng-view></div>
    </div>
    ...
    <div ng-controller="projectNameViewController">
        <div ng-view></div>
    </div>
</body>

但是ngView似乎仍然没有区别。

这样做的正确方法是什么？一旦我从index.html方面得到了一个想法，我想我可以自己解决javascript /模块方面的问题 - 我只需要朝着正确的方向微调一点。

Answer 1

您可能需要查看ui-router：http://github.com/angular-ui/ui-router。

与默认的Angular路由器相比，它提供了嵌套视图和更简单的状态管理。

Answer 2

实际上每ng-view只支持一个route，并且肯定这是此方法的缺点。

正如@Jakemmarsh指出http://github.com/angular-ui/ui-router是值得考虑的选择。虽然你必须要注意：

警告：UI-Router处于预测试状态且处于正在开发状态。因此，虽然此库经过了充分测试，但API可能会发生变化。不建议在需要保证稳定性的项目中使用它。

可能有助于在单个页面上实现多个模板的一些指令是：

ng-include - 它包含来自其他文件的模板/ html。
ng-switch - 在某些条件下切换html的呈现。
ng-if - 呈现条件是否符合。

使用Angular.js创建显示同一模型的不同部分的多个视图？

2 个答案: