UI Router vs Angular Core Router

ionic-v1
1

Since the addition of UI-Router in 0.9.19, have I lost the ability to use the core ng-router instead of the state provided?

2 Likes
2

Same here, having a lot of trouble updating my project from 0.9.17 to 0.9.20…

Also, I’d like to ask : Is there any heritage in the template system with the UI router ?

A documentation is greatly appreciated !

Thanks guys

3

Hey @mhartington + @WidawskiJ! Thanks for bringing this up.

@adam and @max will look into this next week at some point and get back to you!

4

Hey @mhartington and @WidawskiJ.

We made the decision to quickly switch off of ngRoute before we hit the beta which didn’t have the ability to let users build things like nested navigation that mobile developers can easily do on iOS, etc. That means you can have one tab of a tabbed interface with its own navigation stack. ngRoute can’t handle that.

We don’t look at the angular modules and our directives as being comprehensive maps to the ng modules. Rather, we pick the best ones, and build our custom directives to make the best possible mobile app development library.

We just decided ngRoute wasn’t enough for what we needed. Fortunately, moving to ui-router is actually fairly straightforward, take a look at the seed proejct’s new routes, you can usually just change $routeProvider to $stateProvider and use state() instead of when():

 .state('home', {
    url: '/home',
    templateUrl: 'templates/home.html'
  }
})

Sorry, I know this stuff is annoying but hopefully with the new stuff this won’t change for a long time.

1 Like
5

@max, @Ben setting up with ui-router was as straight forward as you said it was. I was able to convert my project to use the ui-router and everything is working great. Hopefully I can post something about the app once Ionic reaches 1.0 final and everything is stable.

Thanks for Ionic

6

Wish I saw this 24 hours ago. Switched to it worked fine for me too.

8

Which example still uses ngRoute instead of ui-router?

9

All demos either on our codepen site, or demos that come bundled with the the repo, use ui-router.

10

What is your app? Can I have some sneak peak?

11

Looks like maybe this tutorial needs updating?

Note sure if there’s actually a page that links there. I can’t figure out how I got there in fact… I’m guessing I searched for ngRoute against ionicframework.com:

https://www.google.com/#q=ngroute+site:ionicframework.com

12

It seems to work using the @ notation BUT you need to override the correct state.

So if you are using the starter project

.state('tab', {
    abstract: true,
    templateUrl: 'templates/tabs.html'

In this abstract state we have the template with placeholders for children state

<ion-nav-view name="tab-dash"></ion-nav-view>

Then in the state

.state('tab.dash', {
  views: {
    'tab-dash': {
      templateUrl: 'templates/tab-dash.html'

The content of tab-dash.html will fill the placeholder (tab-dash) in the parent state (tab).

If you want to fill the same placeholder you need to specify the state using the @ notation:

.state('tab.dash.detail', {
  views: {
    'tab-dash@tab': {
      templateUrl: 'templates/tab-dash.html'

This reads: Hey ui-router please fill the placeholder tab-dash that you’ll find in the state tab with my content from templates/tab-dash.html. Thank you.