“标题”控制器将始终显示在顶部答案

【问题标题】："Header" controller which will always be present on top“标题”控制器将始终显示在顶部
【发布时间】：2017-11-19 15:18:11
【问题描述】：

今天开始学习 AngularJS，使用 webpack 和 ES6。我有点卡在一个我无法弄清楚的简单问题上。我正在构建一个非常简单的 SPA 应用程序，例如购物车应用程序，它应该具有“标题”组件，其中包含几个指向其他页面的链接以及购物车的总和。

其中一个控制器可能只是一个随机的虚拟页面，一个可能是购物车摘要，主控制器是用户可以实际将商品添加到购物车的地方。

到目前为止，我所拥有的只是以下路线：

export default function routes($stateProvider) {
  $stateProvider
    .state('main', {
      url: '/',
      template: require('./main.html'),
      controller: 'MainController',
      controllerAs: 'main'
    })
    .state('other', {
      url:'/other',
      template: require('./other.html'),
      controller: 'OtherController',
      controllerAs: 'other',    
    })
}

index.js：

export default angular.module('app.main', [uirouter, productService])
  .config(routing)
  .controller('MainController', MainController)
  .controller('OtherController', OtherController)
  .name;

productService 在这里不相关，所以我排除了该代码。

作为一个测试，我尝试将OtherController 设置为 index.html 中的单独视图：

<body>
  <div ui-view="other"></div>
  <div class="container" ui-view></div>
</body>

有点喜欢这里的建议：How to update partial of html using ES6 syntax with angular-webpack-seed

还尝试使用ng-controller="other" 而不是ui-view="other"，但这会引发错误：

名为“other”的控制器未注册

我不知道我会在哪里注册它......

我在某些地方读到您可以使用指令来制作“标题”/导航栏，但这对我来说似乎根本不正确。不过也尝试过，以这种方式：https://stackoverflow.com/a/33714913/6294072 了解ng-include，但这不起作用，因为我需要购物车的服务。

我在这里遗漏了一些基本的东西，但无法弄清楚。我的大脑也（不幸的是）连接到 Angular (4)，因为我有一些经验:)

抱歉这个菜鸟问题，我感到很惭愧，但我已经为此苦苦挣扎了几个小时，因此发疯了。非常感谢您的帮助！

【问题讨论】：

标签： angularjs

【解决方案1】：

使用组件而不是带有控制器的控制器。您会发现它与 Angular 4 更相似。然后根据您的需要，您可以使用绑定或要求在组件之间创建关系。

由于您对此有严格的控制，我会选择要求。创建一个包含导航栏和内容的组件，然后创建子组件并在其中需要父组件。我们有一个通用的内部框架来处理这些东西。我们称为站点的外部组件，因此我们在子组件中获得对它的引用，如下所示：

require: { site: '^f1Site' }

如果您还没有这样做，请使用 ui-router 1.0.x 并使用路由到组件来处理导航和状态。

Index.html 的正文中只有<f1-site>Loading</f1-site>。

f1-site 模板中有基本的布局内容 - 包括导航栏和我们已经移到它们自己的组件中的东西 - 然后 ui-view 指令位于我们要加载所有动态组件的标签上.

【讨论】：