Impossibile risolvere "..." dallo stato ""

Questa è la prima volta che cerco di utilizzare ui-router.

Ecco la mia 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'
  });
})

Come puoi vedere, ho due stati. Sto cercando di registrare uno stato in questo modo:

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

Ma sto ottenendo

Impossibile risolvere "registro" dallo stato ""

eccezione. Qual è il problema qui?

Questo tipo di errore di solito significa che alcune parti del codice (JS) non sono state caricate. Che ui-srefmanca lo stato che è dentro .

C'è un esempio funzionante

Non sono un esperto di ionico, quindi questo esempio dovrebbe mostrare che avrebbe funzionato, ma ho usato alcuni trucchi in più (genitore per le schede)

Questa è una definizione di stato leggermente modificata:

.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 qui abbiamo la vista genitore con le schede e il loro contenuto:

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

Prendilo più di un esempio di come farlo funzionare e in seguito usa il framework ionico nel modo giusto ... Controlla questo esempio qui

Ecco una domanda e risposta simile con un esempio che utilizza le viste con nome (sicuramente una soluzione migliore) problema di instradamento ionico, mostra una pagina vuota

La versione migliorata con viste con nome in una scheda è qui: 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 di visualizzazioni con nome:

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

Sono venuto qui solo per condividere quello che mi stava succedendo.
Non è necessario specificare il genitore, gli stati funzionano in modo orientato al documento, quindi, invece di specificare genitore: app, puoi semplicemente cambiare lo stato in 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 Attenzione, se vuoi approfondire l'annidamento, devi specificare il percorso completo. Ad esempio, non puoi avere uno stato come

app.cruds.posts.create

senza avere un

app
app.cruds
app.cruds.posts

o angular lancerà un'eccezione dicendo che non riesce a capire la rotta. Per risolverlo puoi definire stati astratti

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

Ho appena avuto lo stesso problema con Ionic.

Si scopre che non c'era nulla di sbagliato nel mio codice, ho semplicemente dovuto chiudere la sessione di servizio ionico ed eseguire di nuovo il servizio ionico.

Dopo essere tornato nell'app, i miei stati hanno funzionato bene.

Suggerirei anche di premere alcune volte salva sul tuo file app.js se stai eseguendo gulp, per assicurarti che tutto venga ricompilato.

Ha avuto lo stesso problema con il routing ionico.

La soluzione semplice è usare il nome dello stato - fondamentalmente state.go(state name)

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

E nel controller puoi usare $state.go('tab.search');

Ho avuto un caso in cui l'errore è stato generato da un file

$state.go('');

Il che è ovvio. Immagino che questo possa aiutare qualcuno in futuro.

Alla risposta di Magus:

il percorso completo deve me specificato

Gli stati astratti possono essere utilizzati per aggiungere un prefisso a tutti gli URL di stato figlio. Ma nota che abstract ha ancora bisogno di una ui-view per essere popolato dai suoi figli . Per farlo puoi semplicemente aggiungerlo in linea.

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

Per ulteriori informazioni, consultare la documentazione: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views