Angular UI-路由器和嵌套状态

Question

我正在尝试让我的嵌套状态正常工作，但我不知道我做错了什么。

正文：

<div class="site_container" ui-view></div>

这里我想显示我的站点容器，它应该始终显示：

<header class="main_header">
    <h1>My header</h1>
</header>

<main  ui-view></main>

在-tag中我想在一些子状态之间切换，举个简单的例子我只想显示一个:

<h2>My content</h2>

因此，我想要：

<div class="site_container" ui-view>
    <header class="main_header">
        <h1>My header</h1>
    </header>

    <main  ui-view>
        <h2>My content</h2>
    </main>
</div>

这是我的配置：

angular.module('myApp').config([
'$stateProvider',
'$urlRouterProvider',
function (
    $stateProvider,
    $urlRouterProvider
    ) {

    $stateProvider

    .state('main', {
        abstract: true,
        url: '/',
        templateUrl: 'app.html'
    })
    .state('main.child', {
        url: '/child',
        templateUrl: 'child.html',
    })

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

你能告诉我，我做错了什么吗？

Answer 1

由于您的 abstract 状态在 URL 中有 /，这意味着当您创建子状态时，它可以有 URL 和 /child将被视为 //child

根据您当前的代码，它应该是 $urlRouterProvider.otherwise('//child');

Plunkr

但从技术上讲，为了使 URL 用户友好，您应该用空白声明抽象状态 ('') URL

.state('main', {
    abstract: true,
    url: '', //<--changed to blank URL
    templateUrl: 'app.html'
})

然后你可以让你的代码像你在问题中发布的那样工作

Demo Plunkr

Angular UI-路由器和嵌套状态

Angular UI-Router and nested states

javascript

routing

angularjs

angularjs-routing

angular-ui-router