Multi-part view with routing in angular

Question

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

mockup layoutx

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: '/' });
}]);

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).

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.

DarkLeafyGreen · Accepted Answer · 2013-05-31 14:50:45Z

3

Using different controllers for same view or same partial view would be redundant. Instead your should simply use the same controller for both routes, like

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

So when navigating to / your

$selectedItem = null;

while /item/1

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

would load the details view with the items details.

answered May 31, 2013 at 14:50

DarkLeafyGreen

70.6k136 gold badges394 silver badges618 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

gion_13 Over a year ago

Even if it's the same controller, wouldn't that re-render the template?

DarkLeafyGreen Over a year ago

@gion_13 yes it has to re-render the view to populate the model data

rGil · Accepted Answer · 2013-05-31 15:03:19Z

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.

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

Collectives™ on Stack Overflow

Multi-part view with routing in angular

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related