javascript - AngularJS:单路由应用架构

Question

尝试确定如何利用 Angular 的工具集来解决我要解决的问题。

我的应用程序将是一个单页应用程序，但它也只有一个路由。根本没有 URL 状态中的其他“状态”。据我所知，您可以在与路由的 1:1 关系中利用 Controller 和 View 。

我希望页面上的组件具有 Controller+View 组合。 (组件可以是小部件、模态窗口等)。

在这种情况下有什么方法可以利用 Angular 吗？

注:我看过https://github.com/angular-ui/ui-router ，但这仍然在很大程度上依赖于创建应用程序的“状态”并将其绑定(bind)到 URL。

Answer 1

要包含 HTML 部分，您可以使用 ng-include 指令。这可以通过几种不同的方式与 ng-controller 指令相结合:

您可以在 ng-controller 中使用 ng-include 嵌套元素:

<div ng-controller="testCtrl">
  <div ng-include="'view.html'"></div>
</div>

您可以在包含的部分中包含一个 ng-controller 指令:

<!-- index.html -->
<div ng-include="'view.html'"></div>

<!-- view.html -->
<div ng-controller="testCtrl">
  <p>{{ helloworld }}</p>
</div>

您还可以在同一元素上组合使用 ng-include 和 ng-controller 指令:

<div ng-controller="testCtrl" ng-include="'view.html'"></div>

请注意，在上面的每个示例中，ng-include 指令中的字符串文字都用单引号引起来 - 这是因为该指令需要一个表达式。

根据您要实现的目标，您可能需要使用其中的一种或多种技术。我还希望您需要大量使用指令(例如，您可以使用 UI Bootstrap modal )，它们也可以有自己的 Controller 。

我设置了一个 Plunker here使用上面列出的 ng-include 选项的几个工作示例，包括动态交换包含的模板。

我不能说实际构建这样的生产应用程序的可行性，但它似乎是可能的，至少乍一看是这样。