将子路径设为默认

Question

我在这里问了一个类似的案例，但后来发现这不完全是我想要做的：

这是一个新版本：

HTML

  <body ng-app="plunker">
    <div>
      <a ui-sref="admin">Admin</a>
      <a ui-sref="user">User</a>
    </div>
    <div ui-view></div>  
  </body>

JS

var app = angular.module('plunker', ['ui.router']);

app.config(function ($stateProvider, $urlRouterProvider) {
  $urlRouterProvider
    .when('/', '/admin/dashboard')
    .when('/admin', '/admin/dashboard')
    .when('/user', '/user/dashboard')
    .otherwise('/admin/dashboard');

  $stateProvider
    .state('admin.dashboard', {
      url: '/admin/dashboard',
      resolve: {
        test: function() {
          console.log('called admin');
          return;
        }
      },
      template: '<div>admin navigation. Go <a ui-sref="admin.link1">link1</a></div>'
    })
    .state('admin.link1', { //for some reason admin.link1 does not work but just link1 is OK
      url: '/admin/link1',
      resolve: {
        test: function() {
          console.log('admin.link1 called resolve');
          return;
        }
      },
      template: '<div>admin link1</div>'
    })
    .state('user', {
      url: '/user/dashboard',
      template: '<div>user dashboard</div>'
    });
});

代码： http ： //plnkr.co/edit/NYdWC1j9xskQnY8LjJkZ？p = preview

要求

我不需要为父路由渲染任何内容（ admin ）
默认重定向为/admin/dashboard
我需要将该URL正确地构造为/admin子级，因为上一个问题，它最终是/admin/dashboard/admin/link1
我确实需要admin和user父母。 需要建立儿童关系。 稍后将使用。

问题

目前，我无法显示子路线，例如admin.dashboard 。 它只是空白。 默认情况下如何显示dashboard ？
如果我添加了以下ui-sref="admin.dashboard"行来显示admin模板，那么即使是ui-sref="admin.dashboard"也无法将我带到正确的dashboard ui-sref="admin.dashboard"路线

javascript .state('admin', { url: '/admin', template: '<div>admin. Go <a ui-sref="admin.dashboard">dashboard</a></div>' })

Answer 1

嵌套路线时，您需要具有父路线。 在这种情况下，您将丢失“管理员”路线。

.state('admin', {
    url: '/admin',
    abstract: true,
    template: '<div ui-view></div>'
})
.state('admin.dashboard', {
    url: '/dashboard',
    templateUrl: '/views/admin.dashboard.html'
})
.state('admin.profile', {
    url: '/profile',
    templateUrl: '/views/profile.html'
})

abstract: true属性告诉ui-router这实际上不是您可以导航到的路由
路由的嵌套是隐含的. 在名字里
然后，路由是/admin/dashboard和/admin/profile

参见： https : //github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#issue-my-templates-are-not-appearing--loading --showing（re：missing ui-view /空白视图问题）

Answer 2

有一个更新的塞子。 为了简单'admin.dashboard' ，我首先将状态'admin.dashboard'更改为：

.state('admin_dashboard', {
  url: '/admin/dashboard',
  ...

原因是，此处将任何点都视为子状态。 现在我们可以（但不必）介绍admin的子状态，以说明如何正确调用该state ...

这些是<a>内部调用中的重要更改

不能使用 ui-sref（原始）

<div>
  <a ui-sref="admin">Admin</a>
  <a ui-sref="user">User</a>
</div>

工作用户界面

<div>
  <a ui-sref="admin_dashboard">Admin</a>
  <a ui-sref="user">User</a>
</div>

工作 href

<div>
  <a href="#/">Admin as <samp>'/'</samp></a>
  <a href="#/admin">Admin as <samp>'/Admin'</samp></a>
  <a href="#/user">User</a>
</div>

如我们所见， ui-sref必须包含状态名称 ，而href可以（必须）包含url，甚至包括when()内部定义的url。

检查更新的示例 ...

更新：

如果我们想和父母孩子一起去，我们可以有这样的设置

$stateProvider
     .state('admin', {
       url: '/admin',
       template: '<div>admin. Go <a ui-sref="admin.dashboard">dashboard</a>' + 
       '<div ui-view=""></div>' +
       '</div>'
     })
    .state('admin.dashboard', {
      url: '/dashboard',
      resolve: {
        test: function() {
          console.log('called admin');
          return;
        }
      },
      template: '<div>admin navigation. Go <a ui-sref="admin.link1">link1</a></div>'
    })
    .state('admin.link1', { 
      url: '/link1',
      resolve: {
        test: function() {
          console.log('admin.link1 called resolve');
          return;
        }
      },
      template: '<div>admin link1</div>'
    })
    .state('user', {
      url: '/user/dashboard',
      template: '<div>user dashboard</div>'
    });

这些将成为锚点

不能使用 ui-sref（原始）

<div>
  <a ui-sref="admin">Admin</a>
  <a ui-sref="user">User</a>
</div>

工作用户界面

<div>
  <a ui-sref="admin.dashboard">Admin</a>
  <a ui-sref="user">User</a>
</div>

工作 href

<div>
  <a href="#/">Admin as <samp>'/'</samp></a>
  <a href="#/admin">Admin as <samp>'/Admin'</samp></a>
  <a href="#/user">User</a>
</div>

和更新的矮人

将子路径设为默认

问题描述

2 个解决方案

解决方案1
1 2014-07-24 01:17:45

解决方案2
1 已采纳 2014-07-24 04:12:08

将子路径设为默认

问题描述

2 个解决方案

解决方案1 1 2014-07-24 01:17:45

解决方案2 1 已采纳 2014-07-24 04:12:08

解决方案1
1 2014-07-24 01:17:45

解决方案2
1 已采纳 2014-07-24 04:12:08