角度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 /儀表板/我或爲myhost /儀表板/朋友（與嵌套視圖兩級每一條路徑）的應用程序無法正常工作。我得到一個角度（意想不到的令牌<），但我認爲它不相關...

它似乎不能解決第一層的嵌套視圖。 下圖顯示了當導航使用錨完成獲得的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