Angular ui-router 嵌套状态从 url 打开

Question

我正在尝试使用ui-router 来管理单页应用程序上的嵌套视图。

假设我想创建一个具有公共区域和多个视图的仪表板应用程序。

主状态和嵌套状态是这样处理的：

    $stateProvider.state('home', {
        url: '/',
        template: 'MY HOME PAGE'
    })
    .state('login', {
        url: '/login',
        templateUrl: '/pages/login.html'
    })
    .state('registration', {
        url: '/registration',
        templateUrl: '/pages/registration.html'
    })
    .state('dashboard', {
        url: '/dashboard',
        templateUrl: '/pages/dashboard/dashboard.html' 
    })
    .state('dashboard.me', {
        url: '/me',
        templateUrl: '/pages/dashboard/me.html'
    })
    .state('dashboard.messages', {
        url: '/messages',
        templateUrl: '/pages/dashboard/messages.html'
    })
    .state('dashboard.friends', {
        url: '/friends',
        templateUrl: '/pages/dashboard/friends.html'
    });

仪表板 HTML 页面如下：

<div class="container" ng-controller="dashboardCtrl" ng-init="init()">

<h2>DASHBOARD</h2>
<ul>
    <li><a ui-sref="dashboard.me">Me</a></li>
    <li><a ui-sref="dashboard.messages">My Messages</a></li>
    <li><a ui-sref="dashboard.friends">My Friends</a></li>
</ul>

<div ui-view></div>

上面的 HTML 也包含在 ui-view 中。

如果我使用锚点导航我的应用程序，一切正常。 顺便说一句，如果我尝试直接访问 myhost/dashboard/me 或 myhost/dashboard/friends（每个具有两级嵌套视图的路径）该应用程序不起作用。我得到一个有角度的（意外的令牌

似乎无法解析第一级嵌套视图。 下图显示了使用锚点完成导航时获得的 HTML：

以及直接从浏览器地址链接调用页面时得到的HTML：

有什么想法吗？谢谢。

Answer 1

问题是角度未加载，因此出现错误。代码对我来说看起来是正确的，除非你错过了

的结束标签

<div class="container" ng-controller="dashboardCtrl" ng-init="init()">

?

Answer 2

JavaScript 状态配置：

    $stateProvider.state('home', {
        url: '/',
        template: 'MY HOME PAGE'
    })
    .state('login', {
        url: '/login',
        templateUrl: '/pages/login.html'
    })
    .state('registration', {
        url: '/registration',
        templateUrl: '/pages/registration.html'
    })
    .state('dashboard', {
        url: '/dashboard',
        abstract: true,
        parent: 'home',
        templateUrl: '/pages/dashboard/dashboard.html'
    })
    .state('dashboard.me', {
        url: '/me',
        views: {
            '@dashboard_view': {
                templateUrl: '/pages/dashboard/me.html'
            }
        }
    })
    .state('dashboard.messages', {
        url: '/messages',
        views: {
            '@dashboard_view': {
                templateUrl: '/pages/dashboard/messages.html'
            }
        }
    })
    .state('dashboard.friends', {
        url: '/friends',
        views: {
            '@dashboard_view': {
                templateUrl: '/pages/dashboard/friends.html'
            }
        }
    });

仪表板 HTML

<div class="container" ng-controller="dashboardCtrl" ng-init="init()">


<h2>DASHBOARD</h2>
<ul>
    <li><a ui-sref="dashboard.me">Me</a></li>
    <li><a ui-sref="dashboard.messages">My Messages</a></li>
    <li><a ui-sref="dashboard.friends">My Friends</a></li>
</ul>

<div ui-view="dashboard_view"></div>

您可以了解更多详情：

Multiple Named Views

Nested States and Nested Views