I have an Angular app that uses Angular UI Routing to provide states. The basic routing between pages works.
The app has multiple pages, and one of those pages has tabs. When I navigate to the page, I get a nice animation, and the back button appears in the header.
But when I navigate to the tabs page, the back button doesn't appear and there is no animation to the page. Is it possible to get an animation when I navigate to the page that has tabs, and to have the back button appear?
UPDATE:
Made a new example that better shows what I mean:
http://plnkr.co/edit/jKII2S3uEnEOVDy9WBA2?p=preview
look into this -
http://ionicframework.com/docs/angularjs/controllers/view-state/
The View Service is leveraged by the Ionic's tabs directive, which has
child tab directives. Each tab requires its own history stack (forward
and back buttons), and to do so each tab has its own navView
directive. This system is similar to what you see in modern apps, such
as iOS's App Store, or Android's Play Store.
each tab within tabs has it's own history stack, therefor your nav-bar history is reset when you enter a tab for the first time.
it is managed with a $historyId value on the scope of the directive. maybe you can work around that with the use of these value.
Related
I'm using React with react-router v4 for routing in a SPA app.
From within a list page, when user taps on an item, we navigate to detail url which renders detail component.
From here, if I click back, route transitions to list page but list page itself is reloaded. So its scroll position, selection of an item (which opened the details page) is lost.
I have been struggling to think about how to approach this problem. One way I was thinking is to build all pages to open as model on top of another so base page context is always there and when user navigates back, I can start to close the modals revealing previous page in its exact state.
Not sure if that is a right approach.
You could store the current scroll position locally, then scroll back to it when your list page component is mounted.
These are jQuery answers, but the principle is the same:
Restoring page scroll position with jQuery
How can I retain the scroll position of a scrollable area when pressing back button?
I'm having issues with an overlay panel.
The first page loads, you click a link... It pops up an overlay, the router fires a state and controller, and it populates the contents of the overlay.
There is a back button on the overlay, I trigger the overlay to close, call window.history.back() which sends the router off to load the new url (previous url) and it runs it through the router again but obviously refreshes the backing page in doing so.
So the end result is when you press a link, the overlay slides out beautifully, you then press back, the overlay slides back in, it then refreshes the page. You'd think then, why not just say in the controller, if there was an overlay and now there isn't do not change the view content... I can't, as the template stuff gets placed into the ui-view which is remove all my content.
So I need a way of changing the url without running through all of the controller stuff again so to avoid the template being inserted.
Any ideas on how to do this? Or examples of it working somewhere else.
Im working with the Ionic-Framework and AngularJS.
If you create the Ionic sidemenu sample project:
ionic start myApp sidemenu
You will get a small example application which shows my exact problem.
You can try out the behaviour here: Plunker
If you open up the Side-Menu and navigate to several locations everything
is put on the Back-Stack. How can I prevent that behaviour for special pages?
For our example lets say i always want to completely delete the Back-Stack
when the "playlists" page is called. My Application will run on mobile devices only and its very untypical to be able to press the back button in the main menu and be navigated to the last opended page.
I want Angular UI-Routing to simulate the Android Backing behaviour.
How can i achieve that?
Another problem is that the hardware back button seems to work different than the back button of the navigation bar. You can see that in the browser. If you navigate to a link from the side menu there wont appear a back button in the navigation bar (Like it should be!). But when you press the browser back button, suddenly a back button in the navigation bar appears (very uncool!). How to prevent that?
Is there any way with angular-ui-router to actually preserve the state of the UI like most native apps do?
For example, if I was on the home view and I clicked an accordion list which expanded, then clicked on that item inside the list and navigated to another view. Next, I decide to go back to the home view. The result I would like to have is the accordion list still expanded when navigating back to the home view rather than refreshing the page.
Is there any way to preserve the actions/state of UI we navigating back and forth between views?
Checkout ui-router extras. I think "Deep State Redirect" probably what you are looking for.
Background:
I am using backbone.js & Twitter Bootstrap in my client-end page.
On clicking the logout button on header, a confirmation dialog should open.
The question is that
should I use router such as /logout to change to logoutView ?
If click No in the dialog, how could I show the main content with data before the dialog is opened.
Thanks!
Yes, you can use a router and you should.
First thing to know, is you have to render application's layout before dispatching any route, because the layout is rendered and needed for every action, so it's independant, right ?
Second you create a "logout" route in your router and give it the "#logout" hash, then in your "logout" action you open the modal.
Don't use router for such thing. Just fire the modal directly because:
On changing the router, you are gonna push that to the History. Hitting the browser's back button shouldn't really open a modal window.
URLs should be crafted in a way to be bookmarked. You don't want a URL that would open a popup or a modal window!
It's much simpler just to start the modal than to create a variable to hold the previous view and to fall back to it when clicking No
I have build client-side apps using different MVC frameworks like AngularJS and Backbone.js. Every time I faced the same situation you are talking about and found that the easiest and most accurate way is to just show the modal.
UPDATE
Please watch this. This is Jeremy Ashkenas the author of backbone.js stating exactly your situation about how should URLs be used and weather if they should be used to open a pop up or not.