Move to ui-router for nav system

[casoetan]

Is it possible to implement ionic with ui router? When I tried, I got this...

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module ionic due to:
Error: [$injector:modulerr] Failed to instantiate module ngRoute due to:
Error: [$injector:nomod] Module 'ngRoute' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Seems ionic has ngRoute as a hard dependency. Hope its not true.

I'm using requirejs

[casoetan]

Ok. Now just a guide as to if this is good.

require.config {
  paths:
    jquery:                   '../libs/jquery/jquery'
    domReady:                 '../libs/domready/ready'
    angular:                  '../libs/angular/angular'
    ionic:                    '../libs/ionic/dist/js/ionic'
    'ionic-angular':          '../libs/ionic/dist/js/ionic-angular'
    'angular-animate':        '../libs/angular-animate/angular-animate'
    'uiRouter':               '../libs/angular-ui-router/release/angular-ui-router'
    'angular-route':          '../libs/angular-route/angular-route'
    'angular-touch':          '../libs/angular-touch/angular-touch'
    'angular-sanitize':       '../libs/angular-sanitize/angular-sanitize'

  baseUrl: 'scripts',

  shim:
    'angular':                {deps:['jquery'], exports: 'angular'}
    'uiRouter':               {deps:['angular']}
    'ionic':                  {exports: 'ionic'}
    'ionic-angular':          {
                                deps:[
                                      'angular-animate'
                                      'angular-route'
                                      'angular-touch'
                                      'angular-sanitize'
                                      ]
                              }
    'angular-route':          {deps:['angular'], exports: 'ngRoute'}
    'angular-animate':        {deps:['angular'], exports: 'ngAnimate'}
    'angular-touch':          {deps:['angular'], exports: 'ngTouch'}
    'angular-sanitize':       {deps:['angular']}

  priority: [
    'angular'
    'ionic'
  ]
  # http://stackoverflow.com/questions/8315088/prevent-requirejs-from-caching-required-scripts
  urlArgs: "bust=" + (new Date()).getTime()
  deps: ['./bootstrap']
}

This works for me, I'm I good to go or would I run into issues (performance or otherwise) up the road Any guide would be fantastic.

Cheers

[nicolasca]

I have some issues with ui-router.

If I put an ui-view inside the tag side-menu, it creates problem.

```

```

I use the abstract feature of ui-router. And I expect the children to be included inside this ui-view. In fact it is the parent template which is include. So basically it brokes, because it is like an infinite loop: parentTemplate -> insert itself in its ui-view

It works if I move the ui-view outside the tag side-menu

[mlegenhausen]

Cause ngRoute is not part of the angular core anymore and there are alternatives like ui-router. ionics should not depend on it.

The simplest solution is to remote ngRoute from the dependency list and allow to add the developer to add ngRoute again if he needs the NavRouter. Or even better the NavRouter implementation should be exchangable so ui-router can be used too.

[casoetan]

ionic isn't yet optimized for ui-router. Some hacks maybe needed.

[mlynch]

The tentative plan is to move to use ui-router for our nav system. In terms of relying on it or not, I'm open to it I just don't see a lot of other options beyond ngRoute and ui-router.

[ludovicbret]

I'm currently trying your framework. It's a great initiative ! Thanks a lot guys ! But I can't figured out a way to implement contextual nav-system. My wish : I want to have a side-menu panel that can load an isolated nav system in my ng-view. I can't see any way to actually do this with the current implementation that relies on the $rootScope. I'm open to suggestion and could do the dev part for this...

[casoetan]

Any updates yet?

[nicolasca]

I think there is. Some commit have been made for angular ui-router in the master branch, so it will maybe available in the next release.

[adamdbradley]

The latest version, 0.9.19 uses ui-router instead of ng-route now. Please take it for a spin and let us know how it goes: http://codepen.io/ionic/pen/HjnFx http://ionicframework.com/docs/angularjs/controllers/view-state/

[casoetan]

thanks

[cdarken]

@adamdbradley do you have an example how to use the navigation controller with a side-menu?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.