Can the ionic function "ion-nav-view" (ui-router) work with ngRoute?

Question

I am trying to merge the Angularfire-Seed with a sample Ionic App. This has worked so far quite well.

To browse between my views, I am interested to use the ionic functionality:

// requires ui-router
<ion-nav-view></ion-nav-view>

instead of

// requires ngRoute
<div ng-view></div>

The problem is that the ion-nav-view (Ionic) is part of the ui-router (see here explanation) whereas ng-view part of ngRoute (Angularfire-seed).

Is there therefore a way to keep using the ngRoute (as a lot of coding has been done in the Angularfire-Seed project and thus I dont want to switch to ui-router), but still use ion-nav-view?

Follow-up: has someone implemented AngularFire with Ionic (and thus ui-router)? Available git?

Try this Q&A where is working plunker with ionic example. It could help http://stackoverflow.com/a/25905602/1679310 — Radim Köhler, Jan 15 '15 at 16:08
Thanks for the link. It looks like its mostly focused on ui-router isn't it? — AMG, Jan 15 '15 at 16:18
Wanted to give you just something:) ui-router is the best choice anyhow... — Radim Köhler, Jan 15 '15 at 16:23
ionic nav view needs ui-router, even the module dependency has ui.router. So you cannot use ng-route — PSL, Jan 15 '15 at 17:05

score 1 · Answer 1 · edited May 23 '17 at 10:25

No, ion-nav-view uses the ui-router under the hood. Unless you want to write your own implementation you can't use ngRoute with it.

EDIT

To answer your question about using your linked file with Ionic, you'll have to refactor it to use ui-router. Check the UI Router Guide here and the Ionic docs here. It's well worth reading the first link to get a thorough understanding.

Dependencies

ui-router is included in the Ionic bundle so you don't need to explicitly state it as a dependency.

So provided you already have Ionic as a dependency, instead of

angular.module('myApp.routes', ['ngRoute', 'simpleLogin'])

you can just have

angular.module('myApp.routes', ['simpleLogin'])

.config blocks

I've not used ngRoute but the syntax between the $stateProvider of ui-router look quite similar. With ngRoute you used the $routeProvider like so...

.config(function($routeProvider, $locationProvider) {
  $routeProvider
   .when('/chat', {
    templateUrl: 'partials/chat.html',
    controller: 'ChatCtrl',
  })

With ui-router configuring a 'state' is something like the following (the use of $urlRouterProvider.otherwise() at the end catches any URLs that haven't been explicitly defined and redirects to whichever URL you specify)

.config(function($stateProvider, $urlRouterProvider){

  $stateProvider

    .state('home', {
      url: '/',
      templateUrl: "partials/home.html",
      controller: 'HomeCtrl',
      resolve: {
        // resolve stuff in here, check the docs for implementation differences
      }
    })

    .state('chat', {
      url: '/chat',
      templateUrl: "partials/chat.html",
      controller: 'ChatCtrl',
      }
    })

  $urlRouterProvider.otherwise('/');

Authentication is handled in your linked file, this link may help angular ui-router login authentication. Good luck!

Thanks, do you know how to replace ngRoute with ui-router in this file https://github.com/sibizavic/ionic-angularfire-mix/blob/master/js/routes.js — AMG, Jan 15 '15 at 19:29

Can the ionic function "ion-nav-view" (ui-router) work with ngRoute?

1 Answers1