离子路由问题,显示空白页面

Question

我开始在sidemenu入门应用程序之上构建离子应用程序.初学者应用程序有一个基本状态'app',它是抽象的,所有sidemenu页面都是应用程序的子项,例如app.search,app.browse,app.playlists等.

我有类似的等级.但是,我希望起始页面是其他页面,这意味着它处于应用程序级别.

州看起来像这样:

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

当我运行应用程序时,网址默认为

http://192.168.1.4:8100/#/join

并显示一个空白页面.显然,join.html不是空白的.此外,不输出joinCtrl中的console.log消息.

我无法弄清楚为什么没有加载加入页面.当我改变其他指向'/ app/search'时,一切正常.

知道发生了什么事吗？如何在默认情况下加载初始页面,然后导航到"app.search"状态？

Answer 1

我希望这是因为应用程序是抽象的 - 这是有原因的.成为父/布局状态.在其模板中应该最有可能存在于所有其他状态.

如果是 - 请查看我创建的这个工作示例以证明这一点.我们需要的是将其标记join为国家的孩子app.然后'menuContent'将在应用模板中正确搜索占位符:

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

有一个工作的plunker

定义url: "^/join",是支持这个想法,url定义如下:

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

即使对于嵌套状态也会起作用(join是app的子代).看到:

绝对路线(^)

如果要使用绝对URL匹配,则需要在url字符串前添加特殊符号'^'.

这只是一种方式......如果连接不是嵌套状态,我们可以做类似的事情,但是它应该以未命名的视图''而不是'menuContent'为目标