Question

今天开始使用webpack和ES6学习AngularJS。我有点困在一个我无法弄清楚的简单问题上。我正在构建一个非常简单的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），因为我有一些经验：）

对于noob问题我很抱歉，我感到很惭愧，但我现在已经挣扎了好几个小时，因此发疯了。非常感谢帮助！

Answer 1

使用组件代替带有controllerAs的控制器。你会发现它与Angular 4更相似。那么根据你想要的方式，你可以使用任何绑定或者需要在你的组件之间创建关系。

既然你已经严格控制了这个，我就会满足要求。使用导航栏和其中的内容创建一个组件，然后创建子组件并在其中需要父组件。我们有一个通用的内部框架。我们称之为站点的外部组件，因此我们在子组件中引用它，如下所示：

<table id='table'>
  <thead>
    <tr>
      <th onclick='sortBy()'>CLICK ME</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input readonly value='7'></td>
    </tr>
  </tbody>
</table>

如果您还没有这样做，请使用ui-router 1.0.x并使用route to component来处理导航和放大州。

Index.html的正文中只有require: { site: '^f1Site' }。

f1-site模板中有基本的布局内容 - 包括navbars以及我们已经移动到他们自己的组件中 - 然后ui-view指令在我们想要加载所有动态组件的标签上。

“Header”控制器将始终位于顶部

1 个答案: