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?
Related
I made a page with the same url all the time. I show my div by hiding and showing components, but no route. So, now I need the user can go back page using the back arrow of the explorer. Is there any possibility?
The back button of the browser change the window history :
https://developer.mozilla.org/fr/docs/Web/API/Window/history
So i don't think you can link the browser back btn to a javascript variable and prevent his effect on history
You can find on the net solution where people force history.forward() when back btn is pressed, you can change your variable here. But it's a bit dirty
How can I stop the browser back button using JavaScript?
I have some strange problem with browser tab freeze when working with React and Angular projects. Browser tab freezes when I save some file but only if I do something like click on hamburger menu that shows another component or any action with components or browser tab.
Example:
-> I change something in component (added more text, changed some color)
-> saved file to auto reload
-> I can see changes on my browser tab (it looks like browser tab is not "refreshing" but changes that I've made are visible after save)
-> I add something to my component (anything)
-> I can see changes on my browser tab and everything is fine every time when I add or change something. BUT when I try to do some action like click on hamburger menu button, click on some nav button that changes component or even when I click "Toggle device toolbar" in browser dev tools then my browser tab freezes. Rendered component is showing with big delay, when I click some button then action is delayed and I have to close browser tab but it takes a while to close when I click on it to close it.
This problem appears in every browser I use (chrome, brave, firefox). My computer system is Ubuntu 20.04.2 LTS. I use VSCode for coding.
I'm not sure if this problem appears because of some IDE or project configuration. I think it's because something in Ubuntu but I don't know what is going on.
Edit.
It does not matter if it is big project full of code and logic or new one with simple one "Hello, World!" component - the problem appears always.
I want to pop a modal with "Cancel" and "Yes" buttons when a user attempts to leave the single-page app.
To provide some context, I am working on a single page app that appears on a larger site that is not part of the single page app (so, the header and footer is part of the larger site, and single-page-app is the content). When a user attempts to leave to another part of the site (by clicking somewhere in the nav for instance) that is not part of the single page app, I want a warning modal to display with a warning. A user can close or refresh the page as much as they want, and it shouldn't pop a modal. Same thing if a user hard-codes a url (say, google.com in the browser), the modal should not pop.
So far the other similar threads I found on stackoverflow either uses Prompt component, or window.onbeforeunload. Both of these have the issue of them popping a default text box with a warning, and not a custom modal, which is an important problem, but that isn't all of the issue.
Prompt, to my understanding triggers whenever a user redirects within the single page app, which is not the behavior that I want.
window.onbeforeunload, to my undertstanding triggers even when refresh or close, which is not the behavior I want.
Maybe this isn't such a common problem, since I can't seem to find an easy solution for this, but any and all ideas are greatly appreciated.
I am using ionic for phonegap to build mobile app.
As i have written all code and now when I click back button to returns, some times shows like below attached image.
I have used href="#/pagename" to change page in html.
After long Research I found the solution.Below is the refresh link and the solution.
http://blog.ionic.io/preparing-for-ios-9/
:)
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.