Não foi possível resolver '...' do estado ''

Esta é a primeira vez que tento usar o ui-router.

Aqui está meu 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 você pode ver, tenho dois estados. Estou tentando registrar um estado assim:

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

Mas estou conseguindo

Não foi possível resolver o 'registro' do estado ''

exceção. Qual é o problema aqui?

Esse tipo de erro geralmente significa que algumas partes do código (JS) não foram carregadas. Que o estado de dentro ui-srefestá faltando.

Há um exemplo de trabalho

Não sou um especialista em iônica, então este exemplo deve mostrar que funcionaria, mas usei mais alguns truques (pai para guias)

Esta é uma definição de estado um pouco 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('/');
}) 

E aqui temos a visualização pai com guias e seu conteúdo:

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

Pegue mais do que um exemplo de como fazê-lo funcionar e depois usar a estrutura iônica da maneira certa ... Veja esse exemplo aqui

Aqui está uma pergunta e resposta semelhante com um exemplo usando o problema de roteamento iônico de visualizações nomeadas (com certeza uma solução melhor) , mostra a página em branco

A versão aprimorada com visualizações nomeadas em uma guia está aqui: 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>

segmentação de visualizações nomeadas:

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

Só vim aqui para compartilhar o que estava acontecendo comigo.
Você não precisa especificar o pai, os estados funcionam de maneira orientada a documentos, então, em vez de especificar pai: app, você pode apenas alterar o estado para 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 Atenção, se você quiser se aprofundar no aninhamento, o caminho completo deve ser especificado. Por exemplo, você não pode ter um estado como

app.cruds.posts.create

sem ter um

app
app.cruds
app.cruds.posts

ou angular lançará uma exceção dizendo que não consegue descobrir a rota. Para resolver isso, você pode definir estados abstratos

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

Acabei de ter o mesmo problema com o Ionic.

Acontece que não havia nada de errado com meu código, simplesmente tive que encerrar a sessão de serviço iônico e executar o serviço iônico novamente.

Depois de voltar para o aplicativo, meus estados funcionaram bem.

Também sugiro pressionar salvar no arquivo app.js algumas vezes se estiver executando o gulp, para garantir que tudo seja recompilado.

Tive o mesmo problema com o roteamento Ionic.

Uma solução simples é usar o nome do estado - basicamente state.go(state name)

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

E no controlador você pode usar $state.go('tab.search');

Tive um caso em que o erro foi lançado por um

$state.go('');

O que é óbvio. Acho que isso pode ajudar alguém no futuro.

Como respondido por Magus:

o caminho completo deve ser especificado

Os estados abstratos podem ser usados ​​para adicionar um prefixo a todos os urls de estado filho. Mas observe que o abstrato ainda precisa de uma visão-ui para que seus filhos sejam preenchidos . Para fazer isso, você pode simplesmente adicioná-lo embutido.

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

Para obter mais informações, consulte a documentação: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views