Question

我稍微谈论了这个主题，但我无法就这个问题得到明确的答案，所以如果这看起来是一个非常好的问题，请道歉。我不久前就开始使用Angular了，我真的想走上好路。

应用程序由app.js引导，用于定义配置中的路由。 index.html的主体带有ng-app指令，内部只有一个div ng-view。

  $routeProvider
    .when('/', {
      templateUrl: 'views/main.html',
      controller: 'MainController'
    })
    .otherwise({
      redirectTo: '/'
    });

此main.html和控制器是应用程序的主体，非常简单。

现在我想要一个标题，显示登录或来自用户的信息。我虽然应该是另一个Controller和另一个View，因为标题应该封装所有代码而不是污染主视图。

我该怎么办？

我可以删除ng-app并为标题和主应用创建两个不同的控制器，但后来我不知道如何将每个视图关联到每个ng-controller，如{ {1}}正在做，虽然如果我不介意编写所有html内联，这应该可行。我也会丢失我不想要的路由。
我可以在应用内部创建一个routeProvider，但仍然可以使用内联代码。是否可以选择将模板与没有路径定义的控制器相关联？

在我有更好的选择之前，我目前要做的是将所有这些逻辑添加到mainController。我只觉得我正在建造大块而不是小块，我可以组成。想象一下，我还需要三个需要标题的路线。使用选项1）或2）我将不得不在这些视图中再次为标题编写模板html。

我很感激这方面的任何链接或帮助，我真的很好奇如何以模块方式处理这个问题。

提前谢谢。

Answer 1

我可以删除ng-app并为标题和主应用程序创建两个不同的控制器，但后来我不知道如何将每个视图关联到每个ng-controller，就像routeProvider正在做的那样，尽管我不喜欢不介意写所有html内联，这应该工作。我也会丢失我不想要的路由。

您将只编写两个具有相同routeConfig的不同模块，并且可能会有效。但是，我不认为这是这种情况下的最佳解决方案。

回答你的第二个问题：

我可以在应用内创建一个ng-controller=headerController，但仍然可以使用内联代码。是否可以选择将模板与没有路径定义的控制器相关联？

您可以使用ng-include包含模板：

<body ng-app="MyApp">
    <section ng-include="'header.html'" ng-controller="HeaderController"></section>
    <ng-view></ng-view>
</body>

此外，您可以使用$templateCache或使用<script> tag来保持模板内联。

Answer 2

您可以使用ng-include插入模板。我个人喜欢使用ui-router

角度子视图

2 个答案: