angularjs - problema de enrutamiento iónico, muestra página en blanco

angular-ui-router ionic-framework

Question

Empecé a construir aplicaciones iónicas en la parte superior de la aplicación de inicio sidemenu. La aplicación inicial tiene una ''aplicación'' de estado base que es abstracta y todas las páginas del menú lateral son elementos secundarios de la aplicación, por ejemplo, app.search, app.browse, app.playlists, etc.

Tengo una jerarquía similar. Sin embargo, quiero que la página de inicio sea otra página, lo que significa que está en el nivel de la aplicación.

Los estados se ven así:

$stateProvider

.state(''app'', {
  url: "/app",
  abstract: true,
  templateUrl: "templates/menu.html",
  controller: ''AppCtrl''
})

.state(''join'', {
  url: "/join",
  views: {
    ''menuContent'' :{
      templateUrl: "templates/join.html",
      controller: ''joinCtrl''
    }
  }
})

.state(''app.search'', {
  url: "/search",
  views: {
    ''menuContent'' :{
      templateUrl: "templates/search.html",
      controller: ''searchCtrl''
    }
  }
})

.state(''app.results'', {
  url: "/results",
  views: {
    ''menuContent'' :{
      templateUrl: "templates/results.html",
      controller: ''resultsCtrl''
    }
  }
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise(''/join'');

Cuando ejecuto la aplicación, la url está por defecto en

http://192.168.1.4:8100/#/join

y muestra una página en blanco. Obviamente, join.html no está en blanco. Además, los mensajes de console.log en joinCtrl no se generan.

No puedo averiguar por qué no está cargando la página de unión. Cuando cambio lo contrario para que apunte a ''/ app / search'', todo funciona.

¿Tienes idea de lo que está pasando? ¿Cómo cargo la página inicial de forma predeterminada y luego navego al estado ''app.search''?

Answer 1

Lo esperaría porque la aplicación es abstracta, está ahí por una razón. Para ser padre / estado de diseño. En su plantilla probablemente debería vivir todos los demás estados.

En caso afirmativo, verifique este ejemplo de trabajo que creé para demostrarlo. Lo que necesitamos es marcar la join como un elemento secundario del estado de la app . Luego, el marcador ''menuContent'' posición ''menuContent'' se buscará correctamente en la plantilla de la aplicación:

.state(''join'', {
      parent: ''app'',
      url: "^/join",
      views: {
        ''menuContent'': {
          templateUrl: "tpl.join.html",
          controller: ''joinCtrl''
        }
      }
})

Hay un plunker de trabajo

La url: "^/join", definición url: "^/join", está para apoyar la idea de que la url se define así:

// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise(''/join'');

funcionará incluso para el estado anidado (la unión es hija de la aplicación) . Ver:

Rutas absolutas (^)

Si quieres tener una correspondencia de url absoluta, entonces debes ponerle un prefijo a la url con un símbolo especial ''^'' .

Esta es solo una forma ... podemos hacer lo mismo si la unión no está anidada, pero luego debe apuntar a la vista no activada '''' en lugar de ''menuContent''