No se pudo resolver '...' del estado ''

Esta es la primera vez que intento utilizar ui-router.

Aquí está mi 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'
  });
})

Como puede ver, tengo dos estados. Estoy tratando de registrar un estado como este:

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

Pero estoy consiguiendo

No se pudo resolver el 'registro' del estado ''

excepción. ¿Cuál es el problema aquí?

Este tipo de error generalmente significa que algunas partes del código (JS) no se cargaron. Que ui-sreffalta el estado que está dentro .

Hay un ejemplo de trabajo

No soy un experto en iónico, por lo que este ejemplo debería mostrar que funcionaría, pero usé algunos trucos más (padre para pestañas)

Esta es una definición de estado poco ajustada:

.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('/');
}) 

Y aquí tenemos la vista principal con pestañas y su contenido:

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

Tómelo más que un ejemplo de cómo hacerlo funcionar y luego usar el marco iónico de la manera correcta ... Vea ese ejemplo aquí

Aquí hay preguntas y respuestas similares con un ejemplo usando las vistas nombradas (sin duda una mejor solución) problema de enrutamiento iónico, muestra una página en blanco

La versión mejorada con vistas nombradas en una pestaña está aquí: 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>

segmentación de vistas nombradas:

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

Solo vine aquí para compartir lo que me estaba pasando.
No es necesario especificar el padre, los estados funcionan de una manera orientada al documento, por lo que, en lugar de especificar padre: aplicación, puede cambiar el estado a 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"
});

EDITAR Advertencia, si desea profundizar en el anidamiento, debe especificar la ruta completa. Por ejemplo, no puedes tener un estado como

app.cruds.posts.create

sin tener un

app
app.cruds
app.cruds.posts

o angular lanzará una excepción diciendo que no puede averiguar la ruta. Para resolver eso puedes definir estados abstractos

.state('app', {
     url: "/app",
     abstract: true
})
.state('app.cruds', {
     url: "/app/cruds",
     abstract: true
})
.state('app/cruds/posts', {
     url: "/app/cruds/posts",
     abstract: true
})

Acabo de tener el mismo problema con Ionic.

Resulta que no había nada malo en mi código, simplemente tuve que salir de la sesión de servicio iónico y ejecutar el servicio iónico de nuevo.

Después de volver a la aplicación, mis estados funcionaron bien.

También sugeriría presionar guardar en su archivo app.js varias veces si está ejecutando gulp, para asegurarse de que todo se vuelva a compilar.

Tuve el mismo problema con el enrutamiento iónico.

La solución simple es usar el nombre del estado, básicamente state.go(state name)

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

Y en el controlador puedes usar $state.go('tab.search');

Tuve un caso en el que el error fue lanzado por un

$state.go('');

Que es obvio. Supongo que esto puede ayudar a alguien en el futuro.

Como respondió Magus:

la ruta completa debe ser especificada

Los estados abstractos se pueden usar para agregar un prefijo a todas las URL de los estados secundarios. Pero tenga en cuenta que el resumen todavía necesita una vista de interfaz de usuario para que lo completen sus hijos . Para hacerlo, simplemente puede agregarlo en línea.

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

Para obtener más información, consulte la documentación: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views