How to do Gmail's approach to list and detail views in angular?

[Scott McDonnell]

Hi,

I have a PHP web app where I am looking at migrating the UI to AngularJS. 

I currently have a filterable dataset displayed in a grid, when you click on an item - you move to a new view displaying the detail full screen, and you can then change the status of the item.

The problem currently is if you go back to the list it reloads all data and you lose your place in the scroll. If you hit the browser back button, the status is unchanged and you need to refresh to see it updated. Feels clunky and slow.

So moving to Angular. Straight off the filtering of the dataset on the client-side is a great improvement! now onto the list:

I considered doing a master-detail approach as per a few tutorials but this would end up filters->list->detail with not enough real estate for each. Also a really long scrolling list would not work.

What I really want is Gmail's new approach where you have full screen list view and then selecting an item moves you to a full screen detail view with a back-to-list, previous-in-list and next-in-list buttons. When you go back to the list you are looking at the same filtered list at the same scroll position with the status updated (completed items with CSS change, e.g. greyed out).

How could this be done in AngularJS?

Thanks, Scott

[Peter Smith]

Scott,

I have used this pattern a couple of times.

Have an ng-include for your gridView and an ng-include for your detailView then use a scope variable say detailMode with ng-show="detailMode"  for detailView and ng-hide="detailMode" for the grid view.

In your controller an ng-click on the grid will retrieve the details of the item clicked and then you switch detailMode to true and you see the detailView..

A button in detailView sets detailMode to false and takes you back to gridView.

Peter

[Scott McDonnell]

Thanks Peter, I will do a plunker tomorrow and try it out.
I was testing today the angular-ui-states for nested ng-views and it was showing a list and detail but each time the detail loaded the list reloads and returns to the start scroll position. Is any time the router involved mean a refresh of the entire page?

[Scott McDonnell]

Hi,

I did a plunker and have most things working. I used a ng-show as suggested to show/hide the list but used the ng-view instead of ng-include so the route will be updated.

Previous and next now work in the detail view.

I did a workaround to save the scroll position to a service to be reloaded when returning to the list. Do you see any issues with this approach?

http://plnkr.co/edit/CIBzbatYX1oOIqYbmHe7?p=preview

thanks,

Scott

[Adrien Pavillet]

Hello,

i looked at your plunkr and liked the way you manage to do it, I just have one question : do you think it would be possible and how would you do it in a larger application for a page which is already included by in an ng-view. For exemple if one would want to include the same kind of behavior on one page of an application with multiple pages handled by ng-view.

Since we cannot have multiples views I guess that would not be possible to do right ?

Thanks

[Scott McDonnell]

Hi Adrien,

Thanks for that, I have done a bit more on the same test and have cleaned up the filtering so that now you can search to filter your list and the next and previous work for the filtered results.

http://plnkr.co/edit/DbYCUzqGQwvMe56MNbM8?p=preview

To answer your question, I think it would be possible - I did a quick test using the new angular-ui-states to allow multiple ng-views see here:

http://plnkr.co/edit/8xfIIKEsxQdw7uUlitmJ?p=preview

selection isn't working yet when you go back to the list.

Scott

[Adrien Pavillet]

Thank for the answer i guess ui state is a solution, even i read somewhere that the angular team is pretty much against multiple views i dont really see other way around.