离子路由问题，显示空白页 [英] ionic routing issue, shows blank page

问题描述

我开始对sidemenu启动应用程序之上构建应用程序离子。起动应用程序有一个基本状态应用程序，这是抽象的，所有的sidemenu网页应用程序，例如app.search，app.browse，app.playlists等。

I started building ionic app on top of the sidemenu starter app. The starter app has a base state 'app' which is abstract and all the sidemenu pages are children of the app for example app.search, app.browse, app.playlists etc.

我也有类似的层次结构。不过，我想起始页是一些其他的页面，这意味着它是在应用层面。

I have similar hierarchy. However, I want the start page to be some other page, which means it is at the app level.

在美国是这样的：

$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');

当我运行应用程序时，URL默认为

When I run the app, the url defaults to

http://192.168.1.4:8100/#/join

和显示一个空白页。显然，join.html不为空。此外，在joinCtrl中的console.log消息没有输出。

and shows a blank page. Obviously, the join.html is not blank. Also, the console.log messages in joinCtrl are not outputted.

我无法弄清楚它为什么不加载页面加入。当我改变，否则指向'/应用/搜索，一切正常。

I am not able to figure out why is it not loading the join page. When I change the otherwise to point to '/app/search', everything works.

任何想法是怎么回事？我如何在默认情况下加载初始页面，然后导航到app.search状态？

Any idea what's going on? How do I load the initial page by default and then navigate to the 'app.search' state?

推荐答案

我预计，由于应用程序是抽象的 - 这是有原因的。要父母/布局状态。在它的模板应该最有可能居住的所有其他国家。

I would expect that because the app is abstract - it is there for a reason. To be parent/layout state. In its template should most likely live all other states.

如果是 - 检查这个工作的例子我创建证明。我们需要的是为纪念加入为应用状态的孩子。那么'menuContent 占位符将被适当搜索在应用程序模板：

If yes - check this working example I created to demonstrate that. What we need is to mark the join as a child of the app state. Then the 'menuContent' placeholder will be properly searched in the app template:

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

有一个工作plunker

定义 URL：^ /加入有支持的想法，该URL是这样定义的：

The definition url: "^/join", is there to support the idea, that the url defined like this:

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

将工作，即使嵌套状态的（连接是应用程序的孩子）的。参见：

如果您想拥有绝对的URL匹配，那么你就需要preFIX您的网址字符串以特殊符号'^'。

If you want to have absolute url matching, then you need to prefix your url string with a special symbol '^'.

这仅仅是一种方式......我们可以做类似的东西，如果连接不嵌套的状态，但随后应针对'而不是'menuContent

This is just one way... we can do the similar stuff if the join is not nested state, but then it should target the unnmaed view '' instead of 'menuContent'

这篇关于离子路由问题，显示空白页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！