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?
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!