Question

我开始在sidemenu入门应用程序之上构建离子应用程序。入门应用程序具有基本状态＆＃39; app＆＃39;这是抽象的，所有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消息。

我无法弄清楚为什么没有加载加入页面。当我将其他内容更改为指向＆＃39; / app / search＆＃39;时，一切正常。

知道发生了什么事吗？如何默认加载初始页面，然后导航到“app.search”＃39;状态？

Answer 1

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

如果是 - 请检查我创建的working example以证明这一点。我们需要的是将join标记为app州的孩子。然后，将在应用模板中正确搜索'menuContent'占位符：

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

有一个working plunker

定义url: "^/join",可以支持这个想法，即网址定义如下：

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

甚至可以用于嵌套状态（join是app的子项）。参见：

Absolute Routes (^)

如果您想要绝对网址匹配，则需要在网址字符串前加上一个特殊符号'^'。

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

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

1 个答案:

Absolute Routes (^)