This is first time i am trying to use ui-router.
Here is my app.js
angular.module('myApp', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/index.html");
$stateProvider.state('index', {
url: '/'
template: "index.html",
controller: 'loginCtrl'
});
$stateProvider.state('register', {
url: "/register"
template: "register.html",
controller: 'registerCtrl'
});
})
As you can see, i have two states. I'm trying to register state like this:
<a ui-sref="register">
<button class="button button-balanced">
Create an account
</button>
</a>
But i am getting
Could not resolve 'register' from state ''
exception. What is the problem here?
This kind of error usually means that some parts of (JS) code were not loaded. That the state which is inside of ui-sref
is missing.
There is a working example
I am not an expert in ionic, so this example should show that it would be working, but I used some more tricks (parent for tabs)
This is a bit adjusted state def:
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/index.html");
$stateProvider
.state('app', {
abstract: true,
templateUrl: "tpl.menu.html",
})
$stateProvider.state('index', {
url: '/',
templateUrl: "tpl.index.html",
parent: "app",
});
$stateProvider.state('register', {
url: "/register",
templateUrl: "tpl.register.html",
parent: "app",
});
$urlRouterProvider.otherwise('/');
})
And here we have the parent view with tabs, and their content:
<ion-tabs class="tabs-icon-top">
<ion-tab title="Index" icon="icon ion-home" ui-sref="index">
<ion-nav-view name=""></ion-nav-view>
</ion-tab>
<ion-tab title="Register" icon="icon ion-person" ui-sref="register">
<ion-nav-view name=""></ion-nav-view>
</ion-tab>
</ion-tabs>
Take it more than an example of how to make it running and later use ionic framework the right way...Check that example here
Here is similar Q & A with an example using the named views (for sure better solution) ionic routing issue, shows blank page
Improved version with named views in a tab is here: http://plnkr.co/edit/Mj0rUxjLOXhHIelt249K?p=preview
<ion-tab title="Index" icon="icon ion-home" ui-sref="index">
<ion-nav-view name="index"></ion-nav-view>
</ion-tab>
<ion-tab title="Register" icon="icon ion-person" ui-sref="register">
<ion-nav-view name="register"></ion-nav-view>
</ion-tab>
targeting named views:
$stateProvider.state('index', {
url: '/',
views: { "index" : { templateUrl: "tpl.index.html" } },
parent: "app",
});
$stateProvider.state('register', {
url: "/register",
views: { "register" : { templateUrl: "tpl.register.html", } },
parent: "app",
});