Impossible de résoudre "…" à partir de l'état ""

C'est la première fois que j'essaye d'utiliser ui-router.

Voici mon 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'
  });
})

Comme vous pouvez le voir, j'ai deux états. J'essaye d'enregistrer l'état comme ceci:

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

Mais je reçois

Impossible de résoudre le 'registre' à partir de l'état ''

exception. Quel est le problème ici?

Ce type d'erreur signifie généralement que certaines parties du code (JS) n'ont pas été chargées. Que l'état qui est à l'intérieur ui-srefmanque.

Il y a un exemple de travail

Je ne suis pas un expert en ionique, donc cet exemple devrait montrer que cela fonctionnerait, mais j'ai utilisé quelques astuces supplémentaires (parent pour les onglets)

Il s'agit d'un état un peu ajusté 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('/');
}) 

Et ici, nous avons la vue parent avec des onglets, et leur contenu:

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

Prenez-le plus qu'un exemple de la façon de le faire fonctionner et d'utiliser plus tard le framework ionique de la bonne manière ... Vérifiez cet exemple ici

Voici des questions et réponses similaires avec un exemple utilisant le problème de routage ionique des vues nommées (pour une meilleure solution) , affiche une page vierge

La version améliorée avec des vues nommées dans un onglet est ici: 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>

ciblage des vues nommées:

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

Je suis juste venu ici pour partager ce qui m'arrivait.
Vous n'avez pas besoin de spécifier le parent, les états fonctionnent de manière orientée document, donc, au lieu de spécifier parent: app, vous pouvez simplement changer l'état en 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 Attention, si vous voulez aller au plus profond de l'imbrication, le chemin complet doit me spécifier. Par exemple, vous ne pouvez pas avoir un état comme

app.cruds.posts.create

sans avoir un

app
app.cruds
app.cruds.posts

ou angular lancera une exception disant qu'il ne peut pas comprendre la déroute. Pour résoudre cela, vous pouvez définir des états abstraits

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

J'ai juste eu ce même problème avec Ionic.

Il s'avère que tout allait bien avec mon code, j'ai simplement dû quitter la session de service ionique et relancer le service ionique.

Après être retourné dans l'application, mes états ont bien fonctionné.

Je suggérerais également d'appuyer plusieurs fois sur save sur votre fichier app.js si vous exécutez gulp, pour vous assurer que tout est recompilé.

Eu le même problème avec le routage Ionic.

Une solution simple consiste à utiliser le nom de l'État - en gros state.go(state name)

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

Et dans le contrôleur, vous pouvez utiliser $state.go('tab.search');

J'ai eu un cas où l'erreur a été lancée par un

$state.go('');

Ce qui est évident. Je suppose que cela peut aider quelqu'un à l'avenir.

Comme l'a répondu Magus:

le chemin complet doit me spécifier

Les états abstraits peuvent être utilisés pour ajouter un préfixe à toutes les URL d'état enfant. Mais notez que le résumé a toujours besoin d'une vue d'interface utilisateur pour que ses enfants puissent être peuplés . Pour ce faire, vous pouvez simplement l'ajouter en ligne.

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

Pour plus d'informations, consultez la documentation: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views