Failed to resolve '...' from state '

Question

This is the first time I'm 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 am trying to register the state as follows:

 <a ui-sref="register"> <button class="button button-balanced"> Create an account </button> </a> 

But I get

Failed to resolve "register" from state "

an exception. What is the problem?

Answer 1

This error usually means that some part of the code (js) was not loaded. That there is no state inside ui-sref .

There is a working example

I'm not an expert in ionic, so these examples should show that it will work, but I used a few more tricks (parent for tabs)

This is a bit state.

 .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 a parent view with tabs and their contents:

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

Do it more than an example of how to make it work, and then use the ionic framework correctly ... Check this example here

Here Q and A are similar with an example using named representations (more precisely, the best solution), the problem with ion routing shows a blank page

An improved version with named views on the 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> 

named view targeting:

  $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", }); 

Answer 2

Just came here to tell what is happening to me.
You do not need to specify the parent element, those working in the document are oriented so that instead of specifying the parent: app, you can simply 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 into nesting, I have to indicate the full path. For example, you cannot have a state like

 app.cruds.posts.create 

not having

 app app.cruds app.cruds.posts 

or angular will throw an exception saying that it cannot determine the route. To solve this, 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 }) 

Answer 3

I had the same problem with Ionic.

It turned out that nothing happened with my code, I just had to leave the ion delivery session and restart the ion delivery.

After returning to the application, my states worked fine.

I would also suggest saving the app.js file several times if you use gulp so that everything is recompiled.

Answer 4

I had a case where the error was reset with

 $state.go(''); 

It is obvious. I think this may help someone in the future.

Answer 5

Had the same problem with ion routing.

A simple solution is to use a state name - basically state.go(state name)

 .state('tab.search', { url: '/search', views: { 'tab-search': { templateUrl: 'templates/search.html', controller: 'SearchCtrl' } } }) 

And in the controller you can use $state.go('tab.search');

Answer 6

As Magus answered:

full path must be specified by me

Abstract states can be used to add a prefix to all URLs of child states. But note that the abstract still needs a user interface for its children . To do this, you can simply add it to the string.

 .state('app', { url: "/app", abstract: true, template: '<ui-view/>' }) 

For more information, see the Documentation: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views