Question

我正在尝试生成以下单页面应用程序，其UI看起来像这样：

mockup layoutx

左边是项目图像列表，每当点击一个项目时，右侧会填充项目的详细信息，更大的图像等 - 您已经看到并知道我在说什么。我还想应用正确的路由，这样当访问#/item/:itemID时，视图将相应地响应并且将呈现详细的项目。仍然应该显示项目列表，而不改变位置（它可以垂直滚动）。

由于我对角度很新，我还在研究如何处理这个问题。我正在考虑在我的路线中使用相同的模板和不同的控制器：

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足以在这里选择正确的工具集，所以我很感激有关如何继续的一些意见 - 谢谢。

Answer 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 })

将加载详细信息视图以及项目详细信息。

Answer 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获取实际项目，并在单击（然后呈现）时获取项目详细信息。

无论如何你可能正在这样做，但是我会通过将它们插入工厂/服务中的数组或对象来缓存这些项目，这样你就不必继续点击服务器......

具有角度布线的多部件视图

2 个答案: