I want to use URL’s to navigate between pages in an Ionic 2 project. I am aware that the new navigation system works with push and pop but the docs clearly mention that URL’s can still be used. I tried searching the docs and the source on how to do this but I couldn’t find anything.
If anyone has managed to do this or can figure it out please let me know.
Like native apps, URLs are not required for navigation. Instead, pages are pushed and popped on and off a navigation controller’s page stack. URLs can be used to link back to unique, important parts of your app (“deeplinking”) but don’t define navigation as your app runs.
When it comes to URLs, Ionic 2 works a bit differently than Ionic 1. Instead of using URLs to navigate, we use them to make sure we can always come back to a page (on app launch, for example). This means we aren’t not limited to using href to navigate around. However, we still have the option to use a URL to navigate to a page when necessary.
I would also love to see navigation by URL, but also by the normal pushing and poping and passing of nav params. The ionic 2 navigation and nav param passing has been working great for me, but I can foresee when a url would be useful as well, such as when/if the app gets refreshed. Without a url, memory is cleared and all nav params to the @page you werw in are lost. Ideally, using nav.push with nav params would also encode the params into the URL. Those are my thoughts.
Ye, that issue was mine. But I didn’t get it to work when I only want to use URL routing. I rather not keep the location stored in localstorage because refresh the page has to work some info would be nice even if we have to change it later.
I’m looking to setup deep linking on push notifications through ionic.io for my Ionic 2 app. Do you have any samples on how this is possible? Any advice is much appreciated. Basically, when a user taps on a notification, it brings the user to the right page in the app.
From developer’s point of view the current state of the art (stack for navigation, no explicit url’s) is uncomfortable for several reasons:
you cannot share link to some particular screen with your co-workers or paste it to issue tracker.
on code change, live-reload will throw you to the default starting page. If the page you currently develop is somewhere far away, is is annoying to click you way throught the app after every livereload.
you cannot easily run tests which should start on some particular screen
Also the stacked navigation may guide developers to create UX-unfriendly navigation in their apps.
Most mobile apps have tree-like navigation structure – i.e. there is a root page (e.g. Dashboard), a side menu, and you can dive to several master-detail pages, but typically you don’t dive more than 1 or 2 levels of depth (I would say developer should avoid more than 2 levels of depth of navigation, because the user will get lost).
Unfortunately stack navigation may suggest to (newbie) developers that navigation into depth is a good thing and instead of prefering tree-like navigation, developer will use stack to dive deeper and deeper.
Is there any news on this topic? There are various requirements and project setups that make deep-linking and a combination of url-based routing and push/pop-based navigation necessary. It would be be really helpful, if there was was a working example or best practice available.
Angular has refactored their router multiple times, and it is not currently supported in the latest version of Ionic. We added the following section to our changelog with the beta.7 release:
The Angular router is currently under heavy development and refactoring. As a result of this, Angular’s router is currently disabled within Ionic. If your app requires use of the router we recommend waiting until a future release of Ionic when Angular has completed work on the new router. However, this does not affect Ionic’s navigation system and it continues to work with the same API from previous versions.
We understand and agree that routing is important, and we will add support for it when Angular has released a stable version. Thank you and sorry!
It means right now there is no way to share a link for a particular page? Also I’d like to see URL accept parameter as well like http://a.com/pagename&id=10
I would also love to know what the options / plans are for this. Don’t want to delve deep into the Angular Router if this will become a feature, before getting too far into my current app. URL navigation will be critical for it.
some info would be nice even if we have to change it later.