带角度路由的多部分视图答案

【问题标题】：Multi-part view with routing in angular带角度路由的多部分视图
【发布时间】：2013-05-27 09:59:56
【问题描述】：

我正在尝试使用如下所示的 UI 生成以下单页应用程序：

左侧是商品图片列表，每当点击商品时，右侧都会显示商品的详细信息、大图等 - 您已经看到并知道我在说什么。我还想应用适当的路由，这样在访问#/item/:itemID 时，视图会做出相应的响应并呈现详细的项目。项目列表仍应显示，不改变位置（它可以垂直滚动）。

由于我对 Angular 很陌生，我仍在研究如何解决这个问题。我正在考虑在我的路由中使用相同的模板和不同的控制器：

var app = angular.module('app', []);

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/', {
    templateUrl: 'items.html' ,
    controller: 'ItemsController'
  }).when('/item/:itemID', {
    templateUrl: 'items.html' ,
    controller: 'ItemDetailsController'
  }).otherwise({ redirectTo: '/' });
}]);

我假设我的模板应该包括视图的两侧（列表和详细信息），路由器应该调用同一个控制器，并且控制器应该检查#/item/:itemID 路由并呈现详细信息视图（如果存在）。使用$http 获取实际项目，并在单击（然后呈现）时获取项目详细信息。

我还没有使用足够的 ngInclude 和 ngView 来在这里选择正确的工具集，所以我很感激一些关于如何继续的输入 - 谢谢。

【问题讨论】：

标签： angularjs routing multiview

【解决方案1】：

对同一个视图或同一个局部视图使用不同的控制器是多余的。相反，您应该对两条路线使用相同的控制器，例如

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/', {
    templateUrl: 'items.html' ,
    controller: 'ItemsController'
  }).when('/item/:itemID', {
    templateUrl: 'items.html' ,
    controller: 'ItemsController'
  }).otherwise({ redirectTo: '/' });
}]);

所以当导航到/你的

$selectedItem = null;

而/item/1

$selectedItem = Item.get({ id:$routeParams.itemId })

将加载包含项目详细信息的详细信息视图。

【讨论】：

即使是同一个控制器，那不会重新渲染模板吗？
@gion_13 是的，它必须重新渲染视图以填充模型数据

【解决方案2】：

有很多方法可以解决这个问题，但如果应用程序相当简单：

<!-- Static content here -->
<div ng-repeat="image in imageLinks">
    <div (ul/li, whatever) href="/myRouting/{{image.id}}">{{image.image}}</div>
</div>
<-- End Static Content --->

<div class="middleContentWrapper">
    <div ng-view ></div> <----your 'content area'
</div>

或者为菜单层创建一个指令。

而且，就像另一个答案所说，一个控制器就足够了部分视图。

使用 $http 获取实际项目，并在单击（然后呈现）时获取项目详细信息。

您可能正在这样做，但我会通过将这些项目插入到您的工厂/服务中的数组或对象中来缓存这些项目，这样您就不必一直访问服务器...

【讨论】：