Routing question (and abstract views)

Hi guys, I created a pen since I can’t get my head around the ionic routing:

What I’m trying is to create a login screen that does not keep history when navigating to another screen (the todo.lists screen). If you click on the “todo lists” link, you can see that it navigates with an animation to the other view and it shows a back button.

My understanding was that I could create abstract routes to keep this history separate. Can somebody explain how I can navigate to “todo.lists” without the animation and without keeping a navigation history with back button back to the index (login) screen?

From the todo screen I’d like to keep history but not before that, I hope this question makes sense.

Thanks for helping me understand routing better!

Look at using clearHistory() or nextViewOptions() using $ionicHistory in your controller, this should address your issue

Thanks djett, I’ll look into those. Is that the way to solve this?

Am I using abstract views incorrectly? I’ve read up about them here https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views but I can’t really figure out when to use them and when I can just use a more simple approach with simple routes instead of abstract views.

Do you think you can explain a bit when to use abstract states and when to just use states?

In an app I’ve built before (it’s in the app store) I made this work without using the options you mentioned, but I can’t seem to figure out what I’m doing wrong this time in my second app.

I guess my question really is: what makes a view navigate in an animated way to another view with the back button (and matching history) versus just opening the view on it’s own as a new starting point so to speak without back button (and with no history). My understanding was that by creating abstract states I would have created this structure.

The navigation history and the animation are 2 separate things.

As far as the animation goes, when changing states if you want to disable the animation you need to put the nav-transition=“none” attribute on the link for todo. By default any ion-nav-view children will animate with a platform specific animation.

Ionic doesn’t play nice with nested and abstract states, The black flicker you see when switching from home to todo is from the abstract state, if you remove the abstract: true line, the animation is smooth.
Another reason why I removed all my abstract states is because the iOS swipe to go back feature will not work with nested states, so if you can I would just have your single ion-nav-view on your index and stay away from nested states.

The back button is tied to the ionicHistory stack. So unless specifying explicitly and disabling history for a specific state or view, then ionic will add the view to the history stack and add a back button to go back from view B back to A. So I would tackle this by what I added in the previous post.

Hi @djett, thanks for helping out. Right now I have what I want by creating abstract views, but I still feel like I’m missing something to understand abstract views.

Are abstract views nothing more than some sort of view with a URL prefix that possibly re-uses one template? Is there something I cannot do when avoiding abstract views. In other words, what’s one good reason to use abstract states?

Thanks again!

All in all i must say… ionic works really good with abstract states.

For example i have an abstract base state in each app. this is my root state + a base controller, which handles stuff, which is needed in many other states.

Swipe to go back is only working in the subviews of a parent/abstract state, which is correct because… each has an “own” history branch.

I am using abstract states if i need to share controller functionality between states / views.

For example you have not a mobile angular app, instead a ordinary webapp.
I have a list state and a detail state.
My API has only a list-request to get my entries

Now i am getting to detail state -> data can not be shared and so i can display all information.
But now i am able to relad the page.
My data is gone and i have to load the data again in the detail page.

So i need the logic on list and detail controller.

But with a parent/abstract state -> i can put in the logic to load the items.
Once they are loaded i can inform my child controllers via $broadcast, that the data is loaded.
Even after a page reload i get informed when the data has loaded -> and only need the load logic once.

So if you have multiple views for a new context you can add abstract parent state around it.
Like you have list and detail view:

/myContext -> abstract state myContext
/myContext/list -> list state myContext.list
/myContext/detail/:id -> detail state myContext.detail

So in Apps -> if you switch context -> you are in a new history branch

Hope that helps a little bit

Thanks @bengtler for the explanation, it does help!