Could not resolve '...' from state ''
Just came here to share what was happening to me.
You don't need to specify the parent, states work in an document oriented way so, instead of specifying parent: app, you could just change the state to app.index
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/index.html");
$stateProvider.state('app', {
abstract: true,
templateUrl: "tpl.menu.html"
});
$stateProvider.state('app.index', {
url: '/',
templateUrl: "tpl.index.html"
});
$stateProvider.state('app.register', {
url: "/register",
templateUrl: "tpl.register.html"
});
EDIT Warning, if you want to go deep in the nesting, the full path must me specified. For example, you can't have a state like
app.cruds.posts.create
without having a
app
app.cruds
app.cruds.posts
or angular will throw an exception saying it can't figure out the rout. To solve that you can define abstract states
.state('app', {
url: "/app",
abstract: true
})
.state('app.cruds', {
url: "/app/cruds",
abstract: true
})
.state('app/cruds/posts', {
url: "/app/cruds/posts",
abstract: true
})
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",
});