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

问题描述

我开始在 sidemenu starter 应用程序之上构建 ionic 应用程序.入门应用程序有一个基本状态应用程序"，它是抽象的，所有侧菜单页面都是应用程序的子页面，例如 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.

我不明白为什么它没有加载加入页面.当我将 else 更改为指向/app/search"时，一切正常.

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.

如果是 - 请检查我创建的这个 工作示例来证明这一点.我们需要的是将 join 标记为 app 状态的子级.然后将在应用模板中正确搜索 '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: "^/join", 是为了支持这样的想法，即 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');

甚至适用于嵌套状态(join 是应用程序的子级).见:

will work even for nested state (join is child of app). See:

如果你想要绝对的url匹配，那么你需要在你的url字符串前面加上一个特殊符号'^'.

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

这只是一种方式......如果连接不是嵌套状态，我们可以做类似的事情，但它应该针对 unnmaed 视图 '' 而不是 '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屋！