Problems Popping Page with Onsen UI - angularjs

I downloaded on the Onsen UI boilerplate for a Tabbed application. I then added a second page navigator for one of the tabs. This second tab will have two pages available. The problem comes when I visit this tab, go to the second page of the tab and then use popPage to go back to the first page of the tab. After the page transition is complete, I get this:
Error: no such object: [object Navigator]
at Object.aliasStack.unregister (http://dev-m.scrippa.com/lib/onsen/js/onsenui.js:10848:17)
I'm using this method to pop:
<ons-button ng-click="placesNavigator.popPage()">Back</ons-button>
This seems like a navigator problem, but not sure what to change. This leads me to a question: How many navigators should an app have? And what is breaking?
Keith

I had trouble with this too.
I think you just have one navigator at the root page.

Related

React navigation and routing problem with a multipage application

I have a react project with multiple pages however if i scroll in one page and then use the navigation bar to navigate to another page the scroll is not undone so the page starts at the position of the previous scroll
Please refer to this question:
react-router scroll to top on every transition
They asked the same question.

Angular UI Bootstrap Carousel Pager stops working after I visit other tabs and return back

I have angular UI bootstrap's carousel directive implemented on my site. Everything is working fine and suddenly I noticed that whenever I browse to other sites, leaving my site open in one tab and come back to my site again, the pager and carousel controls stop working. It's strange but I have set my carousel to auto rotate and it also stops.
The carousel won't work until I refresh. First, I thought I had some bugs in my code, but when I tried their own slider from the https://angular-ui.github.io/bootstrap/#/carousel website, also shows the same behavior.
Any thoughts or fixes on this?
For the code, please visit this link :
https://angular-ui.github.io/bootstrap/#/carousel
And scroll down to the Carousel section and click Edit in Plunker.
Thankyou!
This is a known issue and is under investigation.

Ionic + Angular UI-Routing: How to delete Back Stack?

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?

Angular.js + Bootstrap: how to show all views on vertical scroll?

I'm building my first Angular.js + Bootstrap web site.
As far as user interface is concerned, I use a classical top navbar approach, with 7/8 items in navbar linking to the relative views. This is a first version of the site. When you click on "weather", you go to the weather page. When You click on "services", you go to the services page. That's ok.
But, I would like, for a better mobile user experience, when scrolling down, all views to be shown, in sequence... This is an example of what I mean, to be clearer...
Is it possible, preserving the angular.js "routing" logic?
UPDATE: I did change the page contents in the first link, adding two links in navbar, because of Ronni Skansing comment...
UPDATE2: I try to better reformulate the question:
Is it possible, with angular.js (+bootstrap), to design an UI with all views reachable without any click, but continuously, vertical scrolling the page, the way a typical mobile web app user is used to?
I don't think you can really have a single page unless you design your website to be a single page.
Anyway, I found a solution which is very similar to what you would like: simply add a transition on ng-view change. The user won't be able to scroll, it will still have to click on the navbar items. But the sensation will be similar to scrolling. See here the example. (remember to choose the slidedown effect)

AngularJS UI Router: Not registering history state when navigating to tabs

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.

Resources