Sefa Sefa - 4 months ago 26
AngularJS Question

Could not resolve '...' from state ''

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?

Answer

This kind of error usually means, that some part of (js) code was 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 examples 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 then an example 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 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",
  });