角度ui路由器嵌套狀態從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>

您可以獲得更多詳細信息：

多個命名視圖

嵌套狀態和嵌套視圖