Related question. Imagine that the page is similar to the one in play.google.com but it has 4 different filters.
How would you encode the URLs? In case I go with the overlay route, I was thinking something like: www.example.com/#!/search/filter1=xx|filter2=yy|filter3=zz|filter4=ww for the pure search www.example.com/#!/search/filter1=xx|filter2=yy|filter3=zz|filter4=ww/open/123 for the open details on resources 123 That are capture by the router as: url: '/search/:filters' url: '/search/:filters/open/:id' That implies that "|" and "/" are not a valid character for the filters and I need to split the $stateParams.filters to get the data Another way would be www.example.com/#!/search?filter1=xx&filter2=yy&filter3=zz&filter4=ww for the pure search www.example.com/#!/search?filter1=xx&filter2=yy&filter3=zz&filter4=ww&open=123 for the open details on resources 123 but in this case I cannot use the router to separate the states. What do you think? On Monday, June 30, 2014 7:59:55 PM UTC-7, Chris Cinelli wrote: > > Back button and scrolling positions are not easy on dynamic apps. What is > easy on a statically generated page becomes quite hard in a dynamic app. > On a statically generated page the back button and scrolling position is > managed by the browser and the browser does a very good job to bring you > back at the exact scroll location where you left off. > On a dynamically generated app, it is not so easy and even the pros got it > wrong: > > - Look at https://play.google.com/store/search?q=cat&c=apps - > Apparently there are tons of application about cats... so let go through a > few of them to find the most awesome cat's app. I keep scrolling and > scrolling and every once in a while I see one that is promising and I want > to see the details. But after I opened, I find out that is not the one I > want. Now I click on the back button and ... booooo ... I am at the top of > the list. Now I have to scroll down a few times until I find where I left > off. I am kind of surprised to see thatGoogle has problems with this but > they are in good company... > - On https://www.facebook.com when you click on something on your > newsfeed, it opens a new page. When you click back it tries to bring you > back where you started but now the feed look different and even if you are > scrolled at the same position there is something different on the viewport > instead of the feed item you clicked on. Even if you you are in a person > profile and you click on a person feed and then you click on a person that > commented on a post, when you go back you are in the wrong position... > mmmmhhh. > - In Pinterest it works as desired: > http://www.pinterest.com/search/pins/?q=cat They use an overlay div > with overflow-y: scroll; position: fixed; right: 0; top: 0; bottom: 0; > left: 0; and a higher z-index to show the details. If you click on a > comment on the pin it close that overlay and bring you on a new page (the > whole page is NOT reloaded but the dom changed) when you click the back > button, the previous content is restored and it still bring you where you > were on the page. Cool! > - Twitter also does a good job to restore you in the right position! > > > I am using https://github.com/angular-ui/ui-router and by default the > scroll behavior between different routes does not work as desired. > > What are the best practices to make it work? > This is what I found so far: > http://stackoverflow.com/questions/14107531/retain-scroll-position-on-route-change-in-angularjs > > and I wonder how good and robust these answer are. > > -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
