多部分视图，带角度布线 [英] Multi-part view with routing in angular

问题描述

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

I'm trying to generate the following single page app with UI that looks something like this:

左侧是项目图片列表，每当单击某个项目时，右侧便是填充了该项目的详细信息，较大的图像等-您已经看到并知道我在说什么。我还想应用适当的路由，以便在访问＃/ item /：itemID 时，视图将作出相应的响应，并将呈现详细的项目。仍应显示项目列表，而无需更改位置（它可以垂直滚动）。

On the left is a list of item images, and whenever an item is clicked the right side is populated with the item's details, larger image, etc - you've seen and know what I'm talking about. I'd also like to apply proper routing, such that when accessing #/item/:itemID, the view will respond accordingly and the detailed item will be rendered. The items list should still be shown, without changing position (it's scrollable vertically).

由于我对角度知识还很陌生，所以我仍在研究如何处理这个。我正在考虑在路由中使用相同的模板和不同的控制器：

As I'm quite new to angular, I'm still working out how to approach this. I'm thinking about using the same template and different controllers in my routes:

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 提取实际的项目，并且单击（然后渲染）项目的详细信息。

I'm assuming my template should include both sides of the view (list and details), the router should call the same controller, and the controller should check for the #/item/:itemID route and render the details view if present. The actual items are fetched using $http, and the item details are fetched when it is clicked (and then rendered).

我还不够用 ngInclude 和 ngView 在这里选择正确的工具集，因此，我感谢您提供一些有关如何进行的信息-谢谢。

I haven't used ngInclude and ngView enough to pick the correct tool set here, so I'd appreciate some input on how to proceed - thanks.

推荐答案

有数十种解决方法，但是如果应用程序非常简单：

There are dozens of ways to approach this, but if the app is fairly simple:

<!-- 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>

或为菜单层创建指令。

Or create a directive for the menu layer.

而且，就像另一个答案所说的那样，一个控制器足以应付部分视图。

And, like the other answer says, one controller is enough for the partial views.

使用$ http获取实际项目，并单击（然后渲染）项目详细信息。

The actual items are fetched using $http, and the item details are fetched when it is clicked (and then rendered).

您可能仍然会这样做，但是我会通过将它们插入工厂/服务中的数组或对象中来缓存这些项目，因此您不必继续打服务器...

You are probably doing this anyway, but I would cache these items by plugging them in an array or object in your factory/service so you don't have to keep hitting the server...

这篇关于多部分视图，带角度布线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！